Change the background colour for each menu item

txt2nite

Hello

I'm brand new here, I just searched through the forums and couldn't find an answer so thought I'd post my question here. I'm using smug mug to create a shop for my work.

I'm just building the page and currently using the Osiris Theme. The page can be found at 'tubemapper dot smugmug', the pictures arent viewable but that's not necessary for this. I have a page with an accordion menu on the left hand side of the page. I want to change the background colour of each menu item.

For clarification I photograph the metro, and each link represents a different metro line. To get an idea of what I'm trying to create you can view my main website at tubemapper dot com and Hover over 'photos by tube line', this is what I want to permanently create on the left hand side :-)

Using the firefox's inspector, I can identify different ids and change the background colour in that browser window. However when I publish this doesn't work. This is an example of the code I was using.

.yui_3_8_0_1_1527806873869_105 {
background-color: #DC231F !important;
}

but this doesn't work when I publish. Can anyone help.


Thanks for any help or guidance

Sorry if I'm making an obvious mistake

regards

Luke

Hikin' Mike

I'm not seeing a 'photo by tube line' on your website.

txt2nite

Hello on tubemapper dot com the first menu item is photo by tube line, alternatively shrink the browser to mobile size or view on a phone and you'll see a colour menu when the menu is expanded.

Thanks for your time

Hikin' Mike

Again, I'm not seeing a 'photo by tube line' on your website. Sorry.

txt2nite

Ok I have uploaded an image to tubemapper dot com /line.git

txt2nite

Sorry i mean tubemapper dot com /line.gif

Hikin' Mike

You said 'tubemapper.smugmug.com' at first and there is no 'photos by tube line'. I see it on your other site. I'm getting ready to leave, so I'll come back when I get home.

Hikin' Mike

I see the different colors on your tubemapper.com site. What is the problem?

txt2nite

Okay what I want to do is create a colour menu on my tubemapper.smugmug.com like the one one the tubemapper.com website using Css to change the background colour of the acordian menu on the smygmug website

Hikin' Mike

I assume you are talking about the 'Home, Browse and Search' nav text. Add this to your theme's custom CSS section:

/**
* Changes Different Nav Background 
* and Adds Left Padding
***************************************************/
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item {
    padding-left:5px;
    }

.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(1) {
    background:red;
    }

    .sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover:nth-child(1) {
        background:blue;
        }

.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(2) {
    background:yellow;
    }

.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(3) {
    background:orange;
    }


.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover {
    background:green;
    }

If that isn't what you want, you need to be more specific.

txt2nite

Hello Mike, you are a genius. Thank you kindly Sir that has done the trick. Is it also possible to do this for the mobile menu?

Regards

Hikin' Mike

@txt2nite said:
Hello Mike, you are a genius. Thank you kindly Sir that has done the trick. Is it also possible to do this for the mobile menu?



Regards

Yep, just replace the code from above and use this instead:

/**
* Changes Different Nav Background 
* and Adds Left Padding
***************************************************/
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item {
    padding-left:5px;
    }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(1), 
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(1) {
    background:red;
    }

    .sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover:nth-child(1),
    .sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover:nth-child(1) {
        background:blue;
        }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(2),     
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(2) {
    background:yellow;
    }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(3),     
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(3) {
    background:orange;
    }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover,        
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover {
    background:green;
    }

txt2nite

Thanks this worked a treat.