Sidebar sizes

[Cia Williford]

Hi, Andre,

Based on this picture (front page right and left sidebar template), am I correct in assuming that the right sidebar is purposely wider than the left? Where in the coding would I go to make them equal sizes? Will it screw anything up?

Thanks!

Cia

sidebar-size-photo.png

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Correct…normally the left sidebar is used for links, but if you need to equalize the width with the other, you will need to edit the page template by changing the span classes. If you change the left one to be like the right one, then your content span class has to be smaller by whatever you add to the left. This means you would end up with span4 + span4 + span4 = 12 columns (the layout). This gives you 3 equal columns. However, if you change the right sidebar from span4 to span3 to match the left one, then your content span5 will be span6 which means span3 + span6 + span3 = 12 column width. Fun hey! :whistle:

lol…had to read that twice myself to make sure I got that right.

Please note, if you make this modification, this is where the child theme comes into play so you can keep getting theme updates. So you would copy that template over to the child theme then make your changes to that one. Just make sure the template file is in the same structure as the parent theme is.

[Cia Williford]

Thank you for the quick reply!

[Sarah Fuller]

I would also like to adjust the widths of my various columns, but as I have no experience with any coding I’m going to lay it out here like a total newbie to see if I understand this correctly…

I’m using Encounter Pro

I’ve gone Appearance > Editor

Under Table of Contents I see the following listed: 39 – Bootstrap 12 Column Grid – Responsive Queries

This leads me to think I need to go to that area to make adjustments, so I scroll down and see container width is 1170px which I take to mean the total page width?

Then I see span 12 also at 1170px which must also mean this is the total sum of all spans as each one shrinks in increments of 100px … except the first 1 which is 70 … okay, so I am getting the concept of the 12 columns, but….

How do I determine which of the 12 columns are dedicated to each of the three columns on the page (left sidebar, content, right sidebar)?

I’d like my left sidebar to be around 160px, right sidebar about 250px, and whatever is left over for the main content.

Advice please? 🙂

Sarah

[Sushil Adhikari]

Good morning Sarah…. straight to the point, doing what you described above would actually cause a lot of layout problems and I would not attempt that. Because you are wanting specific widths, this won’t be possible because this theme uses the Twitter Bootstrap framework which has a “specific” layout with specific sizes. Changing any of the sizing would cause way too many issues.

The only way to adjust the widths of columns is to go into the theme files and change the span classes as I mentioned earlier in the post reply. The files in question would be the page templates, but if I understand correctly, you are referring to the Left + right layout? The template for this would be the “page-left-right.php” file. You would need to change the spans:

Left sidebar = span3
Main Content = span5
Right sidebar = span4

You would need to change these spans (the number part) to adjust widths which you have from span1 to span12 to use. The span12 is full width, while the span1 is 60px.

If you open the theme’s style.css and look around line 2277, you will see the span sizes from .span12 down to span1.

For your left sidebar, if you want it to be 160px, the closest span class would be span2 (140px) or span3 (220px). These spans also have a margin which is 20px each side (left and right).

[Sarah Fuller]

Ok, thanks for that. I have located the file that needs to be edited, however, as I have never done this before I wonder if you could recommend a program to open and edit it with?

[Sushil Adhikari]

Correct on the spans.

As a side note, when displaying code in a post, it’s best to select (highlight) all your code, then on the editor is a Display Code button that you would click. The result is what you see in your post (which I edited to show how it looks). This helps prevent the site’s page from breaking when it sees HTML code like that.

Also, when you are in your WordPress dashboard, you can actually edit the file there by going to Appearance >> Edit >> then select the theme from the drop down, plus the file. I am also hoping you will use the child theme for this so you can keep the Encounters theme updated and not lose your changes. Might want to see my tutorial about the child theme for Encounters. Plus, read more about child themes here:

http://codex.wordpress.org/Child_Themes

[Sarah Fuller]

Opps, sorry, I didn’t realise that would happen. Thanks for the tip.

Will watch your tute on child themes … fingers crossed 🙂

Thanks so much 🙂

[Sarah Fuller]

That’s worked a treat, thank you so much Andre. Where do I do to adjust the blog page now so that it’s uniform with the other pages?

[Author]

Posts