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

Nav Tab not following my css change

Discussion in 'Styling and Customization Questions' started by Neil E., Jul 14, 2012.

  1. Neil E.

    Neil E. Active Member

    Code:
            <!-- no selection -->
            <xen:if is="!{$selectedTab}">
                <li class="navTab selected"><div class="tabLinks"></div></li>
            </xen:if>
     
        </ul>
     
        <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
     
        <xen:if is="!{$visitor.user_id}"><ul class="visitorTabs"><li class="navTab NewLoginSignup"><a href="{xen:link login}" class="navLink visitorTabItem OverlayTrigger">{xen:phrase log_in_replace}</a></li></ul></xen:if>
     
    </div>
     
    <span class="helper"></span>
         
            </nav>
        </div>
    </div>
    
    This relates to my altered Log in or Sign up tab on the Nav Bar. This is a new tab via Jake's template mod. It is now the only way to log in and calls up the overlay. You can view it here as a guest: www.odsc.on.ca/.xenforo/index

    xenforo31.jpg

    It inherits styling from class=navTabs

    xenforo30.jpg

    It should be styled from it's new class=navTab NewLoginSignup

    xenforo33.jpg

    Inspecting it with Firebug shows:

    xenforo32.jpg

    I'll set the final colors after some other forum styling is decided. My problem is that it's ignoring the black text and 18px height. Even adding !important doesn't help. What am I doing wrong? Is a specific order required for the sequence of the individual style attributes?

    I'm trying to create an oval button that is slightly smaller than the Nav Tab height so the button border will be inside the normal tab height.
     
  2. Russ

    Russ Well-Known Member

    Try just color: black !important

    not text-color :)
     
    Shelley likes this.
  3. Neil E.

    Neil E. Active Member

    Good suggestion but I had it that way before as well. What's strange is that the image isn't really clear. It looks like there is an element in the same position that is also influencing the result. Kind of like a transparency. I don't have any other modifications to the navigation or navigation.css templates. It's acting as though some of the Nav Tab properties have priority over my css change. Button functionality is fine but the appearance is poor. I'm using this button to improve my knowledge of CSS/CSS3.
     
  4. Shelley

    Shelley Well-Known Member

    I think judging by the screeny there's some text-shadow? Could you provide a link?

    try adding in
    Code:
    .navTab.NewLoginSignup {
    text-shadow: none!important;
    }
    
    I'm quite sure that the login/signup is inheriting the text-shadow from the .visitorTabs
     
  5. Neil E.

    Neil E. Active Member

    www.odsc.on.ca/.xenforo/index This was in the first post, it should work.

    The screen capture image is very fuzzy compared to the actual button when viewing the page as a guest.
     
  6. Russ

    Russ Well-Known Member

    Code:
    .navTab .NewLoginSignup a { color: #FFF; }
    
    Try that? to adjust the color
     
    Neil E. likes this.
  7. Neil E.

    Neil E. Active Member

    xenforo35.jpg

    results in white text which comes up crisper in the screen capture:
    xenforo34.jpg


    The code addition changes the color of the link which must be more significant than trying to change it as text.
     
  8. Vincent

    Vincent Well-Known Member

  9. Neil E.

    Neil E. Active Member

    Right, black was my original choice. Russ had the idea to change the link attribute to white (which works). Must have something to do with the text being called via a phrase. There is so much code involved with the navigation bar that it must be the most intense location for styling.

    Since the main issue is about appearance, can anyone suggest a different method of putting a button in that location? Is there a preferred way to do it? I'm still wondering about the placement too. I'd like to get it a bit shorter vertically so it's noticeably within the Nav Tab.

    @Shelley I don't see any text decoration or shadow properties assigned to the Nav Tabs. There is a shadow for Selected Tab, but that shouldn't apply to this "closed tab" button. The visitor tabs only display after a successful login.
     
  10. Russ

    Russ Well-Known Member

    Try adding a margin-top: -4px to : .navTab.NewLoginSignup a

    and also a margin: 5px to .navTab.NewLoginSignup
     
    Neil E. likes this.
  11. Neil E.

    Neil E. Active Member

    Well the height attribute works when I remember to add the ;
    I'm getting closer.
     
  12. Neil E.

    Neil E. Active Member

    Russ,
    Thanks, you're right on the money. I can see the margin difference right away. That plus the link color has nailed it. A bit more testing and I should be fine. This has been a good exercise for learning the detail stuff.

    EDIT: I'm not a smilie fan but I'll put one here ;)
    I'll adjust the final colors later on.

    xenforo36.jpg
     

Share This Page