WordPress.com

1. leeartsandsciences
   Member
   Sep 17, 2007, 8:41 PM

   I'm currently using the Ocean Mist theme. I'm fairly used to how CSS works, and am having very little trouble editing certain things about the blog to suit what I want it to look like. One thing I'm concerned about changing though is the post header/timestamps. I'm just wondering if anyone knows if I can alter either the column layout of that small section (seeing as I don't have access to the files themselves, just the CSS) or if there's a CSS workaround that I might use to remove that portion altogether and re-create it how I would rather it be. currently it's:

   |POST TITLE posted by:name Date| with what appears to be two columns, one row.

   I would rather it be:

   |POST TITLE |
   |posted by:name Date | with two rows, one column.

   Or something of that nature. If anyone has ever worked with this specific theme before, or if by chance you may know a bit more than I do, I would love any help. And thanks a lot for any help given, it's very much appreciated.

2. devblog
   Member
   Sep 18, 2007, 4:52 AM

   Try this:

   Find the .title class selector, add the following property to its definition:

   position: relative;

   Now, find the .title small selector, and replace its current definition with the following:

   position: absolute; bottom: 1px; left: 24px; color: #67939B; display: block;

   So it now should read like this:

   .title small {position: absolute; bottom: 1px; left: 24px; color: #67939B; display: block;}

   That will move the 'posted by' and 'date' below the title.

   Before making any changes, always make a backup of your code.

   HTH.

3. leeartsandsciences
   Member
   Sep 19, 2007, 6:06 PM

   Hmm, I did it and for some reason now it's throwing the 'posted by' and 'date' information at the bottom of the blog. So I'm guessing the absolute position is catching and pulling it down to the bottom of the entire page, and not the cell that the .title is in. I'll keep going through these variables though, to see if I can get it to float just below the .title line. As of right now, the CSS looks like this:

   .title h2 {
   position:relative;
   font:1.05em Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   padding:9px 24px 12px;
   }
   
   .title small {
   position:absolute;
   bottom:1px;
   left:24px;
   color:#67939B;
   display:block;
   }

4. leeartsandsciences
   Member
   Sep 19, 2007, 6:21 PM

   Wow, I see what I did there. I didn't alter the .title class selector, I edited .title h2 instead! I went through and fixed it, and it works perfectly.

   Thanks again so very much!

Topic Closed

This topic has been closed to new replies.