WordPress.org

1. onethousandseas
   Member
   Posted 2 years ago #

   Hi, I'm editing a Sandbox theme right now. I'd like to have the sidebars at the bottom and the post date & time placed next to the entry on the left. Here's the code I have right now:

   body
   {
   text-align:center;
   }
   
   #maincss
   {
   margin: 0 auto;
   width:500px;
   text-align: left;
   }
   
   h3
   {
   font-size: 1em;
   }
   
   #header
   {
   padding-bottom:25px;
   }
   
   #breadcrumbcss
   {
   text-align: left;
   }
   
   #headerformscss
   {
   text-align: right;
   }
   
   #footer
   {
   padding-top:25px;
   padding-bottom:15px;
   clear:left;
   width:100%;
   }
   
   div.sidebar
   {
   float:left;
   overflow:hidden;
   width:50%;
   }

   How can I get the date and time lined up next to the title on the left?

   Thanks.

2. esmi
   Theme Diva & Mod
   Posted 2 years ago #

   Site url?

3. onethousandseas
   Member
   Posted 2 years ago #

   Right here: http://onethousandseas.org/

   I actually have some new code now, here's the new stylesheet:

   #header
   {
   text-align:center;
   }
   
   #footer
   {
   padding-top:25px;
   clear:both;
   padding-bottom:15px;
   font-size:0.8em;
   line-height:150%;
   text-align:center;
   }
   
   #everything_inside
   {
   width:800px;
   margin:0 auto;
   }
   #everything_inside p,h2,h3,h4,ol,ul,dd,pre
   {
   min-width:500px;
   margin-right:150px;
   margin-left:150px;
   }
   
   h3{font-size:1em;}
   
   .outleft
   {
   float:left;
   width:130px;
   text-align:right;
   }
   #post-<?php the_ID(); ?>,.entry
   {
   float:right;
   }
   
   .navigation{text-align:center;width:500px;margin:auto;padding:25px;}
   .alignleft {float:left;text-align:left;}
   .alignright {float:right;text-align:right;}
   
   .sidebar li {
      list-style: none;
   }
   
   div.sidebar {
   float:left;
   width:50%;
   }

   I have it pretty close to where I want it, just 2 layout problems:

   1. Getting the top of the title flush with the top of the date.

   2. I'm trying to have the sidebar under the blog in two columns, but I can't get it flush to the body of posts (not including dates). I also want to get rid of the weird formatting within the sidebar itself (I don't know why the calendar's popping out strangely).

   Any help would be much appreciated :-)

4. esmi
   Theme Diva & Mod
   Posted 2 years ago #

   Please don't post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone. In this case, the contents of your stylesheet are pretty much useless without being able to see the sheet in action on the site itself. So, most of the time, just the site url is needed.

   1. Add .post h2 {margin-top:0}

   2.
   

   #everything_inside {
   float:left;
   margin:0 auto;
   width:70%;
   }
   div.sidebar {
   width:30%;
   }

5. onethousandseas
   Member
   Posted 2 years ago #

   Here's the new code.

   But here's the result.

   Unfortunately the new .h2 margins didn't work I'm not sure why, but the sidebar got shifted up to the top. I wanted it to be at the bottom underneath the entries. I also wanted the entries and Previous/Next Entry to stay at a width of 500px and centered exactly (excluding the date) and had it calculated accordingly, so I'm not sure how I can change it but still keep it that way (I didn't think bottom sidebars would mess up the upper body).

   But can you think of another solution? Thanks for the suggestion.

6. onethousandseas
   Member
   Posted 2 years ago #

   Aha!

   h2 {margin-top:0}

   worked for the headings.

   Latest code here.

7. onethousandseas
   Member
   Posted 2 years ago #

   Actually it's probably easier if I pair code with screenshot:

   With the suggested code:

   code/screenshot

   With the old code:

   code/screenshot

   Ok that's the summary.

8. onethousandseas
   Member
   Posted 2 years ago #

   Figured it out, CSS: http://wordpress.pastebin.ca/1515459

   Inline style, index.php (as an example): http://wordpress.pastebin.ca/1515460 or it won't validate. Otherwise using post_id is ok for a div id.

   Basically it's:

   - Everything inside div
   -- Top div
   --- Entry div inside loop
   --- Date div inside loop
   -- Bottom div
   --- Sidebar 1 div
   --- Sidebar 2 div

   div.container {
   	overflow: hidden;
   	width: 100%;
   }
   
   div.left {
   	width: 49%;
   	float: left;
   }
   
   div.right {
   	width: 49%;
   	float: right;
   }

   (Or whatever desired width.)

Topic Closed

This topic has been closed to new replies.