Options

Nav Menu customizations

TomRoperTomRoper Registered Users Posts: 48 Big grins
edited September 8, 2013 in SmugMug Customization
Here are the classes to use to change the nav menu. I put this in my theme CSS 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {color: #656575;}
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover {color: #FFFFFF;}
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {color: #FFFFFF;}
Tom

http://www.thomasroper.com
«1

Comments

  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 5, 2013
    TomRoper wrote: »
    Here are the classes to use to change the nav menu. I put this in my theme CSS 
    .sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {color: #656575;}
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover {color: #FFFFFF;}
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {color: #FFFFFF;}

    Is that just for the straight up nav w/o flyouts or drops?
  • Options
    TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 6, 2013
    I don't have any nested menu's. I created a quick nested menu and it works for that as well but I don't have any code in there to change the background for the nested menu but the link did change.

    You can try these 
    .sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:visited {
    color: #656575;
}
    Tom

    http://www.thomasroper.com
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 6, 2013
    TomRoper wrote: »
    I don't have any nested menu's. I created a quick nested menu and it works for that as well but I don't have any code in there to change the background for the nested menu but the link did change.

    You can try these 
    .sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:visited {
    color: #656575;
}

    Did you do these for the accordion style (where you click and the drop/flyout opens) or the style where as soon as you mouse over the flyout/drop p[ops out?
    I ask because I am seeing no change. I have the mouse over type on my site.
    Thanks for taking the time though.
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    I used this for menu hover color. 1st line is comment hack because /**/ comments tags don't work. 
    xxxxxx menu hover, 
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: gold!important;
}
    Not sure if the two hovers are needed anymore. Used to be IE needed the a :hover.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 6, 2013
    Allen wrote: »
    I used this for menu hover color. 1st line is comment hack because /**/ comments tags don't work. 
    xxxxxx menu hover, 
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: gold!important;
}
    Not sure if the two hovers are needed anymore. Used to be IE needed the a :hover.

    It must work different for the vertical navs because none of this stuff is working on my vertical w/ flyouts.
  • Options
    TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 6, 2013
    Here are all of the nav classes, straight from the CSS. I put the accordian down lower. Use Web Dev Tools to edit the CSS to see what it is doing for you, I've been using the Skin CSS to try things out and this is where the theme CSS that I have set is being put.
    /******************************************************************************/
/********************************* STANDARD ***********************************/
/******************************************************************************/


.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:active {
    color: #00B3FF;
}

    Accordian 
    /******************************************************************************/
/******************************** ACCORDION ***********************************/
/******************************************************************************/
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:active {
    color: #00B3FF;
}
    Tom

    http://www.thomasroper.com
  • Options
    TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 6, 2013
    Allen wrote: »
    I used this for menu hover color. 1st line is comment hack because /**/ comments tags don't work. 
    xxxxxx menu hover, 
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: gold!important;
}
    Not sure if the two hovers are needed anymore. Used to be IE needed the a :hover.

    I've had no trouble using /* */ to notate my changes. Where are you putting your CSS? If you click theme->active theme->advanced->Edit CSS and put your changes there, I've had no problem with the small CSS changes and it appears to be loading after the other CSS so I haven't had to use the !important to do any over-rides.

    I'm no expert but this CSS is far more complex than the legacy system headscratch.gif
    Tom

    http://www.thomasroper.com
  • Options
    southeasternphotographysoutheasternphotography Registered Users Posts: 647 Major grins
    edited August 6, 2013
    Not working for me - SmugMug Theme
    2nd EDIT: Figured it out I think - NOT. The colors in your example at the top are white and grey - which is what I already have. I looked at your website and you have grey and blue - so I thought mine was not working! HMMMMM changed both the active and hover to #d3414a and I still cannot get a change. Help still needed.....


    EDIT: Just saw directions above. Did that. When getting out of it, the Basic went red, clicked it and had to enter a theme name. So, named it SmugMug Mods. Saved and it showed SmugMug Mods being the active theme. BUT the changes still do not show. I will go back and take a look there again.....

    PREVIOUS Message before the EDIT: I added the code to my CSS for "Entire Site" and nothing changed. I went back and used "Entire Site" and Theme underlined. Still no change. Looked at Theme options and do not find CSS for Theme. Where exactly are you placing this? BTW, also would like to Center my menu options on the page. Also, I might want the box and colors from my old site - but I could probably figure that out once I get your code to work.

    I tried using the "nav container" method from old SM which doesn't work at all as it looks from your data that Nav items have become "widgets".

    I do have other CSS code for the Entire Site that do work. Thanks for any help!
    Troup Nightingale - Southeastern Photography - Photographer in Brunswick, Georgia
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 6, 2013
    OK this code modifies the nav if it's vertical:
    * css rules must be specific enough to override yui menu-skin */

.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
    background: #080808;
    -moz-box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
    box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
}
.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {
    border-color: #0F0F0F;
}

.sm-user-ui a.yui3-menu-label,
.sm-user-ui a.yui3-menu-label:hover,
.sm-user-ui a.yui3-menu-label:visited,
.sm-user-ui.yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:after,
.sm-user-ui .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:after,
.sm-user-ui.yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:hover:after,
.sm-user-ui .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:hover:after {
    color: #e7e7e7;
}

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover {
    background: #0F0F0F;
}

.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
    background: #0F0F0F;
    color: #e7e7e7;
}

    I would like the flyouts to be some what transparent like the left bar on my theme, but I can't seem to figure out how they did that.
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    TomRoper wrote: »
    I've had no trouble using /* */ to notate my changes. Where are you putting your CSS? If you click theme->active theme->advanced->Edit CSS and put your changes there, I've had no problem with the small CSS changes and it appears to be loading after the other CSS so I haven't had to use the !important to do any over-rides.

    I'm no expert but this CSS is far more complex than the legacy system headscratch.gif
    None of these take comment tags.
    All the CSS boxes on a page, "entire site", "all galleries" and "just this page".
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 6, 2013
    Here is where I am putting this. This will affect the whole site. I suspect to only affect a certain page, you'd use the HTML/CSS box
    Tom

    http://www.thomasroper.com
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 6, 2013
    Allen wrote: »
    None of these take comment tags.
    All the CSS boxes on a page, "entire site", "all galleries" and "just this page".

    Mine do.ne_nau.gif
    BTW... your avatar makes me think you are angry and ranting every time I read your posts:D
  • Options
    TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 6, 2013
    Allen wrote: »
    I used this for menu hover color. 1st line is comment hack because /**/ comments tags don't work. 
    xxxxxx menu hover, 
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: gold!important;
}
    Not sure if the two hovers are needed anymore. Used to be IE needed the a :hover.
    Allen wrote: »
    None of these take comment tags.
    All the CSS boxes on a page, "entire site", "all galleries" and "just this page".

    Good to know. Maybe because they are widgetized?
    Tom

    http://www.thomasroper.com
  • Options
    GaryBakkerGaryBakker Registered Users Posts: 266 Major grins
    edited August 6, 2013
    Allen wrote: »
    I used this for menu hover color. 1st line is comment hack because /**/ comments tags don't work. 
    xxxxxx menu hover, 
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: gold!important;
}
    Not sure if the two hovers are needed anymore. Used to be IE needed the a :hover.

    How do I get this code to work for the entire site? I put it in the Advanced tab in the Theme setting and it only works at the gallery level.

    Edited to add: Never mind. I figured it out. I had to change the Theme for my homepage and folder settings to my CSS modified Theme.
    SmugMug site => The Bakker Chautauqua
    "The difference between stupidity and genius is that genius has its limits." (Einstein)
  • Options
    pipercreekphotographypipercreekphotography Registered Users Posts: 83 Big grins
    edited August 6, 2013
    I would like separators between each word on my navbar any suggestions?

    Separators wanted are: | the veritcal lines
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    pipercreekphotography wrote: »
    I would like separators between each word on my navbar any suggestions?

    Separators wanted are: | the veritcal lines
    A link a link between each main button and put | in the title.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    GaryBakker wrote: »
    How do I get this code to work for the entire site? I put it in the Advanced tab in the Theme setting and it only works at the gallery level.

    Edited to add: Never mind. I figured it out. I had to change the Theme for my homepage and folder settings to my CSS modified Theme.
    I assume you created your menu for the whole site. I added a CSS widget also for the whole site CSS
    including the menu. On any page under customize pick "entire site" to add widgets for site wide.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    pipercreekphotographypipercreekphotography Registered Users Posts: 83 Big grins
    edited August 6, 2013
    Allen wrote: »
    A link a link between each main button and put | in the title.


    Thanks Allen. After putting them in. I decided it wasn't right looking.

    Now a second question you maybe able to answer. On the mobile site, we have a + for the drop down, any idea how that can be customized?
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    pipercreekphotography wrote: »
    Thanks Allen. After putting them in. I decided it wasn't right looking.

    Now a second question you maybe able to answer. On the mobile site, we have a + for the drop down, any idea how that can be customized?
    No clue on mobile site.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 6, 2013
    I did a border-right hack on my menu to get a | separator, check out my site if you want...
    .sm-page-widget-nav-toplink {
  border-right: 2px solid #000;
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  padding: 0 25px 0 25px;
  margin:0px !important;
}

