Thanh Navbar bị mất màu so với bản gốc?

Cts · 12/9/14

Chào các bạn, mình dùng style của diễn đàn http://hiephoiketoan.vn/forums nhưng khi cài đặt xong thì thanh Navbar của mình bị mất màu so với style của http://hiephoiketoan.vn/forums, mình có hỏi người chia sẻ xem cách sửa thế nào mà không thấy bạn ấy trả lời, nên mình đăng bài nhờ các bạn giúp đỡ.
Diễn đàn của mình là http://yhocduphong.net/

template navigation.css có:

Mã:

#navigation .pageContent
{
    height: {xen:calc '@headerTabHeight * 2 + 2'}px;
    position: relative;
}

#navigation .menuIcon
{
    position: relative;
    font-size:18px;
    width: .9em;
    display: inline-block;
    text-indent: -9999px;
}

#navigation .PopupOpen .menuIcon:before,
#navigation .navLink .menuIcon:before
{
    zoom: 1;
}

#navigation .menuIcon:before
{
    content: "";
    font-size: 18px;
    position: absolute;
    /*top: 0.4em;*/
    top: {xen:calc 'round(-0.31 + 0.029 * @headerTabHeight, 1)'}em;
    left: 0;
    width: .9em;
    height: 0.125em;
    border-top: 0.375em double currentColor;
    border-bottom: 0.125em solid currentColor;
}

    .navTabs
    {
        @property "navTabs";
        font-size: 12px;
        color: @primaryDarker;
        padding: 0 25px;
        border-width: 1px;
        border-bottom-width: 1px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        @property "/navTabs";
    
        height: @headerTabHeight;
    }

        .navTabs .publicTabs
        {
            float: left;
        }
    
        .navTabs .visitorTabs
        {
            float: right;
        }

            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;
            
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }


/* ---------------------------------------- */
/* Links Inside Tabs */

.navTabs .navLink,
.navTabs .SplitCtrl
{
    @property "navLink";
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    @property "/navLink";

    <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>

    height: @headerTabHeight;
    line-height: @headerTabHeight;
}

    .navTabs .publicTabs .navLink
    {
        padding: 0 15px;
    }

    .navTabs .visitorTabs .navLink
    {
        padding: 0 10px;
    }

    .navTabs .navLink:hover
    {
        text-decoration: none;
    }

    /* ---------------------------------------- */
    /* unselected tab, popup closed */

    .navTabs .navTab.PopupClosed
    {
        position: relative;
    }

    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }

        .navTabs .navTab.PopupClosed:hover
        {
            background-color: @primaryMedium;
        }
    
            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @textCtrlBackground;
            }
    
    .navTabs .navTab.PopupClosed .arrowWidget
    {
        /* circle-arrow-down-light */
        background-position: -64px 0;
    }

    .navTabs .navTab.PopupClosed .SplitCtrl
    {
        margin-left: -14px;
        width: 14px;
    }
    
        .navTabs .navTab.PopupClosed:hover .SplitCtrl
        {
            /* nav_menu_gadget, height: 17px */
            background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -128px {xen:calc '(@headerTabHeight - 17) / 2 + 1'}px;
        }

    /* ---------------------------------------- */
    /* selected tab */

    .navTabs .navTab.selected .navLink
    {
        position: relative;
        @property "navTabSelected";
        font-weight: bold;
        color: @textCtrlBackground;
        background-position: top;
        padding-top: 1px;
        padding-right: 1px;
        margin-top: 1px;
        margin-right: 1px;
        text-shadow: 0px 0px 3px @primaryLightest;
        @property "/navTabSelected";
    }

    .navTabs .navTab.selected .SplitCtrl
    {
        display: none;
    }

    .navTabs .navTab.selected .arrowWidget
    {
        /* circle-arrow-down */
        background-position: -32px 0;
    }

        .navTabs .navTab.selected.PopupOpen .arrowWidget
        {
            /* circle-arrow-up */
            background-position: -16px 0;
        }

    /* ---------------------------------------- */
    /* unselected tab, popup open */

    .navTabs .navTab.PopupOpen .navLink
    {
    }


    /* ---------------------------------------- */
    /* selected tab, popup open (account) */

    .navTabs .navTab.selected.PopupOpen .navLink
    {
        @property "popupControl";
        color: @primaryDark;
        background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        text-shadow: 1px 1px 2px white;
        @property "/popupControl";
    }

