Hi,

Thanks for the elegant theme. How can we extend it to 3 columns and specifically inserting left side bar ?

Thx

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

gtsopour’s picture

Assigned: Unassigned » gtsopour
Issue tags: +corporate, +Corporate Theme, +Corporate Clean Theme

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

sbydrupal’s picture

Thx George. It is a great elegant theme.

sotathan’s picture

Is there any solution yet?

bootn’s picture

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

Is there a solution yet?

Thanks, great them though!

mkmevans’s picture

Version: 7.x-1.1 » 7.x-1.5

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

gtsopour’s picture

Title: 3 column and left side bar - how to create ? » How to: 3 columns layout support (left/right sidebar)
Status: Active » Needs review
Issue tags: +Corporate Clean with 2 columns layout, +Drupal theme with 2 sidebars
FileSize
6.77 KB

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
  3. 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"
    
  4. Edit the style.css file
  5. 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).

  6. 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

mkmevans’s picture

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

gtsopour’s picture

FileSize
5.6 KB

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

gtsopour’s picture

Category: support » feature
gtsopour’s picture

Status: Needs review » Fixed
mkmevans’s picture

Hi George,

Looks good. Thanks for making the changes so quickly.

Automatically closed -- issue fixed for 2 weeks with no activity.