adjusting the sidebar width in sentence « Support Forum | Kriesi.at

Support Forum » Sentence

adjusting the sidebar width in sentence

6 posts from 3 voices

Started 9 months ago by browncl
Latest reply from Nick
This topic is resolved

Tags:

browncl
Member

is there an easy way to adjust the width of the sidebar?

I was looking at the template code, but am not comfortable messing with that, since the templates are responsive.

thanks in advance.

Posted 9 months ago #
Nick
Moderator

Hi,

It all depends on what you are planning to do. If you can be more specific what you want to do, I can answer better. But if you want to experiment yourself, your best bet is to use Firebug browser attachment, since you wont be able to damage the theme files. However if you want to edit the theme files, please make sure you first make a backup copy each file that you edit, so this way if something goes wrong, you can easily restore the original file from the backup.

You can modify grid.css to move the position of the sidebar by changing the widths within the file. The sidebar gets absorbed at lower screen sizes, so you would have to look at the comments in grid.css to ensure you are modifying the correct screen sizes. Just make sure you remember to have a copy of the original grid.css saved before you begin!

Have fun,

Nick

Posted 9 months ago #
browncl
Member

I was looking to reduce the width by 20 - 30 pixels. I'll see what i can do within the grid css. will let you know how i do.

thanks.

Posted 9 months ago #
Ismael
Moderator

Hello,

It is actually safer to put your style customization on custom.css located on your css folder.

Regards,
Ismael

Posted 9 months ago #
browncl
Member

Ismael,

you have been a huge help, can you suggest a better way to adjust the sidebar width of this template. I looked at the grid css and am not sure that i want to mess with that, if i don't have to. I would like to decrease the width of the sidebar by 30 pixels.

thanks!

Posted 9 months ago #
Nick
Moderator
Hi,

This is the best solution I can offer. I will paste some of the CSS you need to change one of the responsive screen sizes, but not all the way since each time you are adding a widget , you have to adjust that widget's size in the three media queries which have the right tool bar. You need to install firebug on firefox or firebug lite on chrome (good for beginners.) Watch a 10 minute video on youtube, and you will realize how easy its to test modifications to css without knowing how to write it yourself.

To change the highest resolution:
```
/* Extra large */
	 @media only screen and (min-width: 1140px)  {

.container .seven.units {width: 640px;}
.container .eight.units {width: 730px;}
#overflow_bg {width: 879px;}
}

@media only screen and (max-width: 989px) and (min-width: 768px) {
*fill in from 2 css files same as above  and below but different widths
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.container .seven.units {width: 404px;}
.container .eight.units {width: 466px;}
#overflow_bg {width: 595px;}
#top #header .social_bookmarks {right: -195px;}
}
```
Put this code in the Quick Css located in back-end in Sentence Theme Options and Styling tab. put the first 1/3 of the code above so you are able to see what's going on, and tweak the values.

In the first one above, sidebar is being moved 40 or 50 pixels (just compare these numbers to the numbers currently in the website css file. and do the same to the two other resolutions above. At that point you will just to pay attention about introducing widgets without first seeing if they will fit into the re-sized sidebar or float down to the main content panel, and modify the css accordingly.

Good Luck,

Nick
Posted 9 months ago #