WordPress.org

1. original J
   Member
   Posted 4 months ago #

   Hi,

   I just need a little help as I'm a html dunce.

   This is my site http://inthekan.net/

   I'm using the Twenty Eleven theme and would really like to make a vertical line break/division between the body(post) area and the sidebar. There's a horizontal one dividing the body from the footer and something like that would be just find.

   On another but similar note, I would also like to vertical line breaks that divide the footer widgets in addition to making the widths of the widgets equal.

   Now I'm not certain if this is a possibility but it would be grand if I could separate the theme elements (being the footer, sidebar, and widgets) entirely from the body area like this http://collider.com/
   If it can't be done then the line breaks are just fine.

   Thanks in advance for the help, and apologies for the laundry list of queries.

   Joel

2. vtxyzzy
   Member
   Posted 4 months ago #

   This is as close as I could come with CSS alone. Add these lines to the end of style.css:

   /* Border bottom for each article */
   .hentry, .no-results {
      border-bottom: 4px solid green;
   }
   
   /* Extra right-side padding to move text away from border */
   .entry-content, .entry-summary {
      padding-right: 0.2em;
   }
   
   /* Border between articles and sidebar */
   #content {
      border-right: 4px solid green;
   }
   
   /* Border at top of widgets in footer */
   #supplementary {
      padding-top: 0; border-top: 4px solid green;
   }
   
   /* Narrower widgets to allow for border */
   #supplementary.two .widget-area {
      width: 47%;
   }
   
   /* Border between widgets in footer */
   #first {
      border-right: 4px solid green;
   }

3. original J
   Member
   Posted 4 months ago #

   Thanks vtxyzzy, that was some 1st class advice,

   I took out some of the lines that I wasn't using but I have one more question - is there a way that I can move the sidebar line more to the right so it doesn't join up with the lines separating the posts?

   Thanks again!

4. vtxyzzy
   Member
   Posted 4 months ago #

   I think you just need to add some padding to #content:

   #content {
       border-right: 1px solid #DDDDDD;
       padding-right: 10px;
   }

Reply

You must log in to post.