Como ter esta barra?

GyGu  • Qui 21 Mar 2013 - 11:52

Daemon  • Qui 21 Mar 2013 - 14:14

Re: Como ter esta barra? Qui 21 Mar 2013 - 14:14

Adicione ao css:

Código:

#nav_bar {
background: url("http://www.breatheheavy.com/exhale/public/style_images/animate/trans50.png") repeat;
background: rgba(0,0,0,0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: 32px;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
-webkit-box-shadow: rgba(255,255,255,0.25) 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,1) 0px 1px 4px;
-moz-box-shadow: rgba(255,255,255,0.25) 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,1) 0px 1px 4px;
box-shadow: rgba(255,255,255,0.25) 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,1) 0px 1px 4px;
}
#user_navigation {
color: #9f9f9f;
font-size: 11px;
line-height: 32px;
height: 32px;
float: right;
overflow: hidden;
}
ol, ul {
list-style: none;
}
#user_navigation .ipsList_inline li {
margin: 0;
padding: 0;
float: left;
}
.ipsList_inline>li {
display: inline-block;
margin: 0 3px;
}
#user_navigation a {
color: #fff;
float: left;
padding: 0 12px;
line-height: 32px;
outline: none;
height: 32px;
border-left: 1px solid rgba(255,255,255,0.1);
}
#user_navigation a:hover{background:url("http://www.breatheheavy.com/exhale/public/style_images/animate/trans30.png") repeat;background:rgba(0,0,0,0.3)}
#user_navigation #sign_in img, #user_navigation #register_link img {
vertical-align: middle;
position: relative;
margin: -1px 2px 0 0;
}
#primary_nav {
font-size: 11px;
float: left;
height: 32px;
font-weight: bold;
}
#community_app_menu>li {
margin: 0px;
position: relative;
}
#community_app_menu>li.active>a {
background: url("http://www.breatheheavy.com/exhale/public/style_images/animate/trans30.png") repeat;
background: rgba(0,0,0,0.3);
color: #fff;
position: relative;
}
#community_app_menu>li>a:hover, #community_app_menu>li>a.menu_active {
background: url("http://www.breatheheavy.com/exhale/public/style_images/animate/trans10.png") repeat;
background: rgba(0,0,0,0.1);
color: #fff;
}
#community_app_menu>li>a {
color: #cacaca;
color: rgba(255,255,255,0.7);
display: block;
outline: none;
padding: 0px 12px;
line-height: 32px;
height: 32px;
}
/*logado*/
#avatar img {
position: relative;
vertical-align: top;
padding: 0;
height: 24px;
width: 24px;
border: 1px solid #959595;
background: white;
padding: 1px;
}
#avatar {
  float: left;
}
#notify_link img, #inbox_link img {
width: 20px;
height: 20px;
background-repeat: no-repeat;
vertical-align: middle;
background-position: 0 0;
}

#notify_link, #inbox_link {
vertical-align: middle;
width: 20px;
padding: 0px 11px !important;
position: relative;
margin-top: 2px;
}

#inbox_link img {
background-image: url(http://www.ipbforumskins.com/skindemo/public/style_images/navia34x/icon_inbox.png);
}

#notify_link img {
background-image: url(http://www.ipbforumskins.com/skindemo/public/style_images/navia34x/icon_notify.png);
}

coloque em seu template "overall_header":

Código:

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
          <div id="nav_bar">
                  <!-- BEGIN switch_user_logged_out -->
                    <div id="user_navigation" class="not_logged_in">
                     
                     <ul class="ipsList_inline">
                        <li>
                                                                  <a href="/login" title="Sign In" id="sign_in"><img src="http://www.breatheheavy.com/exhale/public/style_images/animate/user_login.png" alt="" /> Sign In</a>
                        </li>
                        <li>
                                                                  <a href="/register" title="Create Account" id="register_link"><img src="http://www.breatheheavy.com/exhale/public/style_images/animate/user_register.png" alt="" /> Create Account</a>
                        </li>
                     </ul>
                  </div>
                  <!-- END switch_user_logged_out -->
                        <!-- BEGIN switch_user_logged_in -->
              <div id="user_navigation" class="logged_in">
                    <ul class="ipsList_inline">
                      <li>
                          <div id="avatar"><center></center></div>
                      </li>
                      <li><a id="user_link" href="/profile?mode=editprofile"><span id="user_link_dd" class="USERNAME"></span></a></li>                     
                      <li><a data-clicklaunch="getInboxList" id="inbox_link" href="/privmsg?folder=inbox" title="Messenger"><img src="http://www.ipbforumskins.com/skindemo/public/style_images/marble34x/clear.gif" alt="" />&nbsp;</a></li>
                      <li><a data-clicklaunch="getNotificationsList" id="notify_link" href="/search?search_id=watchsearch" title="Notifications"><img src="http://www.ipbforumskins.com/skindemo/public/style_images/marble34x/clear.gif" alt="" />&nbsp;</a></li>
                      <li><a href="/login?logout">Sign Out</a></li>                        
                       
                    </ul>
                </div>
                          <!-- END switch_user_logged_in -->
                   
      <div id="primary_nav" class="clearfix">
                <ul class="ipsList_inline" id="community_app_menu">
                 
<li id="nav_app_forums" class="left active"><a href="http://www.breatheheavy.com/exhale/" title="Go to Forums">Forums</a></li>

<li id="nav_app_members" class="left "><a href="http://www.breatheheavy.com/exhale/index.php?/members/" title="Go to Members">Members</a></li>

<li id="nav_app_ipchat" class="left "><a href="http://www.breatheheavy.com/exhale/index.php?/chat/" title="Go to Chat">Chat</a></li>

<li id="nav_app_shoutbox" class="left "><a href="http://www.breatheheavy.com/exhale/index.php?/shoutbox/" title="Go to Shoutbox">Shoutbox</a></li>

<li id="nav_app_ibEconomy" class="left "><a href="http://www.breatheheavy.com/exhale/index.php?app=ibEconomy" title="Go to BH Shop">BH Shop</a></li>

<li id="nav_home"><a href="http://www.breatheheavy.com/" title="Main" rel="home">Main</a></li>

<li id="nav_home"><a href="http://www.breatheheavy.com/xray" title="XRAY" rel="home">XRAY</a></li>

<li id="nav_home"><a href="mailto:breatheheavydotcom[@]gmail.com" title="Email" rel="home">Email</a></li>

<li id="nav_home"><a href="http://www.twitter.com/breatheheavycom" title="Twitter" rel="home">Twitter</a></li>

<li id="nav_home"><a href="http://www.facebook.com/pages/BreatheHeavycom/28130589240" title="Facebook" rel="home">Facebook</a></li>
                   
                </ul>
               
         </div>
           
         
                       
                </div>

Crie um js com investimento em todas as páginas com esse código:

Código:

jQuery(document).ready(function() {
jQuery('#avatar').before('<div id="avatar"></div> ');
});
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.frm dl dd img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><a href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt=""></a></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});

veja se resulta '.

GyGu  • Qui 21 Mar 2013 - 14:21

David¹  • Qui 21 Mar 2013 - 17:07

GyGu  • Qui 21 Mar 2013 - 17:47

Daemon  • Qui 21 Mar 2013 - 18:43

GyGu  • Qui 21 Mar 2013 - 20:06

Conteúdo patrocinado  •