/* ---------------------------------------- */
/* Second Row */

.navTabs .navTab.selected .tabLinks
{
    @property "navTabSelected.background";
    background-position: top;
    @property "/navTabSelected.background";

    width: 100%;
    padding: 0;
    border: none;
    overflow: hidden; zoom: 1;
    position: absolute;
    left: 0px;
    top: {xen:calc '@headerTabHeight + 2'}px;
    height: @headerTabHeight;
    background-position: 0px -@headerTabHeight;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}

    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
        margin-left: 8px;
    }

    .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 275px;
    }

    .navTabs .navTab.selected .tabLinks .menuHeader
    {
        display: none;
    }

    .navTabs .navTab.selected .tabLinks li
    {
        float: left;
        padding: 2px 0;
    }

        .navTabs .navTab.selected .tabLinks a
        {
            @property "navTabLink";
            font-size: 12px;
            color: @primaryMedium;
            padding: 1px 10px;
            @property "/navTabLink";
        
            line-height: {xen:calc '@headerTabHeight - 6'}px;
        }
    
        .navTabs .navTab.selected .tabLinks .PopupOpen a
        {
            color: inherit;
            text-shadow: none;
        }
    
            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                @property "navTabLinkHover";
                color: @primaryDark;
                text-decoration: none;
                background-color: @primaryLighterStill;
                padding: 0 9px;
                border: 1px solid @primaryLight;
                border-radius: 5px;
                text-shadow: 1px 1px 0px @primaryLightest;
                outline: 0;
                @property "/navTabLinkHover";
            }
        
            .navTabs .navTab.selected .tabLinks .Popup a:hover,
            .navTabs .navTab.selected .tabLinks .Popup a:focus
            {
                color: inherit;
                background: none;
                border-color: transparent;
                border-radius: 0;
                text-shadow: none;
            }

/* ---------------------------------------- */
/* Alert Balloons */

.navTabs .navLink .itemCount
{
    @property "alertBalloon";
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    right: 2px;
    top: -12px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;
    @property "/alertBalloon";
}

    .navTabs .navLink .itemCount .arrow
    {
        @property "alertBalloonArrow";
        border: 3px solid transparent;
        border-top-color: #e03030;
        border-bottom: 1px none black;
        position: absolute;
        bottom: -3px;
        right: 4px;
        line-height: 0px;
        text-shadow: none;
        _display: none;
/* Hide from IE6 */
width: 0px;
        height: 0px;
        @property "/alertBalloonArrow";
    }

.navTabs .navLink .itemCount.Zero
{
    display: none;
}

.navTabs .navLink .itemCount.ResponsiveOnly
{
    display: none !important;
}

.NoResponsive #VisitorExtraMenu_Counter,
.NoResponsive #VisitorExtraMenu_ConversationsCounter,
.NoResponsive #VisitorExtraMenu_AlertsCounter
{
    display: none !important;
}

/* ---------------------------------------- */
/* Account Popup Menu */

.navTabs .navTab.account .navLink
{
    font-weight: bold;
}

    .navTabs .navTab.account .navLink .accountUsername
    {
        display: block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }

    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }

/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }

.navPopup .listItemText
{
    margin-left: 37px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}

<xen:if is="@enableResponsive">
@media (max-width:mad:maxResponsiveMediumWidth)
{
    .Responsive .navTabs
    {
        padding-left: 10px;
        padding-right: 10px;
    }

    .Responsive .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 50px;
    }
}

@media (max-width:mad:maxResponsiveNarrowWidth)
{
    .Responsive.hasJs .navTabs:not(.showAll) .publicTabs .navTab:not(.selected):not(.navigationHiddenTabs)
    {
        display: none;
    }
}
</xen:if>

template navigation có:

Mã:

<xen:edithint template="navigation.css" />
<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
    <div class="pageContent">
        <nav>
<div class="navTabs">
    <ul class="publicTabs">
        <!-- home -->
        <xen:if is="{$showHomeLink}">
            <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:Phrase home}</a></li>
        </xen:if>
        <!-- extra tabs: home -->
        <xen:if is="{$extraTabs.home}">
        <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
            
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:Phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
    
    
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
        
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
            
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:Phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:Phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:Phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}">
                            <li><a href="{xen:link 'watched/forums'}">{xen:Phrase watched_forums}</a></li>
                            <li><a href="{xen:link 'watched/threads'}">{xen:Phrase watched_threads}</a></li>
                        </xen:if>
                        <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:Phrase new_posts}, {xen:Phrase recent_posts}}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>
    
    
        <!-- extra tabs: middle -->
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
        
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
            
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:Phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
    
    
        <!-- members -->
        <xen:if is="{$tabs.members}">
            <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
        
                <a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>
                <a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
            
                <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.members.title}</h3>
                        <div class="muted">{xen:Phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_members">
                        <li><a href="{xen:link members}">{xen:Phrase notable_members}</a></li>
                        <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:Phrase registered_members}</a></li></xen:if>
                        <li><a href="{xen:link online}">{xen:Phrase current_visitors}</a></li>
                        <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:Phrase recent_activity}</a></li></xen:if>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>            
    
        <!-- extra tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
        
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
            
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:Phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>

        <!-- responsive popup -->
        <li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display:none">
                    
            <a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:Phrase menu}</span></a>
        
            <div class="Menu JsOnly blockLinksList primaryContent" id="NavigationHiddenMenu"></div>
        </li>
        
    
        <!-- 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>
</div>

<span class="helper"></span>
        
        </nav>
    </div>
</div>

View attachment 20098

vbt.dongnguyen · 12/9/14

Đây bạn thêm vào template navigation.css đoạn css này:
#navigation {
background-color: #2E6BA4 !important;
}

Bcat9505 · 12/9/14

background-color: #2E6BA4 !important;
!important; là gì vậy bạn?

Cts · 12/9/14

vbt.dongnguyen said: ↑

Đây bạn thêm vào template navigation.css đoạn css này:
#navigation {
background-color: #2E6BA4 !important;
}
Click to expand...

Cảm ơn bạn nhé, mình lấy đoạn background-color: #2E6BA4 !important; chèn vô đoạn về navtab mới được như ý.

vbt.dongnguyen · 12/9/14

Bcat9505 said: ↑

background-color: #2E6BA4 !important;
!important; là gì vậy bạn?
Click to expand...

Hiểu nôm na là Ưu tiên đó bạn.
Ví dụ trong toàn CSS bạn có 2 cái CSS trùng nhau
.CSS1 {
backgroud: #000;
}
CSS1 {
backgroup: #FFF;
}
Thì khi thêm lệnh !important; ở chổ nào là chổ đó sẽ ưu tiên hiển thị.
Ví dụ ta thêm !important; background FFF thì nó sẽ hiển thị màu trắng ưu tiên thay vì màu đen ở dòng CSS trên

Bcat9505 · 12/9/14

vbt.dongnguyen said: ↑

Hiểu nôm na là Ưu tiên đó bạn.
Ví dụ trong toàn CSS bạn có 2 cái CSS trùng nhau
.CSS1 {
backgroud: #000;
}
CSS1 {
backgroup: #FFF;
}
Thì khi thêm lệnh !important; ở chổ nào là chổ đó sẽ ưu tiên hiển thị.
Ví dụ ta thêm !important; background FFF thì nó sẽ hiển thị màu trắng ưu tiên thay vì màu đen ở dòng CSS trên
Click to expand...

Nghĩa là nó là nhất và KHÔNG ĐỔI hihi

Thanh Navbar bị mất màu so với bản gốc?

Cts Member

vbt.dongnguyen Member

Bcat9505 Moderator Staff Member

Cts Member

vbt.dongnguyen Member

Bcat9505 Moderator Staff Member

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất