FANDOM


  • I've been having difficulty with the On The Wiki stuff or NavBar or #WikiaHeader

    My problem is that as you can see up there is that the On The Wiki font color is white.

    And the rest are black. What happens in my Wiki is that all of them black, which is unseen through the black background.

    Theme Designer is not a solution because I played with Common.css, so are there any css that has to be edited in order it work out like the On The Wiki is white with the rest of sub-nav but the rest of "Not Hovered" nav is black?

    Link: lunaria-story.wikia.com

    The screenshot below is a screenshot showing you what is my problem. That On The Wiki is black.

    ProblemWithNavBar
      Loading editor
    • Hey, this code should make the text on the active tab white :)

      .nav-item marked {
           color: white !important;
      }
      
        Loading editor
    • Sorry, but that doesn't work as well.

      I've tried putting them under Special:CSS and used Ctrl + F5 as always.

      Not working it is still black.

        Loading editor
    • And does this one work?

      .nav-item marked a {
           color: white !important;
      }
      
        Loading editor
    • Still doesn't work, i tried with your original code, save and bypass cache by Ctrl+F5, still stuck with all black.

      I edited it a bit to

      #WikiaHeader .nav-item {
           color: white !important;
      }
      

      It works but now every single main nav item is white. What i want is the marked one white and the rest black.

      I also tried this, but still no luck.

      .nav-item marked > a {
           color: white !important;
      }
      
        Loading editor
    • Then try this

      #WikiaHeader .nav-item marked {
           color: white !important;
      }
      
        Loading editor
    • .WikiHeader > nav li.marked > a {
        color: #fff;
      }
      

      is what you're looking for.

      How to find good CSS selector

      It's best not to use '!important' unless necessary. The easiest way to figure out a good selector is to use your browser developer tools and see what selector Wikia's using. See the picture for example - hope this helps next time!

        Loading editor
    • Found that code later as well while checking it. Kinda strange that the other ones weren't right though...

        Loading editor
    • On most of the other ones, you used '.nav-item marked', which meant it was looking for separate <marked> element. '.nav-item.marked' probably would've worked.

        Loading editor
    • Yep, that was kinda the problem lol :P

        Loading editor
    • Excellent~!

      Kudos for both of you for helping me.

      I don't know I could do that. Mind to teach me about that Element Inspector OneTwoThreeFall?

      Anyway what browser you used? I can't find the "Rules" in Chrome..

        Loading editor
    • Usually you get it with a right click.

        Loading editor
    • No problem, glad I could help!

      I used Firefox, but Chrome has the same feature - just right-click the thing you're interested in and choose 'Inspect element' option.

      How to find good CSS selector 2

      Here's a example picture. Chrome calls it 'Styles' instead of 'Rules' but it means the same thing.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message