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

Help - Integrating alerts

Discussion in 'XenForo Questions and Support' started by Brant, Apr 28, 2011.

  1. Brant

    Brant Member

    Hey all.

    Just wondering if someone would be able to help me incorporate alerts some how into my theme. All I want is a statement that changes the font color of the 'Profile' tab. And, then the font color of the of whats been alerted. I'm terrible with that kind of coding, my knowledge goes as far as html and css.

    Like this:
    header.JPG header2.jpg

    This is the html
    HTML:
    <div align=center>
    <ul id="navigation" class="nav-main">
        <li class="list"><a href="#">Home</a>
        <ul class="nav-sub">
            <li><a href="http://ragebarrelgaming.net/">Front Page</a></li>
            <li><a href="http://ragebarrelgaming.net/community/">Forum index</a></li>
        </ul>
        </li>
    <xen:if is="{$visitor.user_id}">
        <li class="list"><a href="#">Members</a>
        <ul class="nav-sub">
            <li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
            <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li>
        </ul>
        </li>
    <li class="list"><a href="{xen:link members, $visitor}">Profile</a>
        <ul class="nav-sub">
        <li><a href="http://ragebarrelgaming.net/community/index.php?account/personal-details">Edit</a></li>
        <li><a href="http://ragebarrelgaming.net/community/index.php?account/alerts">Alerts</a></li>
        <li><a href="http://ragebarrelgaming.net/community/index.php?conversations/">Mail</a></li>
        <li><a href="XEN SYNTAX??">Logout</a></li>
        </ul>
        </li>
    </ul>
    </xen:if>
    </div>
    And the CSS:

    Code:
    #navigation {
        margin:0;
        padding: 0;
        clear:both;
        width:950px;
        height:51px;
        background: #d6eaf8 url(images/dropdown-bg.jpg) repeat-x left top;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
    }
    
    ul.nav-main,
    ul.nav-main li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    ul.nav-main {
        position: relative;
        z-index: 597;
    }
    
    ul.nav-main li:hover > ul {
        visibility: visible;
    }
    
    ul.nav-main li.hover,
    ul.nav-main li:hover {
        position: relative;
        z-index: 599;
        cursor: pointer;
        background: url(images/dropdown-bg-hover.jpg) repeat-x left top;
            border-top-left-radius: 10px;
    }
    
    ul.nav-main li {
        float:left;
        display:block;
        height: 51px;
        color: #ffdf81;
        font: 12px Trebuchet MS;
    }
    
    ul.nav-main li a {
        display:block;
        padding: 16px 16px 0 16px;
        height: 35px;
        color: #ffdf81;
        font: 12px Trebuchet MS;
        text-decoration:none;
    }
    
    ul.nav-main li a:hover {
        color:#fff881;
            text-decoration:none;
    }
    
    ul.nav-main *.list {
        padding-right: 22px;
        background: url(images/navigation-arrow.gif) no-repeat right top;
    }
    
    ul.nav-sub {
        visibility: hidden;
        position: absolute;
        padding:0px;
        top: 48px;
        left: 0;
        z-index: 598;
        background: #353535 url(images/dropdown-list-bg.jpg) repeat-x left top;
    
    }
    
    ul.nav-sub li {
        list-style:none;
        display:block;
        padding: 0;
        height: 27px;
        float: none;
        width:145px;
        background: none;
    }
    
    ul.nav-sub li a {
        list-style:none;
        display:block;
        padding: 6px 5px 6px 5px;
        height: 15px;
        float: none;
        width:145px;
        background: none;
        font: 12px Trebuchet MS;
    }
    If theres an easier way to incorporate it, let me know. Thanks!

    Oh ya, what is the Logout Xen syntax? thanks

    ragebarrelgaming.net
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This is the relevant code from the default navigation_visitor_tab template:

    Code:
    			<xen:if is="{$visitor.alerts_unread}">
    				<strong class="itemCount" id="AlertsMenu_Counter">{xen:number $visitor.alerts_unread}
    					<span class="arrow"></span>
    				</strong>
    			</xen:if>
    
    You can use the same xen:if condition to specify custom markup if there are unread alerts.

    Here is the logout code from the default navigation_visitor_tab template:

    Code:
    	<li class="navTab PopupClosed"><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut navLink visitorTabItem">{xen:phrase log_out}</a></li>
    
     

Share This Page