Need help? Check out our Support site, then


Change Background Color of Sticky Post in Coraline Theme?

  1. I would like to change the default background color of a sticky post I am putting on a static homepage from white to yellow. How do I do that?

    The blog I need help with is myhcaa.com.

  2. This would be the rule that defines the design for sticky posts on the main posts page.

    .sticky {
    background: none repeat scroll 0 0 #FFF9C0;
    border-bottom: 1px solid #D9D4A3;
    border-top: 3px solid #D9D4A3;
    padding: 1.7em;
    }
  3. I am really new at this, so I really appreciate your quick reply. Would I change the "background: none" part of the CSS to "background: yellow" or would I need to use the web characters for the color yellow?

    Also, can you direct me to where I should put this information? Am I correct in assuming that I need to edit the CSS itself?

    Many thanks as I work through this.

  4. Yes, you can use "background: yellow;" and then if that yellow isn't to your liking you can look to the web for hexadecimal color code charts and pick one more to your liking.

    At wordpress.com you don't actually edit the existing CSS. You create rules to overwrite the existing CSS (your custom CSS would be loaded after the original CSS).

    Go to appearance > custom design > CSS, delete the informational text from the edit window and then paste the above in and edit as desired. If you run into problems, just let us know and we can help out.

  5. I believe I followed your very clear instructions correctly, but I still am not seeing a colored background (yellow) for the sticky post. Perhaps I am doing something else wrong as well, as the sticky post does not stay on the static front page if I navigate away from it and then return. I thought that the sticky post would stay in place until it was replaced with another post. Is this not the case?

    Thanks much for your continued help!

  6. Sticky posts will not appear on a static page and there is no way to force that. They only appear on the main posts page that shows all of your posts.

    If you want some highlighted information on a static page then you would have to use inline CSS in that page to style that block of text. If you put that block of text up on your static front page we can help you style that and give you the code.

  7. Thank you for clarifying with regard to the sticky post process. I have added a block of text to homepage of the myhcaa.com site (HCAA News Flash), which is what I would like to have highlighted with a yellow background. I will be adding additional text in new paragraphs as well, but I would like that text to keep the default white background. Is this possible?

  8. Give this a try and see what you think.

    .home .entry-content {
    background: yellow;
    padding: 10px;
    }
  9. Worked very well!!! Thank you for the code! One additional question, now that I am close to having things in place the way I would like them to be. Is it possible to limit the yellow background color to a certain number of lines of text so that the entire column is not yellow? I would like to limit the yellow background to only the first paragraph of text, and leave the rest of the background white. Perhaps this could be done by using a text box, but I don't see anyplace to insert one on a page.

  10. You can do that instead using inline style in a paragraph tag such as below:

    <p style="background: yellow; padding: 10px;">All the paragraph text here</p>

    Remove the CSS I gave above from the CSS edit window.

  11. Totally perfect! Thank you so much for all your help in getting me where I wanted to be!

  12. You are welcome.

  13. Hi there,

    I'm hoping to piggy-back on this thread with a further sticky-post question:

    Is there a way to change the size of the sticky-post box? So that it is much smaller than the default? Also, is there a way to remove the lines that say "Comments turned off" and the Category that it is posted in?

    Basically, I just want to have a small box with some text in it that stays at the top of the main page, and I thought using a sticky post would work. I bought the "custom" upgrade but am having trouble navigating the css process. I am familiar with basic html.

    The blog I am working on is http://oncearoundtheroom.wordpress.com

    Thank you!

  14. thesacredpath
    Staff

    The size of the box is determined largely by the content (and padding).

    This gets rid of the comments off and category stuff, which shortens it up some.

    .sticky .entry-meta {
    display: none;
    }

    This shortens it up some more and reduces the top and side padding:

    .sticky {
    padding: 1em 1.2em 0;
    }

    This reduces the space between the title and the body content.

    .sticky .entry-content {
    margin-top: 0;
    }

    See what you think with the above changes.

  15. Thanks for your quick response! I'll give it a try!

  16. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic