How Do I Change Sidebar Widths and Fonts?

[Dan Nickerson]

In the current version of Socrates we don't have an option to control the sidebar widths or optional sidebar fonts.

However, you can manually control them by editing a file via FTP or your webhost's file manager.

Locate this folder.

/public_html/wp-content/themes/socrates/css/

Find the sidebar style that you are using.

If split sidebar it would be StyleBothSides.css and the code will look like this..

@charset "utf-8";

/* CSS Document */


/* ------------------------------------- Content -------------------------------------------------------------- */


.im-sidebar { position:relative; padding:0px 20px; width:140px; float:left;border-right:0px double #e2e2e2; height:100%; margin-bottom:5px; font-size:80%;}
.im-sidebar2 { position:relative; padding:0px -6px 5px 11px; float:right; width:200px;}
.im-mainContent { padding:0px 10px 0px 10px; border-left:3px double #e2e2e2; border-right:3px double #e2e2e2; width:563px; position:relative; float:left;}

#socratescontainer {padding-left:140px; padding-right:200px; position:relative;}

.im-sidebar ul { width:140px; list-style:none; left:-12px; position:relative; overflow:hidden;}
.im-sidebar2 ul { width:185px; list-style:none; left:-12px; position:relative}
.sidebar li { margin:0px 0px 10px;}
.im-sidebar li li { position:relative; margin:1px 0px 2px 10px;}
.im-sidebar2 li li { position:relative; margin:1px 0px 2px 20px;}

Adjust the bolded fields as needed.

We will work on making these optional in Version 3.0

[glennf]

What values do you use for the bold fields (i.e. how do you calculate them?)

If I'm using the 150px left sidebar do I change styleLeftSide150.css?

You forgot to tell about changing the font size.

[Dan Nickerson]

I used the split sidebar as an example, a similar change would apply to the left only sidebar.


And I bolded the font size red to emphasize where to change the font in the example

As far as values, you increase them to suit your needs. If you want to change 160 to 180, you just replace the 160 with 180.

If you want to slightly increase the font size you can change it from 70%, to 80,90 or even 100%

Here's the left css

@charset "utf-8";
/* CSS Document */


/* ------------------------------------- Content -------------------------------------------------------------- */
.im-mainContent { padding:0px 10px 0px 10px; border-left:3px double #e2e2e2; width:772px; float:right; left:-5px; }
.im-sidebar { padding:0px 5px 5px 15px; float:left; width:160px; border-right:3px double #e2e2e2; height:100%; margin-bottom:5px; font-size:70%}
.im-sidebar2 { display:none;}

.sidebar ul { width:140px; list-style:none; left:-12px; position:relative; overflow:hidden;}
.sidebar li { margin:0px 0px 10px;}
.sidebar li li { position:relative; list-style:circle; margin:0px 0px 0px 30px;}

[glennf]

.sidebar ul { width:140px; list-style:none; left:-12px; position:relative; overflow:hidden;}

What value do you use here for width?

[lynnth]

For the width of lists within the sidebar, 20 less than the width of the sidebar is a good starting point. You can then tweak from there if you are not happy with the look.

[planetsurf]

Hi Guys

I have just bought SocratesTheme and installed on a new domain, things worked fine, but the website come with "pages" "archives" and "categories" already installed in the widgets. When I go into the widget area in admin, I can place the widget I would like to have on y site. But there are shown below the body on the site.

Any idea how to work around this?

Best regards

David

[planetsurf]

Sorry, forgot the url

http://www.cheapdigitalslr.org/

[lynnth]

Place the widgets you want into the primary sidebar. The default ones will go away ones you but them in. If they are showing up in the bottom widget areas, they are just in the wrong place.

[planetsurf]

Hi Lynn

Thanks, that worked great for the left widget, but what about the right, how do I change that?

Best Regards

David

[planetsurf]

Don't worry I got it, just placed in the "optional sidebar"

Thanks for your fast response!

David