Styling Category Links on Posts

  • Resolved dbryanmusic

    (@dbryanmusic)


    12 years, 3 months 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?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    12 years, 3 months 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;
}
    Thread Starter dbryanmusic

    (@dbryanmusic)

    12 years, 3 months ago

    So simple, thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling Category Links on Posts’ is closed to new replies.