WordPress.com

1. scrapedcrusaders
   Member
   Aug 3, 2012, 2:14 PM

   Hello,

   Newb in every sense of the word.

   I'm using the Yoko theme. I'm am trying to make the homepage display the posts in the same fashion they are displayed on individual post display. If that makes any sense?

   http://scrapedcrusaders.com/
   The posts are not all the way to the left margin. And have the date, author justified to the left.

   http://scrapedcrusaders.com/2012/08/01/daily-scraped-396/
   While here, the image is justified to the left margin, with the date author on top of the image.

   How do I go about incorporating the second format into my homepage?

   I currently do not have purchased the "custome design" option. I assume I will have to, do get the look I want?

   Cheers and think you for your patience,
   Gillbert

   The blog I need help with is scrapedcrusaders.com.

2. thesacredpath
   Member
   Aug 3, 2012, 7:38 PM

   This is problematic to do. If the post title happens to go two lines, it would overwrite the post metadata. On the single post page, the metadata is in a parent div with the post title so the metadata will shift down if the post title goes to two or three lines. On the main page, the post metadata isn't in the same parent as the title.

3. scrapedcrusaders
   Member
   Aug 3, 2012, 8:20 PM

   Hmmm, I'll just try to keep all of my titles to one line. It should not be a problem.

   I'd still rather have it look this way, regardless of problems.

   I would have to be done is CSS though, correct?

4. thesacredpath
   Member
   Aug 3, 2012, 8:34 PM

   This is the best it can get. The three lines in the metadata have line breaks in the HTML which cannot be taken out, so they will have to be stacked as you see them. Add this to your CSS and see what you think.

   .entry-content {
       margin-top: 70px;
   }
   #content {
       position: relative;
   }
   #content .entry-details {
       position: absolute;
       width: 100%;
       margin-top: 30px;
   }
   #content .entry-header, #content .entry-content {
       width: 100%;
   }

5. designsimply
   Staff
   Aug 28, 2012, 4:54 PM

   Here's one more alternative. It keeps the date and byline above the title on the homepage so you wouldn't have to worry about title length:

   #content .entry-details,
   #content .entry-header,
   #content .entry-content {
   	width: 100%;
   }
   
   #content .entry-details p {
   	padding-bottom: 0;
   }
   
   .group-blog #content .entry-details p span.byline {
   	display: inline;
   }
   
   .group-blog #content .entry-details p span.byline:after {
   	content: " | ";
   }
   
   .entry-details br {
   	display: none;
   }

Topic Closed

This topic has been closed to new replies.