Entry Meta CSS

This topic is: resolved

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Tom 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #119313

    Porter
    Member
    Post count: 217

    I’m using some hooks to remove post info and entry meta, and add them only to the end of my post. I’ve used the following in my functions.php to move them:

    //* Remove the entry meta in the entry footer (requires HTML5 theme support)
    remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
    add_action( 'genesis_after_entry_content', 'genesis_post_meta' );
    
    //* Move the post info to the bottom of the page.
    remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
    add_action( 'genesis_after_entry_content', 'genesis_post_info');

    They’re positioned correctly, at the end of the post, but I can’t figure out the CSS. Whenever I target entry-meta, certain css elements stick, while others are overwritten by the defaults, such as font size. The css classes being used are:

    p entry-meta

    I’m altering just entry-meta, like so:

    .entry-meta {
    	font-size: 14px;
    	text-align: right;
    }

    I added important after the font size, which did override that behavior, but I’m not sure that’s the proper way to go about it, I assume there’s a basic principle of CSS I’m missing (it’s my weak spot). How do I properly override all of the original aspects of the p entry-meta classes?

    anightinburlington.com/articles/test-article


    I gladly accept beer donations – payment@gemfruit.com

    #119321

    Tom
    Participant
    Post count: 940

    Hi @Porter:

    Your initial statement is at line 493 in a section called “# Structure and Layout”:

    .entry-meta {
        font-size: 14px !important;
        text-align: right;
    }

    There is another section called “## Entry Meta” with this code at line 1154:

    p.entry-meta {
    	font-size: 16px;
    	margin-bottom: 0;
    }

    The later, lower statement is considered to be more specific – it carries more ‘weight’. You’re trying to override this weightier statement with the earlier one. To make that work you have to use !important to overpower the later statement. That’s not considered good practice and should only be used where absolutely necessary. Chris Coyier’s CSS Tricks has great tips on stuff like this (and the comments sometimes have gold in them, too).

    For your case it would be best to delete the earlier statement and combine everything in one statement at line 1154:

    .entry-meta {
    	font-size: 14px;
    	margin-bottom: 0;
    	text-align: right;
    }

    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #119363

    Porter
    Member
    Post count: 217

    Thanks for the information, that cleared it up for me.

    The main thing that lead to further confusion, is a tutorial online told me I was looking for “post-info”, not “entry-meta”. Once I found out it was entry-meta, I forgot to search my style.css to see if that already existed, as I had done wiht post-info. The information on weight and use of important was helpful though, and confirmed what I believed to be true.


    I gladly accept beer donations – payment@gemfruit.com

    #119370

    Tom
    Participant
    Post count: 940

    It sounds like you’re not using the developer tools built into browsers – for example to find the correct CSS selector and code statement. They are key to finding and testing CSS errors and changes plus many other build and performance factors.

    Chrome: 
    
    https://developer.chrome.com/devtools
    
    Firefox:
    
    http://getfirebug.com/
    
    IE:
    
    http://msdn.microsoft.com/en-ca/library/ie/gg589507(v=vs.85).aspx

    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Entry Meta CSS’ is closed to new replies.