Forums

Using Default Theme - Drop Cap (First Letter Big) (6 posts)

  1. mellojoe
    Member
    Posted 2 years ago #

    I'm re-teaching myself CSS and I used to have a trick when writing paragraphs where I would define `:first-letter' elements so that the first paragraph of my article would show as a drop case.

    I don't know enough about how the style sheets integrate into the Blog Posts to know how to edit this feature in.

    How do I edit the style of the CONTENT inside each post?

  2. JamesICT
    Member
    Posted 2 years ago #

    Not automated but you could add something like the following to your CSS [with colours, different backgrounds and whatever else if you so desire]

    .big {font-size:24px;}

    and then you just drop in a

    <span class="big">First letter</span>

    in the appropriate place in your post content.

  3. mellojoe
    Member
    Posted 2 years ago #

    So, you mean that for each Post I write, I should just code it in separately?

    Not have it automatically part of the page?

  4. JamesICT
    Member
    Posted 2 years ago #

  5. mellojoe
    Member
    Posted 2 years ago #

    Ah, I went for the simple approach. I plugged the styles into the CSS file, and then am just using the <span> tags to make it happen.

    It works, and it allows a little bit of control (say if I have two thoughts for one post), and I'm a bit of a control freak, anyway.

    Thanks.

  6. tracerhand
    Member
    Posted 2 years ago #

    hi, mellojoe.

    if you're still reading this, there's a way to do it without putting in a span.

    in the template i use, this works:

    div.entry-content p:first-child:first-letter {
    float:left;
    font-size:5em;
    margin-right:.06em;
    line-height:90%;
    }

    each post is enclosed in a div which has an "entry-content" class. what this css does is say "find the first paragrah tag and apply this style to the first letter in it." that way you don't end up with the first letter of every paragraph for that post.

    you'd think you could just apply first-letter directly to the div, but you can't. i'm not sure why.

    this works in safari, firefox and i believe IE7 but not IE6.

Topic Closed

This topic has been closed to new replies.

About this Topic