Blog Margins

[WordBohemia]

Can you please advise how we can set the right hand blog margin further to the left, as it is so close to the right hand widgets.

Here is a link to show you the issue: http://wordbohemia.co.uk/fiction/?p=93#more-93

Thank you

[Sushil Adhikari]

There is actually…but you will need to make some theme file adjustments to do it. Because this theme uses the Bootstrap 12-grid (column) layout, it also has coding (css) for offsets which allows you to put more spacing between columns. Hopefully you watched the tutorial for Child themes because this is where a child theme comes in handy so that future updates to Encounters won’t overwrite your changes.

Basically for the blog layout, the theme file that handles the columns (main content and the right sidebar column) is the “blog-right.php” file. Inside that file are two div containers:

and…

The first means to make the container 8 columns wide and the other is set to make the sidebar 4 columns wide. This theme as mentioned is using a 12 grid layout (12 columns). So these two containers need to equal 12 columns. So you could make it span6 and span6 if you want because these equal 12. Likewise I could do a span7 and a span5 because these also equal 12.

For your request, you want to make more space between the main content and the sidebar so we have to add an extra class to one of these containers and also change the spans. So one is going to make it smaller in width, so we will do it to the main content.

Make the span8 this:

Then make the other one (the sidebar) this:

So what is happening now is that we made the main content smaller but we kept the right sidebar the same width. However, the offset1 adds 1 column of space between these two and makes up for the 1 column we took off the main content container and keeps the right sidebar where it is.

Making sites is fun hey 🙂

It’s a bit techy, but this is how you can add more space by using the offset class.

[WordBohemia]

Hi there,
Do you have the code for a ‘page’ as well?

Thank you

[Sushil Adhikari]

Code for what page?
The code above can be found in the file mentioned blog-right.php

If you are using a child theme for this, you would copy that file and place it in the child theme’s folder where the style.css is for it. Then make your edits to the code of the page file as described above. Of course, you may want to read more about child themes before doing it, otherwise if you do this without the child theme, simply open the file blog-right.php and make those couple of edits.

[Author]

Posts