1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hover frustration

Discussion in 'Styling and Customization Questions' started by ThunderBird2, May 28, 2013.

  1. ThunderBird2

    ThunderBird2 Member

    It is sort of frustration to find Style Properties's hover color, it doesn't change the blue background and text even though I tried all hovers settings in Appearances. Could you please tell me where exact to change hover and underline....:(
     
  2. Shelley

    Shelley Well-Known Member

    This will change the colour of the tab and the font colour on hover by adding to EXTRA.CSS you'll have to change accordingly to your preference but i'm sure it's in Style Properties.

    Code:
    .navTabs .navTab.PopupOpen .navLink:hover, .navTabs .navTab.PopupClosed .navLink:hover {
    background: url("@imagePath/xenforo/gradients/navigation-tab.png") repeat-x scroll center top red;
    color: green;
    }
     
    ThunderBird2 likes this.
  3. Shelley

    Shelley Well-Known Member

    And your border problem you can change by pasting in EXTRA.CSS with the following adjusting accordingly.

    Code:
    .Menu .primaryContent {
        border-bottom: 0px solid green;}
    Edit: Set the value of the bottom-border to zero.
     
    ThunderBird2 likes this.
  4. ThunderBird2

    ThunderBird2 Member

    Shelly, thanks! As you know, some of us don't use CSS due to lack of understanding codes.

    I am trying to find navLink in Styles Properties but unable to do successfully. I ended up to change color palette's primaryLight, which working fine but still stuck with shiny gradient, anyone know how to remove gradients for that primaryLight hovering?

    I found bottom-border problem in Building Blocks that is in PrimaryContent.

    regards
     
  5. erich37

    erich37 Well-Known Member

    in ACP there is a search-box at the top-right.

    search for:
    navtabs

    this will give you the result:
    Navigation Tabs Container @navTabs

    click on this and you will be shown the right screen to change all colors for the Navigation-tabs there.



    in order to get rid of the "shiny gradient", just remove the link to the ".png gradient-image" which is in one of the boxes which says "Background" there....
    Code:
    @imagePath/xenforo/gradients/navigation-tab.png

    hope this helps.....
     
    ThunderBird2 likes this.
  6. ThunderBird2

    ThunderBird2 Member

    I already typed search, the result shown navigation, navigation.css and EXTRA.CSS. It doesn't show Navigation Tabs Container @navTabs. The search results didn't provide specific listings of navtabs or primaryContent. "No items matched your filter."

    Then carefully I removed gradients and text-shadow under navigation.css hiding somewhere and somewhere.
     
  7. erich37

    erich37 Well-Known Member

    I would not change anything in the file "navigation.css" :cool:


    just go for this route in ACP:

    ACP > Appearance > Style Properties > Header and Navigation > Navigation Tab

    and change your stuff there.

    :)


    Keep in mind to create your own "custom style" first, so you do not make any changes to the "default style", but to make changes to your "custom style" (which is a child-style of your default style).

    :coffee:
     
  8. ThunderBird2

    ThunderBird2 Member

    Thank you, erich. It is solved. :D
     
    erich37 likes this.
  9. ThunderBird2

    ThunderBird2 Member

    [​IMG]

    ACP > Styles Properties > Buttons..........I even tried to get rid of white background of this circle in login area in order to transparent with black background. Both Styles Properties Login Bar and Sign Up Buttons container doesn't answer my problem, where is exactly we do that specifically?
     
  10. Tracy Perry

    Tracy Perry Well-Known Member


    Don't take this as gospel (it's been so long since I changed it) but for the popups (system wide) I think I did this in EXTRA.css
    Code:
    /* Darken background on popups */
    a.callToAction span {
    background: #4B4848 url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x center -8px !important;
    color: rgb(253, 222, 156) !important;
    }
    a.callToAction {
    padding: 0px;
    color: #353534 !important;
    }
    .xenForm fieldset {
    color: orange;
    }
    .xenForm .ctrlUnit {
    color: orange;
    }
    Mine looks like this
    example.png
     
    ThunderBird2 likes this.
  11. ThunderBird2

    ThunderBird2 Member

    Tracy, you look neat. To clarify, it is a bit odd. I found that Firefox and IE doesn't have problem and all clear but Chromo still have this kind of white circle issue. :cautious:
     
  12. Tracy Perry

    Tracy Perry Well-Known Member

    The screenshot from above was from the latest Chrome on my Mac Mini. Just plug that into your EXTRA.css and see if it changes it. If so, you can always edit the colors to your liking (or delete it from the EXTRA.css).
     
    ThunderBird2 likes this.

Share This Page