Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS help please: color coding custom terms
Tagged: colorize, css, custom terms, Wintersong
- This topic has 4 replies, 2 voices, and was last updated 7 years, 4 months ago by Robert.
-
AuthorPosts
-
July 25, 2017 at 11:52 am #209569tatianaParticipant
Hi all,
Am at wit's end here. How do I go about customizing the archive title for custom terms?For example, on
http://tatianamoses.com/stories/girl-meets-world/, the category archive title is styled for a specific color (pink) for that specific category. The CSS is.category-girl-meets-world .archive-title {
color: #ec4e95;
}Same if you click on the Lucas/Riley tag
http://tatianamoses.com/relationships/lucas-and-riley/Archive title is styled how I want it.
.tag-lucas-and-riley .archive-title {
color: #32baba;
}
But for my custom term 'Summer Rain', under 'fiction'
http://tatianamoses.com/fiction/summer-rain/Although
.fiction-summer-rain .entry-terms a:link,
.fiction-summer-rain .entry-terms a:visited {
color: #79569b;
}works to color the meta term link how I want it, I am baffled as to how to target the archive title!
I've tried various configurations and combinations, but I have a feeling I'm missing something obvious. So. um. Help?
Don't know if it's needed, but I'm using the Wintersong Pro theme. Hope this is clear - I can do screenshots if need be. I've got pretty much everything else figured out except the Archive title (and how to change the post titles on the single page to match, but I figure once I understand one, I can get the other...)
http://tatianamoses.com/fiction/summer-rain/July 25, 2017 at 12:23 pm #209570RobertMemberHello
at line 842 in your CSS is your archive-title css.
.archive-title { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #4e5e96; }
change this code to change the archive title. You can also create a custom class as well to accomplish what you are looking for and use it to style a specific selector. Are you using "customize" in wordpress or editing it directly in the style sheet?
-Robert McMillin
RobertMcMillin.comJuly 25, 2017 at 12:35 pm #209571RobertMemberAlso, can add this code and that worked for me to change the archive title...
h1.archive-title { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #0036ff; }
obviously change the "color" to what color you want.
-Robert McMillin
RobertMcMillin.comJuly 25, 2017 at 12:44 pm #209573tatianaParticipantEditing directly in a separate style sheet that is referenced through functions
function custom_style_sheet() {
wp_enqueue_style( 'custom-styling', get_stylesheet_directory_uri() . '/category.css' );
}
add_action('wp_enqueue_scripts', 'custom_style_sheet');Makes it easier to do specific changes without scrolling through the entire main stylesheet to find what I want.
The color is just in place right now until I find another solution--otherwise it's just black. I'm trying to set it so that it changes depending on the link you click, like it changed to pink when you click on the 'Girl Meets World' link, and teal when you clicked the Lucas/Riley tag.
The problem I'm having is that I can't figure out what the custom class would be for my custom post terms in order to change the color of the archive title. Specifically,
.fiction-summer-rain .archive-title {
color: #79569b;
}Is not working to change the color.
Does that clarify things a bit?
July 25, 2017 at 2:29 pm #209576RobertMemberGotcha, are you able to make inline html style changes?
Quick and simple would be:
HTML Inline:
<h1 class="archive-title summer-rain">Summer Rain</h1>
CSS:
.summer-rain { color:red; }
you could obviously add the link styling yourself. Just tried it and it took care of changing that specific archive title color.
-Robert McMillin
RobertMcMillin.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.