NAV Bar Customize questions

mhcooperphotography · May 24, 2014

I thought I would take the plunge and see if anyone can help me with my NAVBAR. I converted to the new Smugmug several months ago. Prior to the conversion I had a number of custom items - some good - some not so good! I am at the point where I am moving from a "friends/family" site to one that I can run my business from.

My plan is to have a set of NAV buttons for basic info about my business - including open access to a set of PORTFOLIOS. I also will have a link for all my prior photos as I really do not want to have two sites. I have read a bit on creating hidden and/or password protected folders and galleries. It is a challenge and I am still working on it. But my current question has to do with the NAV buttons.

While looking for ideas, I can across an entry on dgrin with a link to a web page that I wanted to emulate. Here it is:

http://www.thomasroper.com/galleries

It is only the NAV Buttons that I want to focus on. I would like to create the ability for the NAV Bar to contain a set of "boxes" and then highlight each box as I hover over them.

I started to dissect the CSS code and as you can see I was able to do "some things". When you hover over the NAVBar the words change colors, are underlined, and the background changes color. The two things I do not seem to be able to do is fil the entire box and the last box seems to be missing its border. The last box also appears to be missing its right side.

Any help would be appreciated. My site is:

http://mhcooperphotography.smugmug.com/

and only the WEDDINGS AND BABIES tags are populated. The others are place holders.

Finally - I am trying to decide if I should use the classic Smugmug view (BABIES) or something else, like the WEDDING Gallery. Any feedback, on this, or the site in general would be appreciated. Please keep in mind the FRIENDS AND FAMILY link will be password protected so the general public will not be able to access it.

One more question - has anyone seen a list of CSS tags and explanations for the new smugmug. it would be great if there was a cheat sheet of all the tags and how they are used.

Thanks in advance

Mike

Hikin' Mike · May 24, 2014

Try this. Remove this in red:

.sm-user-ui .sm-page-widget-nav-toplink a, 
.sm-user-ui .sm-page-widget-nav-toplink a:visited {
    [COLOR=Red]background-color: #FFFFFF;[/COLOR]
    color: #000000 !important;
    display: block;
    padding: 0;
    text-decoration: none;
    }

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    [COLOR=Red]background-color: #ffff00;[/COLOR]
    }

Then add this to your theme/site-wide CSS:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover .sm-page-widget-nav-toplink {
    margin: auto 10px !important;
    background-color: #ddd;
    }
.sm-page-widget-nav-activepage,    
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover .sm-page-widget-nav-toplink:hover {
    background-color: #ffff00 !important;
    }    
    
    /* Just for the last link */
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child {
    border-right: 1px solid !important;
    margin-right: 10px !important;
    padding-right: 10px !important;
    }

There is no list of CSS, but I use the 'Firebug' tool for Firefox to inspect different html elements.

NAV Bar Customize questions

Comments