Change the background colour for each menu item

txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
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
Tagged:

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins
  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins

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

  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
    Ok I have uploaded an image to tubemapper dot com /line.git
  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
    Sorry i mean tubemapper dot com /line.gif
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins

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

  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins

    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.

  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,353Registered Users Major grins

    @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;
        }
    
  • txt2nitetxt2nite LondonPosts: 39Registered Users Big grins

    Thanks this worked a treat.

Sign In or Register to comment.