How to: 3 columns layout support (left/right sidebar)

Hello sbydrupal,

I will prepare for you a solution for 3 column support. Βecause my free time is limited, give me some time please and in the coming days i will answer you.

Thanks
/George

Is there any solution yet?

I am also keen on placing content into a left sidebar.

Is there a solution yet?

Thanks, great them though!

I'm interested in adding a left column/sidebar as well. Is there a solution available anywhere? Thanks....

Hello everyone,
thank you for helping - supporting Corporate Clean theme.

I have prepared the whole implementation for supporting three (3) columns in all possible combinations: First sidebar - Content, Content - Second sidebar, Content, First sidebar - Content - Second sidebar. This implementation requires changes in three (3) theme files corporateclean.info, page.tpl.php and style.css.

Could you please implement the following changes in your end, review them and come back with comments/issues? After this, I will commit these changes in order to be included in next Corporate Clean theme release.

Just make the following changes (you can find also the three (3) theme files attached to this issue):

1. Replace the page.tpl.php with the attached one which supports the two sidebars
2. Edit the corporateclean.info file and add the line regions[sidebar_second] = Second sidebar after regions[sidebar_first] = First sidebar

Finally, your corporateclean.info file should contains the following code:

name = CorporateClean
description = A flexible, recolorable theme with many regions supported by <a href="http://www.morethanthemes.com/" target="_blank">More Than (just) Themes</a>. If you like this theme, we encourage you to try also our other <a href="http://www.morethanthemes.com" target="_blank">Premium</a> and <a href="http://drupalizing.com" target="_blank">Free</a> Drupal themes.
version = VERSION
core = 7.x

stylesheets[all][] = style.css
stylesheets[all][] = color/colors.css

regions[search_area] = Search area
regions[highlighted] = Highlighted
regions[content] = Content
regions[sidebar_first] = First sidebar
regions[sidebar_second] = Second sidebar
regions[banner] = Banner
regions[footer_first] = Footer first
regions[footer_second] = Footer second
regions[footer_third] = Footer third
regions[footer] = Footer
regions[footer_bottom_right] = Footer bottom right
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

settings[breadcrumb_display]= 1
settings[slideshow_display]= 1
settings[slideshow_js]= 1
settings[slideshow_effect]='scrollHorz'
settings[slideshow_effect_time]='10'

project = "corporateclean"

3. Edit the style.css file

Change from

#main { float:left; width: 620px; padding:0 60px 0 0; margin:0; }
#sidebar { float:left; width: 280px; padding:0; } 
.no-sidebars #main { width:960px; padding:0; margin:0; }
.no-sidebars #sidebar { display:none; }

To

#main { float:left; margin:0; }
#sidebar-first, #sidebar-second  { float:left; width: 280px; padding:0; }
.one-sidebar.sidebar-first #main { width: 620px; padding:0 0 0 60px; }
.one-sidebar.sidebar-second #main { width: 620px; padding:0 60px 0 0; }
.two-sidebars #main { width: 340px; padding:0 30px; }
.no-sidebars #main { width:960px; padding:0; margin:0; }
.one-sidebar.sidebar-first #sidebar-second, .one-sidebar.sidebar-second #sidebar-first,
.no-sidebars #sidebar-first, .no-sidebars #sidebar-second { display:none; }
img { max-width: 100%; height: auto; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Note that I have added extra style rules for images. This addition was made in order to prevent you from changing the size of main content area images in the case of two (2) sidebars (this state will reduce the width of main content area).

4. Clear all cached data.
   This step is very important in order to force your template to be informed for the changes you have made in the template files. To do this go to Administer » Site configuration » Performance » Clear cached data

I am looking forward to your comments.

Thanks
/George

Thanks George. It looks great.

I found 2 small issues:

1) The items that get placed in sidebar-second don't have a white background like the items in sidebar-first do.
2) The heading for the top item placed in sidebar-second is positioned slightly lower that the headings for the top items in sidebar-first and content.

Thanks,
Matt

Hello Matt,
thank you for your reply.

You are absolutely right with your mentions. I have already resolved these issues. You can find attached 2 refreshed files (style.css, color/colors.css).

Just make the following changes:

1. Replace the style.css with the attached one.
2. Replace the color/colors.css with the attached one.

Thanks again and I am looking forward to your comments regarding the new changes.
/George

Hello,
just committed all these changes:

• http://drupalcode.org/project/corporateclean.git/commit/080ccb4
• http://drupalcode.org/project/corporateclean.git/commit/1bf20a0

Thanks
/George

Hi George,

Looks good. Thanks for making the changes so quickly.