WordPress.org

1. djweaver
   Member
   Posted 4 years ago #
   

   I'm trying to modify the main css for this theme.

   In version 1.0 the left and right sub side bars were 160 px wide.
   In version 2.0 the left and right sub side bars are 130 px wide.

   I've figured out how to increase the size of the sub sidebars and the main sidebar but when I do the sidebar goes to the bottom of the posts. I'm no css expert. If anyone can help it would be appreciated.

2. ClaytonJames
   Member
   Posted 4 years ago #
   

   I'm only guessing, but if you increased the width of two sidebars by 30px each, you may want to start by decreasing the size of the main content container by 60px and increasing the main sidebar by the same amount. (Boy, does that sound oversimplified!)

   It sounds like you have that last part covered.

   "I've figured out how to increase the size of the sub sidebars and the main sidebar..."

   #content { width:540px; float:left; padding:14px 15px 20px 22px; display:block; overflow:hidden; }
   #sidebar { float:right; width:340px; padding:0px 3px 0px 0px; }
   #l_sidebar, #r_sidebar { float:left; display:block; width:160px; margin:0px; padding:0px 0px 0px 10px; }

   ...that's strictly a wild guess. And I think maybe a bad one as well. If you try it, back up the style sheet first just in case.

3. djweaver
   Member
   Posted 4 years ago #
   

   Thanks Clayton. I don't really want to shrink the main content container. Therein lies the rub. I did the side bar thing as you've suggested.

   And I've also been working on it and came up with

   #container { width:1000px; text-align:left; margin:0 auto; padding:0px 10px; border:0px solid black; clear:both; overflow:hidden; height:100%; }
   .container-top { clear:both; height:17px; width:1020px; display:block; margin:12px auto 0 auto; }
   .container-bottom { clear:both; height:17px; width:1020px; display:block; margin:0px auto; }
   
   #content { width:600px; float:left; padding:14px 15px 20px 22px; display:block; overflow:hidden; }
   #sidebar { float:right; width:340px; padding:0px 3px 0px 0px; }
   #l_sidebar, #r_sidebar { float:left; display:block; width:160px;  margin:0px; padding:0px 0px 0px 10px; }
   
   #footer { padding:10px 0px 20px 0px; text-align:center; height:25px; clear:both; font-size:11px; }
   #footer-wrap { width:1010px; margin:0px auto; }

   The graphics are off of course I'll have to make a new set, but it may work. If anyone else has a solution more than willing to hear it, cause this css is beyond me, and graphics work ain't my cup of tea.

Topic Closed

This topic has been closed to new replies.