Support » Themes and Templates » [Theme: Twenty Eleven]

  • Hello,

    I am trying to duplicate an old Joomla site into a WordPress site. To do this, I must have the possibility to give the right and left sidebar a background image.

    The most important one is the left one, which is under the widgets. When I assign a color to the #secondary part of the css, I only get the “Widget-area” covered with a background. I would like to have this on the entire width of the sidebar and the entire height of the sidebar.

    url: http://new.breedveldtrading.com

    What I am trying to duplicate is http://www.breedveldtrading.com

    How could I accomplish this? Thanks in advance.

    Kind regards,

    Luc

Viewing 4 replies - 1 through 4 (of 4 total)
  • First of all, you should not be modifying the theme’s files directly. If the theme ever gets updated (because of security patches, feature enhancements, or bug fixes), your changes will be lost. The suggested method of making changes to a theme are either through plugins, or by creating a child theme. If you are just making changes to the CSS, then I like the Custom CSS Manager plugin. With an older theme like Twenty Eleven, you might not think that it wouldn’t get updated anymore, but the latest update was this past April, so there’s still a good chance that the theme will be updated again.

    You might want to consider using a Flexbox model instead of floats, it will make moving the sidebar around much easier. You can read more about the Flexbox model here and here. Try adding this CSS, either in a child theme style.css file, or through a plugin:

    /* This rule moves the list bullets inside the sidebar */
    div#secondary ul {
       list-style-position: inside;
    }
    
    /* Set up flex box */
    #main {
       display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
       display: -moz-box;      /* OLD: Firefox (buggy) */
       display: -ms-flexbox;   /* MID: IE 10 */
       display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
       display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
    }
    
    .left-sidebar #secondary {
       box-sizing: border-box;  /* Makes it easier to adjust width */
       width: 287px;            /* width from old site */
       padding: 20px;
       margin: 0;
    }
    
    /* Change the order of the elements in the #main container so the sidebar comes first */
    .left-sidebar #secondary {
       -prefix-box-ordinal-group: 1; /* old spec; must be positive */
       -ms-flex-order: 1; /* IE 10 syntax */
       order: 1; /* new syntax */
    }
    
    .left-sidebar #primary {
       -prefix-box-ordinal-group: 2; /* old spec; must be positive */
       -ms-flex-order: 2; /* IE 10 syntax */
       order: 2; /* new syntax */
    
       /* Set the width to fit the rest of the container */
       -prefix-box-flex: 1; /* old spec webkit, moz */
       flex: 1;
    }
    
    /* Set a media query that changes the flow of the elements in a column
    instead of a row, and change the order of the sidebar so it
    will come after the main content on smaller screen widths */
    @media (max-width: 800px) {
    
       /* Make elements flow in a column */
       #main {
          flex-direction: column;
       }
    
       /* Change order of sidebar so it follows main content */
       .left-sidebar #secondary {
          -prefix-box-ordinal-group: 3; /* old spec; must be positive */
          -ms-flex-order: 3; /* IE 10 syntax */
          order: 3; /* new syntax */
       }
    
       .left-sidebar #primary,
       #main #secondary {
          margin:0;
       }
    }

    The above rules sets the sidebar to the width from the original site, so it lines up better with the gold bar in the header. The flexbox model will expand the sidebar to fill in the height, and set the width of the main content to fill in the rest of the container space. Hopefully there are enough comments in the CSS that you can understand what is happening.

    Oops, I left out additional browser-specific properties for box sizing. The above rule for .left-sidebar #secondary should be this instead:

    .left-sidebar #secondary {
       box-sizing: border-box;  /* Makes it easier to adjust width */
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       o-box-sizing: border-box;
       width: 287px;            /* width from old site */
       padding: 20px;
       margin: 0;
    }

    Thread Starter bersch

    (@bersch)

    Hi CrouchingBruin,

    It works absolutely brilliant, just what I meant! Thank you so much for this.

    Is there anything possible for creating this at the right side as well? So it lines with the light brown part at the right and so I could give this a background as well?

    Thanks you so much!

    Kind regards,

    Luc

    Try adding this to the end of your custom CSS:

    /* Set background color of main container to same brown color as right bar in header */
    #main {
      background-color: #f6efe5;
    }
    
    .left-sidebar #primary {
       /* Reset the padding & margin to something easier to work with */
       box-sizing: border-box;
       padding: 0 50px;
       margin: 0;
       /* Set background to white */
       background-color: #fff;
       /* Have to turn off flex sizing for now, because we
       want a fixed width */
       -prefix-box-flex: none; /* old spec webkit, moz */
       flex: none;
       /* set the width to be a fixed size:
       1000px max page size - 287 for the left sidebar - 63 for the bar = 650px */
       width: 650px;
    }
    
    /* Reset margin & padding for #content. Padding for text was set above in rule for #primary instead */
    .left-sidebar #content {
      margin: 0;
      padding: 0;
      width: auto;
    }
    /* Hide right sidebar on screen widths narrower than 1024px by making
    the width of the primary area fit the entire width of the container */
    @media (max-width: 1024px) {
      .left-sidebar #primary {
        width: auto;
       -prefix-box-flex: 1; /* old spec webkit, moz */
       flex: 1;
      }
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Twenty Eleven]’ is closed to new replies.