Allegro theme sidebar position, colour etc

Classic General
1

Hi, hoping someone could help me work out how to change the position and colour of the sidebar on this page

http://www.nauti-craft.com/test/

Ideally want to move it slightly to the right to create more space between it and the main content.

Cheers

Ben

2

In the Theme you’re using, Allegro Pro, the sidebar appears to be defined using a class, ‘sidebar’.

You could start by experimenting with custom CSS like:

.sidebar {
      margin-left: 20px;
}

But that might cause proms because there isn’t enough space in the container’s width.

Brandon at BLT is very responsive and might be able to suggest a better solution.

3

Thanks Mark, custom CSS is working for other elements, like moving site logo, but cant get it to play nice with the sidebar.

firebug lets me change the right margin on the main container:

element.style { margin-right: 16px;}

which achieves what I want, but I cant work out how to get it working in Rapidweaver

4

cannonball,

Yes, Firebug is very useful, isn’t it!

You’d add that one statement of code, viz:

element.style { margin-right: 16px;}

as custom CSS in the RW Inspector (third icon from left > third tab).

Or in Configure (the spanner top left of the RW window) > Code > CSS.

But, as I say, that may not be the end of the thing: both Margin and Padding are additive in CSS. If you have a container 100px wide and add a margin of 10 on each side, you’ll be forcing it to 120 px (100 + 10 + 10). So you’d have to set the width to 80 in compensation; the same applies to Padding.

So it still worries me that you may be successfully changing one aspect of your object’s dimensions while other dimensions are either not accessible, not yet changed or otherwise unchangeable because there are more complex dependencies in the Cascading way CSS works.

Look out for the unexpected… typically jumping on the page, or wrapping.

What’s worse, of course, is that browsers tend to behave differently. IE actually tends to be more forgiving of containers wider than they should be.

You may well have to experiment; or you may be lucky!

5

Its easy enough to move the sidebar over to the right a bit with this CSS:

.sidebar.four.columns.offset-by-one {
    margin-left: 4%;
}

However… with that in place now look at your side on a smaller viewport. The sidebar looks awful…

You would then need additional CSS/Media Queries to straighten that out.

This is one of those cases where it would be interesting to hear what the theme designer thinks should be done. Keep us posted…