• Resolved Sjeng

    (@sjeng)


    I’ve installed WP3, with the new TwentyTen 3.0.1 theme. I’ve changed some small things in the style.css (things I’m not afraid to touch).
    https://www.harmoniestmichael.nl/wordpress/

    Now, I’d like to make the posts look more separated, either by:
    – making the post titles in light letters in a black bar
    – adding separation lines between posts
    – adding slightly darker boxes around posts

    I’d like to know how to change all 3 options, so I can see what I like best.
    Any help is most welcome! Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Sjeng

    (@sjeng)

    There must be someone who can help me out?

    No.1

    This style deals with the post heading (in the style.css).

    #content .entry-title {
    	color: #000;
    	font-size: 21px;
    	line-height: 1.3em;
    	font-weight: bold;
    	margin-bottom: 0;
    }

    Change the color, give it a black background (or whatever you want).

    No.2

    After this line in loop.php, is one place you could put a seperator for posts.

    </div><!-- #post-## -->

    Example.

    </div><!-- #post-## -->
    <hr />

    No.3

    Needs further clarification please.

    Thread Starter Sjeng

    (@sjeng)

    Thanks for the reply!
    @nr.1: so I can simply add
    background: #000;
    and change color: #000 to #fff for example? I’ll try that out!
    edit: I also needed to change the a:link/visited/active/hover, but it works!
    One thing though: the text in the black border is now very close to the left edge of the border. Can I change this, so that the topic text is slightly to the right, or otherwise make the border a bit wider to the left (to aligh with the top menu?)

    @nr.2: very clear thanks!

    @nr.3: Wat I mean is to add a box around each post, with a different color background than the main body. That way the posts are visually separated more clearly. But I don’t know if this theme can do that, so I’ll try the title thing first ??

    Each post is in an individual element already, you could just style that element.

    Your posts all sit inside a main element called content, eg..

    <div id="content">
    
    POST
    
    POST
    
    POST
    
    </div>

    Each post is wrapped in it’s own element with various classes, eg.

    <div id="content">
    
         <div class="post">
              A POST
         </div>
    
         <div class="post">
              A POST
         </div>
    
         <div class="post">
              A POST
         </div>
    
    </div>

    Apply some styling to the post class and see if that’s what you’re after.

    Eg.

    .post {
       // YOUR CSS
    }

    Thread Starter Sjeng

    (@sjeng)

    Man, I need to learn CSS code =.=
    I kinda understand what’s in there, to some extent, but coding myself is way beyond me.
    Thanks for your reply though, it does help a lot ??

    @Nr2: the HR doesn’t show up on the main page, only on individual post pages (and I don’t need em there ?? )

    @Nr2: the HR doesn’t show up on the main page, only on individual post pages (and I don’t need em there ?? )

    Depends where you place it, there’s a few places in the loop file where it can go. If this is a front page or home page there may be a different file it needs to go into, else the loop.php should be correct.

    Thread Starter Sjeng

    (@sjeng)

    Thanks for the replies.
    I’ve decided to use a different theme based on 2010, called 2010 Weaver, which gives you additional options, including HR’s beneath the post titles. It all looks much better now ??

    Resolved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making posts separated more clearly in TwentyTen1.0.3’ is closed to new replies.