WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] how to make twenty eleven a little less elastic? (9 posts)

  1. Mark
    Member
    Posted 2 years ago #

    Hi folks. I'm hacking up twenty eleven to match a very different design and finding the elastic nature of it is working against me. I'm using a background image in #main to make #primary and #secondary look equal height in all cases but when the screen is pulled in the background moves. Where and how do I fix #main in one place so that it doesn't overlap my left side menu in #branding?

    http://urbaninteractive.us/client/urbaninteractive2011/

  2. Mark
    Member
    Posted 2 years ago #

    In addition the #secondary sidebar crashes into the branding when the screen is made much less wide. I need all elements to be fixed. I believe I just need some "position: absolute"'s in some places, but not sure where.

  3. Mark
    Member
    Posted 2 years ago #

    Seems like this...
    background: url("images/background_strip.png") repeat-y content-box;

    ... instead of this...
    background: url("images/background_strip.png") repeat-y fixed center;

    ... does the trick. Whatever content-box is...

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  5. Mark
    Member
    Posted 2 years ago #

    Hi esmi. I'm using a child theme, just didn't make that clear. Thanks for the reprimand, though.

  6. Mark
    Member
    Posted 2 years ago #

    Update in case anyone stumbles over here.

    Twenty Eleven has a whole section called Responsive Structure which does what it sounds like it should do, but works counter to fixed layouts. The issue is discussed here:

    http://wordpress.org/support/topic/theme-twenty-eleven-how-to-prevent-elements-moving-when-broswer-window

    By simply deleting the Responsive Structure section from the parent theme, all standard css properties work as expected, including no longer needing some kind of whacky background hack to connect the content to the footer. You lose a whole lot of smart degrading, I'm sure, but you regain the basics.

    And, yes, I guess I did just edit the main Twenty Eleven parent theme, which esmi just told me not to do, and which I hadn't done up until now, but it seems unavoidable.

    http://www.urbaninteractive.us

  7. And, yes, I guess I did just edit the main Twenty Eleven parent theme, which esmi just told me not to do, and which I hadn't done up until now, but it seems unavoidable.

    No, it really is avoidable and you'll potentially feel massive pain at the next upgrade for that theme...

    If you can't child theme it (CSS is the easiest part of any child theme) then make a complete copy of Twenty Eleven into a new directory with a unique name. Call the directory themes/twentyeleven-mark.

    Edit themes/twentyeleven-mark/style.css and change the Theme Name from Twenty Eleven to Twenty Eleven Mark's Theme.

    Activate Twenty Eleven Mark's Theme in the dashboard. Now at least when the theme is upgraded you will not lose your work.

  8. Mark
    Member
    Posted 2 years ago #

    Oy vey. I am already working with a child theme. Everyone should please read more carefully.

    I shouldn't have written "hacked twenty eleven" at the top, I guess.

  9. Sorry! My bad. I completely misunderstood when your last post on this thread here said "I guess I did just edit the main Twenty Eleven parent theme" :D

    But if you are using a child theme then all is well in the world and you are doing The Right Way™.

    That's cool.

Topic Closed

This topic has been closed to new replies.

About this Topic