Two Nav-Bar´s with different colour letters

eparrameparram Registered Users Posts: 24 Big grins
edited January 31, 2015 in SmugMug Customization
Hello,

I´m trying to have two Nav-Bars in the same page and customizing them with different colour letters (one in white and the other in black)

So far I manage to change the colour on both nav-bars on same time or can change the background colour independently. But I cannot set two different colour letters.

Any ideas??

I enclose the link to the page.

http://www.enriqueparra.net/Visions/Places/Ey%C3%BCp-Sultan-Camii/


The Nav bar in the header is supposed to remain in white and the Nav Bar inside the white square of the gallery is supposed to be in black letters.

Thanks in advance. :thumb

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 29, 2015
    These are the widget class names of the two nav bars. You can specifically target each with separate CSS.

    header
    .sm-page-widget-9559478
    other down below
    .sm-page-widget-9586170
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • eparrameparram Registered Users Posts: 24 Big grins
    edited January 30, 2015
    Allen wrote: »
    These are the widget class names of the two nav bars. You can specifically target each with separate CSS.

    header
    .sm-page-widget-9559478
    other down below
    .sm-page-widget-9586170



    Thanks Allen,
    I still need to learn how to find these widgets, i' m using the Firefox developer but as I can see i'm not doing it properly.

    What software do you use to find the .div names, firefox, chrome or some other.

    Can you explain hoe you found the widget code?

    Thanls again : Clap
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited January 30, 2015
    Hi Clap,
    I'm using the Firefox Firebug extension. Right-clicking on a part of the page, you can inspect the element in Firebug, which brings up Firebug at the bottom:
    20150130102633-01141x3310226.jpg
    Depending on what you inspected, you may have to move up or down in the code to find the specific item. You can move your mouse over the various code lines and Firebug would highlight the specific element on the page. Sometimes, it may also be necessary to expand a certain div tag with the plus button to see additional elements.
    Sebastian
    SmugMug Support Hero
  • eparrameparram Registered Users Posts: 24 Big grins
    edited January 30, 2015
    rainforest1155 wrote: »
    Hi Clap,
    I'm using the Firefox Firebug extension. Right-clicking on a part of the page, you can inspect the element in Firebug, which brings up Firebug at the bottom:
    20150130102633-01141x3310226.jpg
    Depending on what you inspected, you may have to move up or down in the code to find the specific item. You can move your mouse over the various code lines and Firebug would highlight the specific element on the page. Sometimes, it may also be necessary to expand a certain div tag with the plus button to see additional elements.


    Thanks to both Sebastina and Allen,

    I tried to apply the CSS code to both widgets that Allen specified, the code that I applied is the following:


    /*White letters first Nav-Bar*/
    .sm-page-widget-9559478 .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: white !important;
    }

    /*Black letters second Nav-Bar*/
    .sm-page-widget-9586170 .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: black !important;
    }

    Wiith the following result:
    - The firts nav bar letters: The first 5 buttons are in black letters and the rest are in white letters.
    They were "supposed" to be all in white letters.
    - the second nav bar letters are all in black (as I intend to be).

    Obviously I´m doing something wrong....

    http://www.enriqueparra.net/Visions/Places/Ey%C3%BCp-Sultan-Camii/

    Any suggestions?? headscratch.gif
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited January 30, 2015
    It looks like you got this sorted out. Are you still having issues?
    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
  • eparrameparram Registered Users Posts: 24 Big grins
    edited January 30, 2015
    leftquark wrote: »
    It looks like you got this sorted out. Are you still having issues?

    Hey, thanks.

    I still don´t know how but I managed this one.

    I will continue bulding the web.

    Must probably I will face some issues later on.

    If any I will ask for HELP!!! clap.gif

    Thanks again.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 30, 2015
    You forgot the red otherwise it will apply everywhere. One example.

    /*White letters first Nav-Bar*/
    .sm-page-widget-9559478 .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a, .sm-page-widget-9559478 .sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: white !important;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • eparrameparram Registered Users Posts: 24 Big grins
    edited January 31, 2015
    Allen wrote: »
    You forgot the red otherwise it will apply everywhere. One example.

    /*White letters first Nav-Bar*/
    .sm-page-widget-9559478 .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a, .sm-page-widget-9559478 .sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: white !important;
    }

    Thanks Allen !!! I will try your code later on I believe it will work :ivar
Sign In or Register to comment.