Entry Meta CSS

[Porter]

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

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tom]

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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Porter]

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.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tom]

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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts