Need help? Check out our Support site, then


Front Page CSS Customization

  1. Hello, I am using the forever theme and i would like to know if there's a snippet to fix a little question i have. I want to put a background to the featured images section on the front page using the code below. It works but the problem i have is that the background code also shows up once it takes you to the content article. Is there a snippet to make that background appear on the featured images posts but not on the actual article?

    .hentry {
    background-color: #f8f8f8;
    border-radius: 10px;
    }

    The blog I need help with is vlogazul.com.

  2. Hi, in the opening body selector in the HTML on your main page, you will find a list of body classes, one of them being "home". You can precede .hentry with .home and limit the change only to the home page like this:

    .home .hentry {
    background-color: #f8f8f8;
    border-radius: 10px;
    }

    Each page type (home, blog, category, archive, tag, static page and single post page) will have a similar list of body classes that can be used for various things, such as making customizations to only one page or page type.

  3. The code you gave me works great only on the main page but once you go to other categories featured images the background doesn't show up! Is there a snippet to make all the featured images summaries have the background the same as the front page but without showing up in the article posts? If you can see the main page has the background on the featured images but for instance if you click on the Noticias category on the menu bar the featured images are blank. Thanks

  4. Ok, I was thinking you wanted it only on the main page. To have it on all pages and posts as well, change the selector from this
    .home .hentry

    To this
    .home .hentry, .archive .hentry

    That will get you the background on tag, category and archive pages.

  5. It worked perfectly thanks.

    Is there a snippet for the following: In the summaries of my featured images you will see the text alignment being justified with the "Nota Completa" link being next to it. Is there a snippet to make the "Nota Completa" link always aligned to the right the same as the justify alignment? So that the summary text ends right before the link and all of the text looks aligned using the justify. Thanks

  6. Give this a shot, but make sure and click around to other pages and such to make sure it doesn't "blow up" somewhere else. It should be fine though.

    .more-link {
        float: right;
    }
  7. The snippet seems to be working pretty good with the link being on the right hand side at all times, the only thing is that I would like for the summary text to be just before the Nota Completa link, is there a snippet for that?

  8. The text in the summaries are already set to "justified" in your custom CSS, and I don't know of anyway to get the bottom line to justify and fill the entire line.

  9. I was able to figure it out using the excerpt feature! Would there be a snippet to make all of the summary text in the featured image content be more to the bottom so that it can be centered with the picture from top to bottom. Thanks

  10. How "centered" the text can be vertically depends on the length of the excerpt. Currently on your main page, the first entry has two lines while the second and third has 3 lines, so that makes it difficult to center things. Give the following a try which sort of splits the difference. You can play with the top margin value or perhaps add to the first excerpt so it goes to three lines. The following covers both the home page and the archives pages (category, tag and archive).

    .home .entry-content p, .archive .entry-content p {
        margin-top: 15px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags