Author Topic: Three Column Layout  (Read 724 times)

AF

  • Active Member
  • **
  • Posts: 27
  • Karma: +1/-0
Three Column Layout
« on: August 09, 2011, 06:48:38 PM »
Hi all,

I'm currently giving my site a revamp and I want to include a THIRD column.

I know I can add it directly to the frame.html but that would just give me the same content repeated through out the entire site.
Is there a way to add a third column (right column) that would function the same as the existing left column? I basically just want to use it for ads and links etc so it doesn't need to have any special functionality. So for example you would have the search.html , search_left.html ..and then the new search_right.html.

My html and CSS skills are fine but I know nothing about php.. So is there a solution to this? I think the Etano community would benefit greatly as this provides far greater flexibility. 

C - World

  • Active Member
  • **
  • Posts: 23
  • Karma: +0/-0
Re: Three Column Layout
« Reply #1 on: August 10, 2011, 01:38:52 AM »
for this goto mavericks web www.maverickwebworks.com in that go to http://www.maverickwebworks.com/free.html & download http://www.maverickwebworks.com/downloads/alt_index.zip  before use first read the instruction given in alt_index.zip.


C - WORLD
www.cworld.pcriot.com
Sarkar Sakhi

AF

  • Active Member
  • **
  • Posts: 27
  • Karma: +1/-0
Re: Three Column Layout
« Reply #2 on: August 10, 2011, 03:39:11 AM »
Thanks C - World

That wasn't actually the solution at all as it was just to create two columns for the index page only, and I wanted a three column layout through the rest of my site excluding the index page.. however I have managed to do it anyway and I will share how to do it to others. I haven't tested it any further but it appears to be working, and if I have missed anything or there is going to be any adverse effects I will update, and hopefully Maverick can spare us a moment to confirm.

-Note : If you are not good with coding html and more so the CSS don't attempt this as my site is now very modified from its original layout. The third column may appear but it wont just be 'wa la'... in the right place.

ALSO note: This was done on my test site - It will produce an error on your live site so you will also need to add the modified frame.html, and the new home_right html files to the live site aswell (def skin). Just make sure you empty the home_right.html file contents completely so that it doesnt appear or mess up your site.

First copy this line of code from frame.html

<div id="content_column2">
         {left_content}
         </div>   

Paste it back into the content-container but make sure its positioned to be the last div in the container.
-alter it to look like this: (column3 & right_content)

<div id="content_column3">
         {right_content}
         </div>


You should now have 3 main div structures. Make sure they are in this order starting from the top.
(this is modified on my site so that the content_column2 is NOT contained within content_column1.)
                           
1<div id="content_column2">
  {left_content}
</div>

2<div id="content_column1" class="{tplvars.page} content_area large"> etc...

 
3<div id="content_column3">
  {right_content}
  </div>

Make this same change to your def skin also.


Then add this line of style code to the content.css file.
(note you will probably need to float all 3 columns left, but you will need to play around until it works)
 
#content_column3
{
float:left;
}

Now lets use the home.php as the page we will add the 3rd column to.
Take a copy of the home_left.html and rename it to home_right.html (leave the original contents in the home_right.html) and upload it back to the server where the other .html files reside in your test skin folder (test site)

Now empty the contents and of this same home_right.html file and upload it to your default(def) skin. You must do this to avoid creating an error on your live site as you have manipulated the php files. it is now empty so it wont display and mess up your live site.

Next:

Take a copy of the home_left.php and rename it to home_right.php.
Open this file and change the following from:

$tpl->set_file('left_content','home_left.html');
$tpl->set_var('tplvars',$tplvars);
$tpl->process('left_content','left_content',TPL_OPTIONAL);

to this:

$tpl->set_file('right_content','home_right.html');
$tpl->set_var('tplvars',$tplvars);
$tpl->process('right_content','right_content',TPL_OPTIONAL);

Save and upload it back to where the .php files reside, just like what we did with the previous html file.


Now finally open the home.php - we are going to make a duplicate 'if statement' from the existing one.
Where you see this section of code:

$tplvars['title']=$GLOBALS['_lang'][124];
$tplvars['page_title']=$GLOBALS['_lang'][124];
$tplvars['page']='home';
$tplvars['css']='home.css';
if (is_file('home_left.php')) {
   include 'home_left.php';
}

Copy the "if statement" and paste it below itself and change where it says 'home_left.php' to 'home_right.php' (both of them) to look like this:

$tplvars['title']=$GLOBALS['_lang'][124];
$tplvars['page_title']=$GLOBALS['_lang'][124];
$tplvars['page']='home';
$tplvars['css']='home.css';
if (is_file('home_left.php')) {
   include 'home_left.php';
}
if (is_file('home_right.php')) {
   include 'home_right.php';
}

Save and upload once again and overwrite the old file.
You should now have a duplicated 3rd column in the home page which contains the same content as the original column2 ..just dump the contents from the home_right.html and insert what ever html you wish.
Use the same principle on any page that you want three columns.

Now along comes Maverick to say Noooo! its all wrong! Fingers crossed huh ;)
« Last Edit: August 10, 2011, 05:05:12 AM by AF »

AF

  • Active Member
  • **
  • Posts: 27
  • Karma: +1/-0
Re: Three Column Layout
« Reply #3 on: August 10, 2011, 03:56:23 AM »
However, I don't know how to go about adding titles to new div's .. I think it has something to do with the Translate/strings in the admin panel...?

Does someone know the solution to this??

maverick

  • Active Member
  • **
  • Posts: 1382
  • Karma: +93/-1
    • Etano Templates
Re: Three Column Layout
« Reply #4 on: August 10, 2011, 06:43:55 AM »
There's one major factor you're over looking.

You have 3 columns that now add up to somewhere around 1200px, yet if you look in layout.css file the content section has a width of 960px, hmmm how is 1200px is supposed to fit into 960px.

The large content area is 724px wide and the left and columns are each 206px wide, plus there's margins and/or paddings to factor in as well.

You may get away with it in some browsers that will override the content width and just push everything to whatever width is necessary, others won't it and thing may start to fall apart.

You can't cherry pick and have some pages display at 1200px wide and others at 960px, it needs to be one or the other.

Also having a site that will span 1200px wide is really pushing the barrier, therefore you'd need to consider and determine what the width of each column will be so everything (including all the margin spaces) will add up to an overall screen width that will suit all the most common monitor resolutions being used.

It's important that you test your new layout in a variety of screen resolutions and browsers as you may be surprised at the varying results you may get.

To convert Etano into a proper 3 column layout is going to be a little more work than you think, and unfortunately I don't have the time to do a 3 column layout for the community as it would probably take me a week to do it properly. Plus I have little interest in creating a 3 column layout for Etano because IMO there's no need for it just for creating some advertising space. In most left columns there's not much there to begin with, leaving plenty of room for ads. Some left columns could be totally cleared and used exclusively for ads, even the home page, if the my "account menu" was added as a sub-menu to the top of the pages, which would also give users site wide access to their account items. That's just one suggestion, with some creativity there's possibly other solutions one could come with rather than going to a full 3 column layout just to include some advertising space, which would only be added on some pages.

But if this is the route you want to go for your own site, that's fine too, just take into consideration the adjustments you'll need to do, some of which I mentioned.
« Last Edit: August 10, 2011, 11:35:40 AM by maverick »
Etano Templates and Mods

http://www.maverickwebworks.com

AF

  • Active Member
  • **
  • Posts: 27
  • Karma: +1/-0
Re: Three Column Layout
« Reply #5 on: August 11, 2011, 04:55:15 AM »
Your dead right Maverick, That is why I mentioned if you were no good with HTML and css that you shouldn't attempt it as I didn't want to mislead anyone into thinking that it would work straight off the cuff. I probably should have mentioned the width changes also..and the fact that I had already done it, but i was figuring anyone with enough familiarity with Etano and general web development would probably realise the implications of the above code.

I have done some extensive work to the css and some HTML to get everything to work, including containing the entire site within a 1000px wide wrapper that is centered in the screen. The frame html had to be modifed, all my columns have been resized to compensate and as you would know all of the internal content/photo widgets/forms etc,.. pretty much everything had to be adjusted, a somewhat large job. It seems to display ok on every res that ive tried along with all major browsers (except IE6 as im not going to waste my time). I'm yet to test it on different aspect ratio monitors tho. The 1000px overall width was just a spare of the moment thing to see how flexible the css was, and I was kind of itching to mess around with it. Ive not really investigated to what the recommended max pixel width is in regards to overall compatibility.
The three column idea took a lot of contemplation and at the end of the day I decided I wanted the site to look a bit busier so I went for it and hopefully I wont run into too may issues with the other  pages.

I do have to say this Maverick, and I probably speak for a lot of people. I have spent literally hours on end reading these Datemill forums which were recommended by John the former owner of my site. The information contained within the threads and replies ..mainly your thread replies have been an extreme and invaluable form of help to me. So im really carrying on Johns site legacy as I have faith in the site itself, the Etano script, aided with the up-most respect for Johns previous hard work. I think I can give it the aesthetics it deserves. I may have the odd question that I hope yourself or someone can help with along the way. Thanks for your time so far though, I really don't know how you manage it all!