WordPress.org

Ready to get started?Download WordPress

Forums

how to reduce width wp 2011 theme? (20 posts)

  1. meg345
    Member
    Posted 2 years ago #

    The blog site I've just installed in wordpress 2011 theme is too wide. How can I make the content width 800 px?

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    don't edit the twenty eleven theme directly - create a child theme http://codex.wordpress.org/Child_Themes and make the edits there.
    it is important to have an unedited default theme in the wordpress installation; also, a child theme wil avoid that your customisations get overwritten with the next upgrade.

    in style.css of the child theme, add someting like (depends on what you define to be the 'content width'):

    #page { max-width: 800px; }

  3. meg345
    Member
    Posted 2 years ago #

    Thanks for such a speedy reply! I'll try it.

  4. Magyver NFL
    Member
    Posted 2 years ago #

    alchymyth, I found the instructions for adding child themes, they are almost scary, and would take hours for a newbie to accomplish.

    I do understand that an update will overwrite a theme change, but it could just be changed back again like the first time.

    Answer me this, I was considering widening my 3.2.1 to 1100 Px,, and I found the CSS line you spoke of. It looks like a 3 minute change.

    How, or why could I justify spending hours of work installing a child theme when the fix takes 3 minutes?

    What am I missing? Yes, if I had 20 banners installed at 1100 px, and had changed the padding & width of the sidebar to use bigger sidebar images, the site would look terrible after an update until the width was increased again.

    But wouldn't it look fine again after I went back in & did the width & margins changes again?

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    about child theme:

    this shouldn't be too complicated - @esmi has prepared a child theme for twenty eleven for download:
    http://wordpress.org/support/topic/twentyeleven-child-theme-does-not-load-properly?replies=12#post-2339473

  6. meg345
    Member
    Posted 2 years ago #

    alchymyth

    Thanks for your suggestion.

    I've created a child theme and entered the style.css information from the download. Then I added the line: #page { max-width: 800px; } but there's been no change in the width of the blog.

    Is there anything else I should be doing?

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    difficult to tell without seeing your site.

    what is the size/width of your browser window?

    have you cleared the browser cache by pressing 'CTRL F5' ?

    can you post a link to your site?

  8. meg345
    Member
    Posted 2 years ago #

    http://myraestelle.com/Site_2/blog

    I did clear the browser cache. The rest of my website is 800px wide. I want the blog to match in width.

    Thanks

  9. fonglh
    Member
    Posted 2 years ago #

    How, or why could I justify spending hours of work installing a child theme when the fix takes 3 minutes?

    This is inaccurate. How long does it take you to copy the following code into a new file and put it into a new folder?

    /*
    Theme Name: Twentyeleven Child
    Description: Child theme for the twentyeleven theme
    Author: Your name here
    Template: twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    
    #site-title a {
        color: #009900;
    }

    Doing this once is certainly easier than finding all the changes you've made and reapplying them every time the theme is updated.

  10. Magyver NFL
    Member
    Posted 2 years ago #

    fonglh, the code you just posted is completely without context to me. I have no idea what it is, what it means, what it does, or where it goes.

    It is quite late now, but 2morow I will find the link to the page that I was given a while back by an expert here to explain how to properly install and use a child theme.

    I will post the link here to prove that I was shown a WP.org instructional thread about adding child themes that boggled my brain.

    Good lord, I was just about to make a statement, and for some reason clicked on your name first to see who you were. What I saw at your site verified and justified my suspicion.

    I was going to say that:

    you seem to remind me of a techie so smart that he could not write a functional owners manual for the invention he had created.

    The reason was that the man could no longer remember when he couldn't understand things; he thought light-years beyond an ordinary man's comprehension.

    What I just said is completely honest. I may have left LSU with a 3.89 average after 3 years, but it was not in scripting.

    You are years of study beyond my comprehension level; I could not utilize the coding you wrote about on your site in a year's time if my life depended upon it.

    I am merely a layout and design artist and sportswriter.

    You see, the hours of time I referred to was not the 5 minutes it would take you to copy & paste whatever that is wherever it goes, it's the hours of time it would take me to labor to understand it, slowly & timidly to try it, make several mistakes along the way, and redo it perhaps twice.

    I know you were trying to help, thanks. I'll save the link here, go check out esmi's post, look at your code, and try to figure it all out when I'm not behind in my writing. (if that day ever comes)

  11. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @meg345

    I've created a child theme and entered the style.css information from the download. Then I added the line: #page { max-width: 800px; } but there's been no change in the width of the blog.

    at the moment, the twenty eleven is still the active theme; go to dashboard -> apearance -> themes and active your child theme.

    this should also then change the width of your blog (provided the css is right).

  12. meg345
    Member
    Posted 2 years ago #

    Thanks alchymyth

    The child theme causes the whole page background to be narrower but the image is still the same size and now sits at the left side of the page. This is what I installed.
    /*
    Theme Name: Myra Estelle
    Version: 1.0
    Theme URI:
    Description: Twenty Eleven child theme for Myra Estelle
    Author: Myra Gordon
    Author URI: http://myraestelle.com
    Template: twentyeleven
    License:
    License URI:
    */

    #page { max-width: 800px; }

  13. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the child theme is just not showing in the link to the blog that you posted earlier.

    The child theme causes the whole page background to be narrower but the image is still the same size and now sits at the left side of the page.

    what is the url where you see this?

  14. meg345
    Member
    Posted 2 years ago #

    It's now at this site:
    http://myraestelle.com/Site_2/blog

  15. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    try and add the line to @import the stylesheet of the original theme:

    /*
    Theme Name: Myra Estelle
    Version: 1.0
    Theme URI:
    Description: Twenty Eleven child theme for Myra Estelle
    Author: Myra Gordon
    Author URI: http://myraestelle.com
    Template: twentyeleven
    License:
    License URI:
    */
    @import url(../twentyeleven/style.css);
    
    #page { max-width: 800px; }

    (my bad for not spotting this earlier in your posted code)

  16. meg345
    Member
    Posted 2 years ago #

    @alchymyth

    It worked! Thank you so much for your patient assistance. I really couldn't have done it without you.

  17. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    @Magyver NFL another child theme post is mine at http://vudu.me/child

    Maybe that's more your level? I'm no coder, I just google around until I find something I understand.

  18. fonglh
    Member
    Posted 2 years ago #

    @MagyverNFL

    The code in my post above is straight from the codex page on child themes. You can get the full context there. It's easier to do than it is to explain.

    If you look carefully, the lines between /* and */ are in plain English. The whole chunk is a description of the theme. Just follow the same format.

    The @import line gets the CSS code from the parent theme so you don't have to start from scratch. Everything below that is CSS code, the part you could already edit in 3 mins.

    I don't want others to read your post and get the wrong idea about the difficulty of creating child themes. They might decide not to even try and be worse off in the long term because they keep losing their changes. It LOOKS intimidating, but it's not. Have a go first.

    Yes you're right about my site. I never meant it to be a beginner's guide. I write the posts to remind me of what I did and where I looked to get something to work. It's to help remind me of the thought process that went behind getting a certain feature to work. It's a quick summary of the research I did to get a feature working. If that nudges someone else in the right direction, then that's great. It's not meant to teach, just to guide. So yes, technical knowledge is necessary.

  19. Jen Mylo
    Key Master
    Posted 2 years ago #

    @MagyverNFL: Watch the video of my talk at WCSF and you'll see how easy it is to create a child theme. I'd never made one before, and it only took a few minutes following the Codex directions. I walk through it step by step.

  20. Magyver NFL
    Member
    Posted 2 years ago #

    Thanks guys, girls, fonglh, Rev, Jane....

    fonglh, you'll notice in my "mini-rant" that gave you a round-about compliment on your coding knowledge as well as admitting my lack thereof. Frustration lends itself to grumbling, LOL...

    I'm slowly learning that the scary looking "arc-curve" layouts of integrated CSS scripting may not be as hard to do as it looks, like merely uploading a folder that integrates itself into the code structure, if that makes any sense.

    I plan to learn to make WP do tricks like a trained puppy, and will use what all 3 of you offer to help me do that, thanks a lot, truly.

    Magyver

Topic Closed

This topic has been closed to new replies.

About this Topic