.sm-page-widget-nav-toplink:last-child {
  border-right: 0px solid #CCC;
}
    http://aschendel.smugmug.com
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 6, 2013
    aschendel wrote: »
    I did a border-right hack on my menu to get a | separator, check out my site if you want...
    .sm-page-widget-nav-toplink {
  border-right: 2px solid #000;
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  padding: 0 25px 0 25px;
  margin:0px !important;
}

.sm-page-widget-nav-toplink:last-child {
  border-right: 0px solid #CCC;
}
    Anyway to make the pipes shorter? I tried but it also reduces the text.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    Allen wrote: »
    Anyway to make the pipes shorter? I tried but it also reduces the text.

    You can play with the line-height property - that directly affects the height of the "box":
    .sm-page-widget-nav-toplink {
  border-right: 2px solid #000;
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  line-height:.9em;
  padding: 0 25px 0 25px;
  margin:0px !important;
}
    http://aschendel.smugmug.com
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 7, 2013
    aschendel wrote: »
    You can play with the line-height property - that directly affects the height of the "box":
    .sm-page-widget-nav-toplink {
  border-right: 2px solid #000;
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  line-height:.9em;
  padding: 0 25px 0 25px;
  margin:0px !important;
}
    Thanks, .8 seems less intrusive.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    Definitely a "to taste" type of thing, glad it worked and it looks good. Do you have 2 nav bars or one that rolls over to the 2nd line?

    Andy
    http://aschendel.smugmug.com
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited August 7, 2013
    aschendel wrote: »
    Definitely a "to taste" type of thing, glad it worked and it looks good. Do you have 2 nav bars or one that rolls over to the 2nd line?

    Andy
    It's two. Top one has no drops that would interfere with the lower one. Not completed yet, long ways to
    go. You can see basically what I'm going for on my Legacy site.

    I wish I could insert links in the spot where I need them rather then clicking the plus at the bottom and
    then having to drag each up to its place. The small add links box to way too small.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    ParisParis Registered Users Posts: 126 Major grins
    edited August 7, 2013
    Hey all... Can someone please look at my menu and tell me if it is possible to add a hover effect such as a colour change.

    Also... I would like to add a hover effect to my gallery page collage photos so the viewer is prompted to click on the photo.
    Thanks,
    Richard.
    http://www.richardparisphotography.ca/
  • Options
    southeasternphotographysoutheasternphotography Registered Users Posts: 647 Major grins
    edited August 7, 2013
    I used someone's CSS to put a red line around the thumbnail or image I was getting ready to click on. Only it just put a red line across the top and left side (same thing the author's code was doing to him); but usable. Using SmugMug theme, I could not get example code to change the SmugMug theme colors etc on the menu items. I finally chose in options for the menu to give me "subdued" which is grey menu items and when you hover over each one, they turn to bold white. That works for me now; but is not what I want. I am in Preview mode (not live) so you can not see my site.
    Troup Nightingale - Southeastern Photography - Photographer in Brunswick, Georgia
  • Options
    ParisParis Registered Users Posts: 126 Major grins
    edited August 7, 2013
    Figured out the hover code for the menu.

    STILL LOOKING FOR CODE to change the photos on my gallery collage pages so they fade on hover or change in some way.
    Thanks,
    Richard.
    http://www.richardparisphotography.ca/
  • Options
    aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    Paris wrote: »
    Figured out the hover code for the menu.

    STILL LOOKING FOR CODE to change the photos on my gallery collage pages so they fade on hover or change in some way.

    See your other thread: http://www.dgrin.com/showthread.php?t=237948

    Andy
    http://aschendel.smugmug.com
  • Options
    JodiCrandellPhotographyJodiCrandellPhotography Registered Users Posts: 27 Big grins
    edited August 8, 2013
    TomRoper wrote: »
    Here are all of the nav classes, straight from the CSS. I put the accordian down lower. Use Web Dev Tools to edit the CSS to see what it is doing for you, I've been using the Skin CSS to try things out and this is where the theme CSS that I have set is being put.
    /******************************************************************************/
/********************************* STANDARD ***********************************/
/******************************************************************************/


.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-emphasized a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:visited,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-accent a:active {
    color: #00B3FF;
}

    Accordian 
    /******************************************************************************/
/******************************** ACCORDION ***********************************/
/******************************************************************************/
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-default .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:visited {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-muted .sm-accordion-item-action:active {
    color: #656575;
}

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-accent .sm-accordion-item-action:active {
    color: #00B3FF;
}
    Thank you sir... works very well!!
    http://jodicrandellphotography.smugmug.com
    www.jodicrandellphotography.com
    www.facebook.com/jodicphoto
    www.twitter.com/#!/JodiCPhoto
    http://jodicphoto.blogspot.com
Sign In or Register to comment.