Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do I make this Div class effect only posts?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #179244
    iizag
    Participant

    Hi How do I make this div class : <div class="entry-byline"> Work only on my posts?

    The entry-byline is the posts date and author name right under the main article title

    A random post I have so you can see the example: http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/

    I don’t want the entry-byline CSS I used on the posts to effect the archive page, which it does right now because the author name and post date are reflected as super tiny , which you can see here: http://iamdentistry.com/category/archive/dentistry/

    This is the CSS div for the entry-byline I am using as of now:

    .entry-byline {
        color: #333;
        font-size: 0.425em;
        font-weight: 400;
        padding-bottom: 20px;
        text-transform: uppercase;
    }

    I have tried to do this but I cant figure it out, any help would be great. Thank You.

    #179245
    Senff
    Participant

    The one thing that all posts have, is a class “singular-post” in the BODY.

    So, if you want the .entry-byline styles to only apply on posts, this is all you need to use:

    body.singular-post .entry-byline {
        color: #333;
        font-size: 0.425em;
        font-weight: 400;
        padding-bottom: 20px;
        text-transform: uppercase;
    }

    These styles will be ignored on every other page that is doesn’t have class ‘singular-post’, so it won’t apply to pages, or archives, etc. It’ll still appear, just not styled.

    If you want to remove it from all pages except posts, then you could do something like this:

    .entry-byline {
        color: #333;
        font-size: 0.425em;
        font-weight: 400;
        padding-bottom: 20px;
        text-transform: uppercase;
        display:none;
    }
    
    body.singular-post .entry-byline {
        display:block;
    }
    #179271
    Alen
    Participant

    what does adding display block do differently in your 2nd example

    It’s the inverse of the display:none, it just makes the element visible.

    #179274
    Soren
    Participant

    Line 282 of your code

    /* Submit button etc Before etc  Css widget */
    
    .mymail-wrapper .submit-button {
        background-color: #82b440;
        border: medium none;
        border-radius: 3px;
        box-shadow: 0 2px 0 #6f9a37;
        color: #ffffff;
        display: inline-block;
        font-size: 13px;
        margin-top: 10px;
        padding: 5px 10px 6px;
        text-align: left;
        text-shadow: 0 0 0 rgba(0, 0, 0, 0), 1px 1px 0 rgba(0, 0, 0, 0.1);
        transition: border-color 0s ease 0s, all 0.3s ease 0s;
    }
    

    Have you tried adding

    .mymail-wrapper .submit-button:hover {
      background-color: #7aa93c;
    }
    #179289
    Soren
    Participant

    You have a few style sheets styling the button. Maybe this has something to do with it:

    themes/fearless-child/style.css
    
    /* COLORS of Header tags etc in template */
    
    .button:hover {
        color: #182945 !important;
    }

    ?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.