• Resolved aprileriel

    (@aprileriel)


    Hello,

    In the text squares showing the title and first few lines of text of posts on the front page, can the background (and/or font) color be changed? I would prefer not to change the background color on the actual post, but if that’s the way to do it, I would give it a try.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi there,

    I saw from your other thread that you’re making some changes to birdieandthebeast.org and that you’re already set up with Jetpack’s CSS editor. Great! 🙂

    To change the background colour to the posts on your home page, add the following custom CSS to the editor:

    .posts .entry-inner, .too-short .link-more, .too-short .entry-inner-content:before, .too-short .link-more:before, .posts .entry-inner:after {
        background: #663399;
    }
    
    .posts .entry-inner-content {
        border-bottom: #663399;
    }

    Change the value of #663399 to any colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

    http://www.color-hex.com/

    If you’d like to take this further, you can change the colour of each post’s excerpt on your home page with the following:

    .posts .entry-content {
        color: #663399;
    }

    The title for each post would be changed with this snippet:

    .posts .entry-header {
        color: #663399;
    }

    Let me know how you get on with the above or if any extra questions come up.

    Thread Starter aprileriel

    (@aprileriel)

    It worked – thank you!

    Thread Starter aprileriel

    (@aprileriel)

    Actually I have one more question: How can I change the color of the “READ MORE” button?

    Or, is there something I can refer to that would show a list of CSS changes I could make, without having to come here and bug you with them?

    Thanks for your help!

    @aprileriel: You can make changes to the read more button using the following custom CSS:

    .link-more a {
        background-color: #e7ae01;
        color: #fff;
    }

    As before, change the values of background-color to change the button’s background and color to change the colour of the “read more” text.

    Hope that helps!

    For any extra questions, please create a separate thread on this forum. It’s easier for us to help and keep track of questions if they’re kept to separate threads.

    Thank you! 🙂

    Moderator Kathryn Presner

    (@zoonini)

    Or, is there something I can refer to that would show a list of CSS changes I could make, without having to come here and bug you with them?

    Learning how to target the right element in order to make CSS changes is a good skill to have! Here are some very helpful posts that will help you learn how to do that:

    https://thewc.co/articles/view/web-inspector-tutorial

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://cssworkshop.wordpress.com/

    Good luck in your CSS adventures and as Siobhan said, if you get stuck and need help in the future, feel free to start a new thread.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Front page color changes’ is closed to new replies.