• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

CSS help please: color coding custom terms

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS help please: color coding custom terms

This topic is: not resolved

Tagged: colorize, css, custom terms, Wintersong

  • This topic has 4 replies, 2 voices, and was last updated 7 years, 10 months ago by Robert.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 25, 2017 at 11:52 am #209569
    tatiana
    Participant

    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 #209570
    Robert
    Member

    Hello

    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.com

    July 25, 2017 at 12:35 pm #209571
    Robert
    Member

    Also, 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.com

    July 25, 2017 at 12:44 pm #209573
    tatiana
    Participant

    Editing 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 #209576
    Robert
    Member

    Gotcha, 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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble