WordPress.org

Forums

Quark
[resolved] Styling Category Links on Posts (3 posts)

  1. dbryanmusic
    Member
    Posted 1 year ago #

    Hello,

    I would like to style each category link in the header meta differently - ie yellow on hover for the category Music and pink on hover for the category Festivals.

    I think I've narrowed it down to the theme-functions here:

    // Translators: 1: Date 2: Author 3: Categories 4: Comments
    		printf( wp_kses( __( '<div class="header-meta">%1$s%2$s<span class="post-categories">%3$s</span>%4$s</div>', 'quark' ), array(
    			'div' => array (
    				'class' => array() ),
    			'span' => array(
    				'class' => array() ) ) ),
    			$date,
    			$author,
    			$categories_list,
    			( is_search() ? '' : $comments )
    		);

    And that I somehow need to add this to the wrapping the category link:

    class="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>"

    But I can't quite figure out how to do it. Am I on the right track? How can I style the category links on a post page differently?

  2. Anthony Hortin
    Member
    Theme Author

    Posted 1 year ago #

    You could use CSS Attribute Selectors to do this. For example, if you had Categories 'Music' and 'Festivals', you could use the following css to change the hover colour for those particular Categories

    .post-categories a[title*="Music"]:hover {
        background-color: #eaff00;
    }
    .post-categories a[title*="Festivals"]:hover {
        background-color: #ea00ff;
    }
  3. dbryanmusic
    Member
    Posted 1 year ago #

    So simple, thank you.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic