WordPress.com

1. lidaalexopoulos
   Member
   Jul 15, 2011, 9:08 AM

   Hi,

   I'm looking to make (what I assume to be) a small change to the Twenty Eleven theme CSS for my blog site to make the 'one column, no sidebar' layout ~998px wide.

   So, I'm no expert with CSS at all and hopefully the answer is simple! I've managed to change the width of the content area, but in doing so I seem to have screwed up the navigation underneath the header image. The text is still there for the nav, but there is no longer a black background, so the text is white on white (until the mouse hovers over the text, anyway).

   The default CSS for the Twenty Eleven theme is here
   https://s-ssl.wordpress.com/wp-content/themes/pub/twentyeleven/style.css?m=1310494193g&minify=false

   I've changed the entry in the CSS as follows;
   /* One column */
   .one-column #page {
   max-width: 690px;
   to

   /* One column */
   .one-column #page {
   max-width: 998px;

   The screenshot of what this results in is here:
   http://lidaalexopoulos.files.wordpress.com/2011/07/lidablog_csspreview1.jpg

   So what I'm wondering is if there's a better place to change the width of the content area, or a second change to the CSS that I need to make to have the menu display as it does by default without the width change (as can be seen eg here: http://lidaalexopoulos.wordpress.com/)

   Thanks in advance for any assistance, would really appreciate some guidance with this!

   (Note that I haven't yet purchased the custom CSS upgrade, and know that I do need to do this for the changes to take effect, but I can see the changes I'm trying to make on preview - have attached screeny of what I'm seeing.)

   The blog I need help with is lidaalexopoulos.wordpress.com.

2. thesacredpath
   Member
   Jul 15, 2011, 9:19 AM

   Did you by chance paste the entire stylesheet into the CSS edit window? This messes things up at wordpress.COM. What you want to do is to put only the specific selectors, and the specific declarations that you are adding or changing into the CSS edit window and then make sure the add to existing button is checked.

3. lidaalexopoulos
   Member
   Jul 15, 2011, 9:27 AM

   Oh! I did do that. Doing what you suggest has fixed things up perfectly.

   Thanks thesacredpath, you rock!

   I was sure I'd tried that initially, but must have forgotten to change the radio button to 'add this to..'. Silly me.

4. thesacredpath
   Member
   Jul 15, 2011, 9:28 AM

   This is all you have to do to change the width of twenty eleven to 998px as you have your site configured.

   .one-column #page {
   max-width: 998px;
   min-width: 998px;
   }`

5. thesacredpath
   Member
   Jul 15, 2011, 9:30 AM

   You are welcome, and in case someone comes to this thread later, here is the code I placed above (I had missed an opening tag to show it as code).

   .one-column #page {
   max-width: 998px;
   min-width: 998px;
   }

6. ringling9
   Member
   Jul 21, 2011, 3:20 PM

   I don't wanna rob this thread, but how would I change the width of the content and sidebar in Digg 3, it mentions nothing about width in the code.

Topic Closed

This topic has been closed to new replies.