Nav Bar Dropdown text color change

lgrabeklislgrabeklis Big grinsRegistered Users Posts: 10 Big grins
edited October 16, 2013 in SmugMug Customization
My Site: Grandvisionphoto.com

I cannot find the custom code (CSS or HTML) to use to change the nav bar dropdown colors. I had this figured out in my Legacy site. This color change applies to hover and then the drop downs when selected.

Comments

  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins
    edited October 16, 2013
    lgrabeklis wrote: »
    My Site: Grandvisionphoto.com

    I cannot find the custom code (CSS or HTML) to use to change the nav bar dropdown colors. I had this figured out in my Legacy site. This color change applies to hover and then the drop downs when selected.

    Try this code. I tested it on your site and it works. Feel free to ignore the border at the end ... I just tacked it on in case you wanted to change that.
    /* Set the default navbar submenu background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
      background: #008000;
    }
    
    /* Set the navbar submenu hover background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
      background: #00F;
    }
    
    /* Change the border color */
    .yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
       border-color: #000000;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • lgrabeklislgrabeklis Big grins Registered Users Posts: 10 Big grins
    edited October 16, 2013
    Indeed! Just the code I was looking for. Thanks Aaron. It does a great job with changing the background colors. Is there another line or two what would do the same for the text/labels for the menu items? Appreciate it!

    leftquark wrote: »
    Try this code. I tested it on your site and it works. Feel free to ignore the border at the end ... I just tacked it on in case you wanted to change that.
    /* Set the default navbar submenu background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
      background: #008000;
    }
    
    /* Set the navbar submenu hover background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
      background: #00F;
    }
    
    /* Change the border color */
    .yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
       border-color: #000000;
    }
    
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins
    edited October 16, 2013
    lgrabeklis wrote: »
    Indeed! Just the code I was looking for. Thanks Aaron. It does a great job with changing the background colors. Is there another line or two what would do the same for the text/labels for the menu items? Appreciate it!

    Try this:
    /* Change the navbar fonts */
    .sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
    .sm-page-widget-nav-toplink > a {
      font-family: 'Courier' !important;
      font-size: 10px !important;
      color: yellow !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins
    edited October 16, 2013
    You need to note that SmugMug doesn't load all of the Google Fonts by default. You can force additional Google Fonts to be loaded by following my discussion here (http://www.aaronmphotography.com/Customizations/Sitewide/Google-Fonts). Then you can replace the 'Courier' above with one of the google fonts. Otherwise you'll have to stick to the default fonts that people have loaded on their computers.

    For example, I load "Open Sans Condensed" using the following ... and then I would change the above code to replace "Courier" with "Open Sans Condensed:
    /* =====================================
       Define additional fonts to be used  =
       =====================================
       Use Open Sans Condensed */
    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 300;
      src: 
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
    }
    
    /* Change the navbar fonts */
    .sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
    .sm-page-widget-nav-toplink > a {
      font-family: 'Open Sans Condensed' !important;
      font-size: 10px !important;
      color: yellow !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • lgrabeklislgrabeklis Big grins Registered Users Posts: 10 Big grins
    edited October 16, 2013
    Nav Bar Font Changes
    Great. I will give this a try in the next day or two and then let you know if it was a success. thanks again for the "over and above" help and support, Aaron.
    leftquark wrote: »
    You need to note that SmugMug doesn't load all of the Google Fonts by default. You can force additional Google Fonts to be loaded by following my discussion here (http://www.aaronmphotography.com/Customizations/Sitewide/Google-Fonts). Then you can replace the 'Courier' above with one of the google fonts. Otherwise you'll have to stick to the default fonts that people have loaded on their computers.

    For example, I load "Open Sans Condensed" using the following ... and then I would change the above code to replace "Courier" with "Open Sans Condensed:
    /* =====================================
       Define additional fonts to be used  =
       =====================================
       Use Open Sans Condensed */
    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 300;
      src: 
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
         url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
    }
     
    /* Change the navbar fonts */
    .sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
    .sm-page-widget-nav-toplink > a {
      font-family: 'Open Sans Condensed' !important;
      font-size: 10px !important;
      color: yellow !important;
    }
    
Sign In or Register to comment.