WordPress.org

Forums

Coraline
[resolved] Adding static text to post page. (15 posts)

  1. Nessan Cleary
    Member
    Posted 1 year ago #

    Hi,
    I need some help to add static text to a post page. The blog in question is nessancleary.co.uk, which uses the Coraline theme, though I think the problem and solution will apply to any theme.
    The front page is configured to show the latest posts and I’d like to add a line above the first post to say ‘Latest news stories’.
    I believe that this is best done by editing the Index php. However, I have two issues. Firstly, I’m not familiar with HTML and I don’t know what code to actually type in, or exactly where to put it, though I'm quite happy to have a go.
    Secondly, there is a Sticky post that keeps the main story at the top of the posts page. But I’d like to add this static text below the Sticky so that it applies to the standard posts and not the Sticky. (The purpose of the text is to draw attention to the standard posts, which are mostly updated everyday, while the Sticky is generally only changed every week to ten days.)
    I’d really appreciate any suggestions.
    Thanks,
    Nessan

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    You can actually do it using CSS. I see you're using JetPack, so activate JetPack's Custom CSS option, then go to Appearance > Edit CSS and add these two rules:

    .sticky {
       border-bottom: 0;
       margin-bottom: 0;
    }
    
    body.home .sticky::after {
       content: "Latest News Stories";
       border-top: 1px solid #000;
       display:block;
       margin-top: 30px;
       padding-top: 20px;
       font-size: 25px;
       font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    }

    The first rule removes the bottom border from the sticky post (otherwise the Latest News Stories would appear above the line). The rule also eliminates some of the spacing between the sticky and the other posts. But don't worry, because that will be restored in the second rule.

    The second rule adds a "pseudo element" after the sticky. The properties in that rule are:

    • content - What you want the element to display.
    • border-top - Adds the separating line that was removed by the first rule.
    • display - How the element should be displayed. block is the correct value here, so it will go all the way across the width of the container.
    • margin-top - The amount of spacing between the line separator (the top border) and the sticky post above it.
    • padding-top - The amount of spacing between the line separator (top border) and the Latest News Stories content.
    • font-size - How big the lettering is supposed to appear.
    • font-family - The "style" of the font that you want.

    Play around with any of the values to get the look that you want.

  3. Nessan Cleary
    Member
    Posted 1 year ago #

    CrouchingBruin,
    Thanks very much for coming back to me so quickly. I'll give that a go and let you know how I get on.
    Nessan

  4. Nessan Cleary
    Member
    Posted 1 year ago #

    CrouchingBruin,
    I've tried the rules that you suggested - thanks very much for taking the time to explain what the different elements meant as that has helped me to better understand the concept.
    The first rule that you suggested worked as you had explained and removed the bottom line from the sticky.
    But I couldn't get the second rule to work. I tried a few variations and also tried it on its own without the first rule, but nothing worked (though I have read a fair bit on pseudo elements, which was quite an interesting concept).
    Is there another element that I should add in, or is it more likely that I've not followed your instructions properly?
    Thanks for your help,
    Nessan

  5. CrouchingBruin
    Member
    Posted 1 year ago #

    Should have worked. Can you add the CSS back in temporarily so I can take a look?

  6. Nessan Cleary
    Member
    Posted 1 year ago #

    OK - I've done that. It's taken out the bottom line from the sticky, and closed up the gap with the next post, but not added in the static text.
    Nessan

  7. CrouchingBruin
    Member
    Posted 1 year ago #

    OK, I see the problem. Did you copy the code from the e-mail notification that you got, or did you copy the code from the above post? You should copy & paste the code directly from the above post, because your e-mail client substituted the quote mark characters with escape codes.

  8. Nessan Cleary
    Member
    Posted 1 year ago #

    Ah, yes - that's worked. Thanks very much for all your help.
    Nessan

  9. CrouchingBruin
    Member
    Posted 1 year ago #

    Great. You may want to add the font-weight property to the second rule as well, so that it matches your other headings:

    body.home .sticky::after{
       content: "LATEST NEWS";
       border-top: 1px solid #000;
       display: block;
       margin-top: 30px;
       padding-top: 20px;
       font-size: 15px;
       font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
       font-weight: bold;
    }
  10. Nessan Cleary
    Member
    Posted 1 year ago #

    Thanks for all your help. Is there a line that I can add to change the font colour - I'd like to make it a deeper black to match the other headings.
    Nessan

  11. CrouchingBruin
    Member
    Posted 1 year ago #

    Add the color property to the second rule for font colour:

    color: #000;

    #000 is black, which is the color of the other titles. The first digit in the value is the amount of red, the second digit is the amount of green, and the last digit is the amount of blue. 000 means no color (black), while FFF (white) is the highest intensity for all colors. The digits range from 0-9, then A-F (hexadecimal, or "hex" values), with A=10, B=11, ... F=15.

    Note that the property name is color and not colour; I saw where one theme developer had used colour in their style sheet & couldn't figure out why it wasn't working.

  12. Nessan Cleary
    Member
    Posted 1 year ago #

    That's sorted it!
    Thanks again for all your help, and for such clear explanations.
    Nessan

  13. wendywhite
    Member
    Posted 10 months ago #

    Ok, this is awesome and it ALMOST works perfectly for me-but-I do not have a pinned post like the original questioner. I just want to add the text to the top of my blog page (which is not my home page).
    I tried the following (because I don't know CSS), but this puts the text at the top of every post instead of just the whole page. I know it must be a matter of just the right couple of words-but I don't know them. My blog is: http://wendytellsall.com/blog. HELP!

    body.blog .post::before {
    content: "'This is absolutely perfect, true, beautifully written, and poignant. I'm obsessed.'";
    border-bottom: 1px solid #000;
    display: block;
    margin-bottom: 40px;
    padding-bottom: 25px;
    font-size: 21px;
    font-family: "Droid Serif";
    font-style: italic;
    text-align: center;
    }

  14. CrouchingBruin
    Member
    Posted 10 months ago #

    Hi, Wendy. When you say at the the top of the page, exactly where? I'm sure you don't want it above your menu. Why don't you try changing the selector so it looks like this:

    body.blog main::before

    This will put it just above the main section of the blog page, above the posts.

  15. wendywhite
    Member
    Posted 10 months ago #

    Holy crap! That is so much better than I was even trying for. You are the man!!!!! THANK YOU!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.