Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to highlight a button on a category page
Tagged: buttons
- This topic has 14 replies, 2 voices, and was last updated 9 years, 11 months ago by Charles Specht.
-
AuthorPosts
-
May 20, 2014 at 1:24 pm #106060Charles SpechtMember
My website is CharlesSpecht.com and I'm using the eleven40 theme with version 2.1.
I created some new buttons which I labeled "category." I have the hover set-up but I would like to create something similar to a "current-menu-item" so that when someone clicks on that button, it will remain the color I assign to it. I don't know what code I would use for that, however.
Can anyone help? Below is what I'm currently using for these buttons.
a.button-category {
background: #272625;
border-bottom: 3px solid #00bebe;
color: #ffffff;
font-family: Lato, Oswald, sans-serif;
font-size: 11px;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1px;
letter-spacing: 1px;
margin: 2px 2px 2px 2px;
padding: 18px 10px 18px 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0px 0px #ffffff;
text-shadow: 0 0px 0px #ffffff !important;
text-transform: normal;
width: 125px;
}a.button-category:hover {
background: #00bebe;
border-bottom: 3px solid #00bebe;
color: #ffffff;
text-shadow: 0 0px 0px #ffffff !important;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0px 0px #ffffff;
}
Charles Specht
http://www.CharlesSpecht.comMay 20, 2014 at 5:18 pm #106096nutsandboltsMemberTry
a.button-category:active
- that should change the behavior of the button when someone is actually on the page the button link points to.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 21, 2014 at 10:37 am #106174Charles SpechtMemberAndrea, I tried that a few times yesterday and it didn't work. Any other ideas?
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 11:39 am #106355Charles SpechtMemberThe
a.button-category:active
code is in my css.I have the color white for "hover" and the color yellow for "active." However, the yellow is still not showing on the "active" link.
However......I notice that when I click on the link, the text turns yellow for a split second.
Any idea what might be causing the problem?
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 2:21 pm #106374nutsandboltsMemberHmm, I'm pondering on this one. Since it's not a nav menu, there's no active class assigned to each item. Have you considered using secondary nav instead of a text widget and styling the menu items just like the buttons?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 22, 2014 at 3:09 pm #106390Charles SpechtMemberFor some reason the Secondary Nav menu isn't showing up, even though I assigned pages to it. Any idea why?
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 3:12 pm #106391nutsandboltsMemberI'm not sure. By default, eleven40 moves both the primary and secondary nav after the header, but I'm seeing your header right area as primary nav. I'm guessing you've made quite a number of customizations (obviously) so it's hard to say. Have you checked your functions.php to be sure the secondary nav isn't being removed?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 22, 2014 at 3:18 pm #106393Charles SpechtMemberWhat would I look for to see if it is being removed in the functions.php?
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 3:25 pm #106394nutsandboltsMemberCan you paste your whole functions.php in a post here? I'll look through it.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 22, 2014 at 3:39 pm #106405Charles SpechtMemberI tried pasting it but it won't go through on this post. Do you want me to create a new one?
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 3:40 pm #106406Charles SpechtMember<?php //* Start the engine include_once( get_template_directory() . '/lib/init.php' ); //* Set Localization (do not remove) load_child_theme_textdomain( 'eleven40', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'eleven40' ) ); //* Child theme (do not remove) define( 'CHILD_THEME_NAME', __( 'eleven40 Pro Theme', 'eleven40' ) ); define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/eleven40/' ); define( 'CHILD_THEME_VERSION', '2.1' ); //* Add HTML5 markup structure add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) ); //* Add viewport meta tag for mobile browsers add_theme_support( 'genesis-responsive-viewport' ); //* Enqueue scripts and styles add_action( 'wp_enqueue_scripts', 'eleven40_enqueue_scripts_styles' ); function eleven40_enqueue_scripts_styles() { wp_enqueue_script( 'eleven40-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'dashicons' ); wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Lato:100,300,400,700,900|Oswald:300,400,700|Righteous:400', array(), PARENT_THEME_VERSION ); } //* Add new featured image size add_image_size( 'grid-featured', 270, 100, TRUE ); //* Add support for custom header add_theme_support( 'custom-header', array( 'width' => 320, 'height' => 65, 'header-selector' => '.site-header .title-area', 'header-text' => false ) ); //* Add support for structural wraps add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'site-inner', 'footer-widgets', 'footer' ) ); //* Hook after post widget after the entry content add_action( 'genesis_after_entry', 'eleven40_after_entry', 5 ); function eleven40_after_entry() { if ( is_singular( 'post' ) ) genesis_widget_area( 'after-entry', array( 'before' => '<div class="after-entry widget-area">', 'after' => '</div>', ) ); } //* Add support for additional color styles add_theme_support( 'genesis-style-selector', array( 'eleven40-pro-blue' => __( 'eleven40 Pro Blue', 'eleven40' ), 'eleven40-pro-green' => __( 'eleven40 Pro Green', 'eleven40' ), 'eleven40-pro-red' => __( 'eleven40 Pro Red', 'eleven40' ) ) ); //* Reposition the site description remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); add_action( 'genesis_before_content_sidebar_wrap', 'genesis_seo_site_description' ); //* Unregister the header right widget area unregister_sidebar( 'header-right' ); //* Remove breadcrumb and navigation meta boxes add_action( 'genesis_theme_settings_metaboxes', 'eleven40_remove_genesis_metaboxes' ); function eleven40_remove_genesis_metaboxes( $_genesis_theme_settings_pagehook ) { remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' ); } //* Reposition the primary navigation menu remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_header', 'genesis_do_nav', 12 ); //* Reposition the secondary navigation menu remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_footer', 'genesis_do_subnav', 12 ); //* Remove output of primary navigation right extras remove_filter( 'genesis_nav_items', 'genesis_nav_right', 10, 2 ); remove_filter( 'wp_nav_menu_items', 'genesis_nav_right', 10, 2 ); //* Reduce the secondary navigation menu to one level depth add_filter( 'wp_nav_menu_args', 'eleven40_secondary_menu_args' ); function eleven40_secondary_menu_args( $args ){ if( 'secondary' != $args['theme_location'] ) return $args; $args['depth'] = 1; return $args; } //* Remove comment form allowed tags add_filter( 'comment_form_defaults', 'eleven40_remove_comment_form_allowed_tags' ); function eleven40_remove_comment_form_allowed_tags( $defaults ) { $defaults['comment_notes_after'] = ''; return $defaults; } //* Modify the size of the Gravatar in the author box add_filter( 'genesis_author_box_gravatar_size', 'eleven40_author_box_gravatar' ); function eleven40_author_box_gravatar( $size ) { return 128; } //* Modify the size of the Gravatar in the entry comments add_filter( 'genesis_comment_list_args', 'eleven40_comments_gravatar' ); function eleven40_comments_gravatar( $args ) { $args['avatar_size'] = 96; return $args; } //* Add support for 3-column footer widgets add_theme_support( 'genesis-footer-widgets', 3 ); //* Register widget areas genesis_register_sidebar( array( 'id' => 'after-entry', 'name' => __( 'After Entry', 'eleven40' ), 'description' => __( 'This is the after entry widget area.', 'eleven40' ), ) ); /** Customize the credits */ add_filter('genesis_footer_creds_text', 'custom_footer_creds_text'); function custom_footer_creds_text($creds) { $creds = 'Copyright © 2013 · All rights reserved · <a href="http://www.charlesspecht.com/copyright/">Copyright</a> · <a href="http://www.charlesspecht.com/disclosure-of-material-connection/">Disclosures</a> · <a href="http://www.charlesspecht.com/privacy-policy/">Privacy</a> · <a href="http://www.charlesspecht.com/sitemap/">Sitemap</a> · <a href="http://www.charlesspecht.com/sitemap.xml">Sitemap XML</a> · Handcrafted by <a href="http://www.charlesspecht.com/wordpress-website-design/">Me</a>'; return $creds; } //* Customize the post info function add_filter( 'genesis_post_info', 'sp_post_info_filter' ); function sp_post_info_filter($post_info) { if ( !is_page() ) { $post_info = 'By [post_author_posts_link] [post_comments]'; return $post_info; }} //* Modify the Genesis content limit read more link add_filter( 'get_the_content_more_link', 'sp_read_more_link' ); function sp_read_more_link() { return '... <a class="more-link" href="' . get_permalink() . '">Continue</a>'; } //* Customize search form input box text add_filter( 'genesis_search_text', 'sp_search_text' ); function sp_search_text( $text ) { return esc_attr( 'Search my website ...' ); } //* Register widget areas genesis_register_sidebar( array( 'id' => 'before-header', 'name' => __( 'Before Header', '$text_domain' ), 'description' => __( 'Before Header Widget Area Site Wide', '$text_domain' ), ) ); add_action( 'genesis_before_header', 'add_widget_before_header', 5 ); function add_widget_before_header() { if( is_active_sidebar('before-header') ) { genesis_widget_area( 'before-header', array( 'before' => '<div class="before-header" class="widget-area">', 'after' => '</div>', ) ); }} genesis_register_sidebar( array( 'id' => 'newsletter', 'name' => __( 'Newsletter', 'child theme' ), 'description' => __( 'This is the newsletter section.', 'child theme' ), ) ); add_action( 'genesis_after_entry_content', 'custom_add_newsletter_box', 15 ); function custom_add_newsletter_box() { if ( is_singular( 'post' ) ) genesis_widget_area( 'newsletter', array( 'before' => '<div id="newsletter">', ) ); } //* Register widget areas genesis_register_sidebar( array( 'id' => 'home-featured', 'name' => __( 'Home Featured', '$text_domain' ), 'description' => __( 'Home Featured Widget First Page Only', '$text_domain' ), ) ); //* Hook Home Featured Widget First Page Only add_action( 'genesis_before_loop', 'front_page_featured_widget' ); function front_page_featured_widget() { if( is_front_page() && !is_paged() && is_active_sidebar('home-featured') ) { genesis_widget_area( 'home-featured', array( 'before' => '<div class="home-featured" class="widget-area">', 'after' => '</div>', ) ); } } /** Add additional style to site header */ add_filter('genesis_seo_title', 'cd_site_title', 10, 3); function cd_site_title($title) { $title = '<h1 id="title"><a href="http://www.charlesspecht.com" title="Charles Specht"><span class="charles">Charles</span>Specht</a></h1>'; return $title; } genesis_register_sidebar( array( 'id' => 'after-header', 'name' => __( 'After Header', 'genesis' ), 'description' => __( 'Custom Widget Area', 'childtheme' ), ) ); add_action( 'genesis_after_header', 'add_genesis_widget_area' ); function add_genesis_widget_area() { genesis_widget_area( 'after-header', array( 'before' => '<div class="after-header widget-area">', 'after' => '</div>', ) ); }
Charles Specht
http://www.CharlesSpecht.comMay 22, 2014 at 3:42 pm #106409nutsandboltsMemberIt's moving the secondary nav to the footer. Find and remove this:
//* Reposition the secondary navigation menu remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_footer', 'genesis_do_subnav', 12 );
and it should display in the normal spot.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 22, 2014 at 3:59 pm #106412Charles SpechtMemberMay 22, 2014 at 4:13 pm #106415Charles SpechtMemberMay 23, 2014 at 6:35 am #106401Charles SpechtMemberHere it is. Thanks!
<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );//* Set Localization (do not remove)
load_child_theme_textdomain( 'eleven40', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'eleven40' ) );//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', __( 'eleven40 Pro Theme', 'eleven40' ) );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/eleven40/' );
define( 'CHILD_THEME_VERSION', '2.1' );//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'eleven40_enqueue_scripts_styles' );
function eleven40_enqueue_scripts_styles() {wp_enqueue_script( 'eleven40-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Lato:100,300,400,700,900|Oswald:300,400,700|Righteous:400', array(), PARENT_THEME_VERSION );}
//* Add new featured image size
add_image_size( 'grid-featured', 270, 100, TRUE );//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 320,
'height' => 65,
'header-selector' => '.site-header .title-area',
'header-text' => false
) );//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'nav',
'subnav',
'site-inner',
'footer-widgets',
'footer'
) );//* Hook after post widget after the entry content
add_action( 'genesis_after_entry', 'eleven40_after_entry', 5 );
function eleven40_after_entry() {if ( is_singular( 'post' ) )
genesis_widget_area( 'after-entry', array(
'before' => '<div class="after-entry widget-area">',
'after' => '</div>',
) );}
//* Add support for additional color styles
add_theme_support( 'genesis-style-selector', array(
'eleven40-pro-blue' => __( 'eleven40 Pro Blue', 'eleven40' ),
'eleven40-pro-green' => __( 'eleven40 Pro Green', 'eleven40' ),
'eleven40-pro-red' => __( 'eleven40 Pro Red', 'eleven40' )
) );//* Reposition the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
add_action( 'genesis_before_content_sidebar_wrap', 'genesis_seo_site_description' );//* Unregister the header right widget area
unregister_sidebar( 'header-right' );//* Remove breadcrumb and navigation meta boxes
add_action( 'genesis_theme_settings_metaboxes', 'eleven40_remove_genesis_metaboxes' );
function eleven40_remove_genesis_metaboxes( $_genesis_theme_settings_pagehook ) {remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' );
}
//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 12 );//* Remove output of primary navigation right extras
remove_filter( 'genesis_nav_items', 'genesis_nav_right', 10, 2 );
remove_filter( 'wp_nav_menu_items', 'genesis_nav_right', 10, 2 );//* Reduce the secondary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'eleven40_secondary_menu_args' );
function eleven40_secondary_menu_args( $args ){if( 'secondary' != $args['theme_location'] )
return $args;$args['depth'] = 1;
return $args;}
//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'eleven40_remove_comment_form_allowed_tags' );
function eleven40_remove_comment_form_allowed_tags( $defaults ) {$defaults['comment_notes_after'] = '';
return $defaults;}
//* Modify the size of the Gravatar in the author box
add_filter( 'genesis_author_box_gravatar_size', 'eleven40_author_box_gravatar' );
function eleven40_author_box_gravatar( $size ) {return 128;
}
//* Modify the size of the Gravatar in the entry comments
add_filter( 'genesis_comment_list_args', 'eleven40_comments_gravatar' );
function eleven40_comments_gravatar( $args ) {$args['avatar_size'] = 96;
return $args;
}
//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );//* Register widget areas
genesis_register_sidebar( array(
'id' => 'after-entry',
'name' => __( 'After Entry', 'eleven40' ),
'description' => __( 'This is the after entry widget area.', 'eleven40' ),
) );/** Customize the credits */
add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text($creds) {
$creds = 'Copyright © 2013 · All rights reserved · Copyright · Disclosures · Privacy · Sitemap · Sitemap XML · Handcrafted by Me';
return $creds;
}//* Customize the post info function
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
if ( !is_page() ) {
$post_info = 'By [post_author_posts_link] [post_comments]';
return $post_info;
}}//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'sp_read_more_link' );
function sp_read_more_link() {
return '... Continue';
}//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
return esc_attr( 'Search my website ...' );
}//* Register widget areas
genesis_register_sidebar( array(
'id' => 'before-header',
'name' => __( 'Before Header', '$text_domain' ),
'description' => __( 'Before Header Widget Area Site Wide', '$text_domain' ),
) );
add_action( 'genesis_before_header', 'add_widget_before_header', 5 );
function add_widget_before_header() {
if( is_active_sidebar('before-header') ) {
genesis_widget_area( 'before-header', array(
'before' => '<div class="before-header" class="widget-area">',
'after' => '</div>',
) );
}}genesis_register_sidebar( array(
'id' => 'newsletter',
'name' => __( 'Newsletter', 'child theme' ),
'description' => __( 'This is the newsletter section.', 'child theme' ),
) );
add_action( 'genesis_after_entry_content', 'custom_add_newsletter_box', 15 );
function custom_add_newsletter_box() {
if ( is_singular( 'post' ) )
genesis_widget_area( 'newsletter', array(
'before' => '<div id="newsletter">',
) );
}//* Register widget areas
genesis_register_sidebar( array(
'id' => 'home-featured',
'name' => __( 'Home Featured', '$text_domain' ),
'description' => __( 'Home Featured Widget First Page Only', '$text_domain' ),
) );
//* Hook Home Featured Widget First Page Only
add_action( 'genesis_before_loop', 'front_page_featured_widget' );function front_page_featured_widget() {
if( is_front_page() && !is_paged() && is_active_sidebar('home-featured') ) {
genesis_widget_area( 'home-featured', array(
'before' => '<div class="home-featured" class="widget-area">',
'after' => '</div>',
) );
}
}/** Add additional style to site header */
add_filter('genesis_seo_title', 'cd_site_title', 10, 3);
function cd_site_title($title) {
$title = '<h1 id="title"><span class="charles">Charles</span>Specht</h1>';
return $title;
}genesis_register_sidebar( array(
'id' => 'after-header',
'name' => __( 'After Header', 'genesis' ),
'description' => __( 'Custom Widget Area', 'childtheme' ),
) );add_action( 'genesis_after_header', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
genesis_widget_area( 'after-header', array(
'before' => '<div class="after-header widget-area">',
'after' => '</div>',
) );}
Charles Specht
http://www.CharlesSpecht.com -
AuthorPosts
- The topic ‘How to highlight a button on a category page’ is closed to new replies.