By IncrediDad on

I want to move the left column of a 3 column theme to the center and move the main content to the left. Would this be done in:

a) the theme's php only
b) the theme's css only
c) both
d) it depends on how it was coded

Thanks for helping a newbie.

Trip

Comments

sicario’s picture

sicario commented

If u r good with css, u can do it in that way, just look at zen garden. In other words, don't touch the html, and just modify the position with css.
Other way, is modify the theme itself, make the layout, make the css, and then add the drupal functions to that layout. By the way, i believe that the best way to reach this, is with PHPtemplate, due to its flexibility.

sepeck’s picture

sepeck commented

What is the theme you are using? Do you have a site up that we can look at? And the answer is d
:)

-sp
---------
Test site...always start with a test site.
Drupal Best Practices Guide

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

IncrediDad’s picture

IncrediDad commented

Here is the test site: http://incredidad.com/drupal

I have settled on the democratica theme and just want to swap the 1st and 2nd columns. I first moved the "left" column code to a spot after the main column code in the page.tpl file. I did this because it worked with grey_box (a much simpler theme I know). It moved but I had to tinker with the css to get it to move over to the right spot. I have tinkered and tinkered with the css but it is still broken and even if I get it working with this method it feels like a kludge.

Thanks for the links and let me know if yo have any simpler idears...

Best,
Trip

sicario’s picture

sicario commented

Hi there.
Well, with the link of your site, it's much easier understand the problem.
Summarizing, you screw the code.
First, the header section. You have:

<div id="branding">
            <h1 id="site-name"><a href="" title="Index Page">incrediDad</a></h1>

This code, cut the header, it needs a </div> at the end.

On the other hand, the h1 in democratica should be use inside the <div class="hide"></div>. So, you just have to clean up your code. Copy and paste the original code, and then modify it. If you need change the position of a column, you don't need to touch the html (page.tpl.php) just the css.

So, in your site, the problem is the header and the search block. The header should be something like this:

<div class="hide">
      <h1><a href="/" title="Index Page">incrediDad</a> </h1>
    <p>
    <a href="/404#main-content" title="Skip directly to the content" class="active">Skip to content</a>  </p>
</div>

<div id="outer-wrapper">

<!-- START: BRANDING -->

<div id="branding">
      <div id="logo"><a href="" title="Index Page"><img src="/themes/democratica/logo.png" alt="your logo" /></a></div>
        <div id="site-slogan">Your site slogan</div>
  </div>

That's gonna make the header 'clickable'.
For the search block: this should be inside the <div class="sidebar" id="sidebar-right"></div> tags, not inside the <div id="branding"></div> tags!

Clean up your code, and use the original code. Tell us if this was useful.

IncrediDad’s picture

IncrediDad commented

I am getting closer doing it all by css, but the two columns seem to move in tandem up and down. I am just glad to know it can be done with the css only. The theme is very well designed with css for modules, layout and styles.

http://incredidad.com/drupal

sicario’s picture

sicario commented

If you still need help, just ask here.
I'm insist, looking the link, that you need first use the original code (page.tpl.php), and then modify it.

Regards.

IncrediDad’s picture

IncrediDad commented

It was too much for my meager skills. Box_grey switched the columns with a simple move of the html code. I hammaerd on democratica for about a week and was pulling my hair out. I wanted to go with box_grey in the first place but the people I am working with could not see its potential with all of its white space. Starting to come together.

http://incredidad.com/drupal

Dublin Drupaller’s picture

Dublin Drupaller commented

Hi

Looking really good. just tried it in IE and works like a charm..great use of the space.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sepeck’s picture

sepeck commented

Looking very nice.

-sp
---------
Test site...always start with a test site.
Drupal Best Practices Guide

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

sicario’s picture

sicario commented

Looking nice and clean. Btw, works great in Firefox too.

Congratulations, again.