Change color of inactive text in menus

PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
edited October 31, 2015 in SmugMug Customization
A need some help changing the text color of the inactive pages of my main menu. I have two menus. But when I'm on the sub menu I don't want the parent link to the sub menu to change. I've attached a sample pic of what I want it to look like.

http://www.mattedesignphotos.com/People

Thanks for any help you can offer.
http://www.mattedesignphotos.com/

Comments

  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 15, 2015
    Change color of inactive text in menus
    A need some help changing the text color of the inactive pages of my main menu. I have two menus. But when I'm on the sub menu I don't want the parent link to the sub menu to change. I've attached a sample pic of what I want it to look like.

    http://www.mattedesignphotos.com/People

    Thanks for any help.
    http://www.mattedesignphotos.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 15, 2015
    Try this:
    		/* Active */	
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a, a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-item .sm-page-widget-nav-activepage > a {
	color: red;
	}		
	
	/* Inactive */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after {
	color: gray;
	}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 17, 2015
    Thank you Mike for your reply. I tried inserting the entire code into the "Entire Site" CSS but it didn't work. Actually, only the active pages worked. I also inserted the /* Inactive*/ into one of the "Just This Page" but that didn't work either. I'm probably doing something wrong.
    http://www.mattedesignphotos.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 17, 2015
    PhotoMatt wrote: »
    Thank you Mike for your reply. I tried inserting the entire code into the "Entire Site" CSS but it didn't work. Actually, only the active pages worked. I also inserted the /* Inactive*/ into one of the "Just This Page" but that didn't work either. I'm probably doing something wrong.

    It could be that you are using a different theme that I'm using. While I wanted the current directory/folder/gallery to be the same color, this is working on my site...
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-item .sm-page-widget-nav-activepage > a {
    color: #8c714f;
    }

    It might be easier to see your site when you change over to the new Smugmug.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 17, 2015
    Thank you Mike,

    The code works to change the active pages but the inactive pages remain grey. The code below is what I originally had to change the active pages to red...

    /* Change text color of active page */
    .sm-page-widget-nav-activepage > a {
    color: #a50100 !important;
    }
    .sm-page-widget-nav-activepage > a:hover {
    color: #a50100 !important;
    } (edited)

    And this works. But I don't know how to get the top menu text color for inactive pages lighter with out changing the dark grey on the bottom menu or the parent active link. I'm probably doing a horrible job at explaining. I hope the image below can explain it a bit better. The "Before" is how the site looks now. The "After" is what I want it to look like. The bottom menu appears once I click People. The dark grey is the site wide grey I don't want to change. The red is the active link and only the top menu non active pages are light grey. I basically want to distinguish the top and bottom menus from each other.
    http://www.mattedesignphotos.com/
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 17, 2015
    If those are two individual menu widgets each have a unique widget class name.
    sm-page-widget-xxxxxxxx
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 17, 2015
    Ok, the widget ID for the top menu is 12222444. What code should i use to target the inactive pages?
    http://www.mattedesignphotos.com/
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 17, 2015
    PhotoMatt wrote: »
    Ok, the widget ID for the top menu is 12222444. What code should i use to target the inactive pages?
    You'd precede the rule with this to make it specific for that widget.

    .sm-page-widget-12222444 ....
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 18, 2015
    Sorry I don't understand.. Like this?

    /* Change text color of active page */
    .sm-page-widget-12222444 > a {
    color: #a50100 !important;
    }
    .sm-page-widget-12222444 > a:hover {
    color: #a50100 !important;
    } (edited)
    http://www.mattedesignphotos.com/
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 18, 2015
    Like this 
    /* Change text color of active page */
.sm-page-widget-12222444 .sm-page-widget-nav-activepage > a {
color: #a50100 !important;
}
.sm-page-widget-12222444 .sm-page-widget-nav-activepage > a:hover {
color: #a50100 !important;
}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited September 18, 2015
    Thank you Allen, but it didn't work. I tried using the code on the site wide css and page only css. The inactive pages of the top menu remained dark grey.
    http://www.mattedesignphotos.com/
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited October 28, 2015
    Hello,

    Now that the site is live can anyone help me try and figure this whole menu color thing. In my previous posts are samples of what I'd like to do but I haven't been able to figure it out. Anyone up for a challenge? Thank you all for your time and help.
    http://www.mattedesignphotos.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited October 28, 2015
    Try this:
    .sm-user-ui .sm-page-widget-12222444 .sm-page-widget-nav-color-default a, 
.sm-user-ui .sm-page-widget-12222444 .sm-page-widget-nav-color-default a:visited {
    color: #a1a1a1;
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • PhotoMattPhotoMatt Registered Users Posts: 40 Big grins
    edited October 31, 2015
    Thank you Mike,

    When I add the code to the entire site it changes the color of the bottom half of the page. What I want to change is just the inactive Top menu: links, People, Events, Retouched, Gallery, Clients, Booking to #c4c4c4. Not sure if this matters but I had to create a separate menu on each page. Attached is a sample of what I want it to look like.

    Thank You!

    Update: The code essentially removed my custom theme.
    http://www.mattedesignphotos.com/
Sign In or Register to comment.