Menu Personalizado

Detalhes da questão

Endereço do fórum: testealrpg.forumeiros.com
Versão do fórum: PunBB

Descrição

Olá pessoal, tentei fazer por mim mesmo mais não deu certo, vim aqui pedir ajuda.
Fórum onde vi : http://www.brasilplayfatal.com/forum

Queria esse menu no topo do meu fórum: https://i.imgur.com/X414NST.png?1 (Logado)

https://i.imgur.com/8vLsuyx.png?1 (Deslogado)

Códigos que uso:

Overall_Header :

Código:

    <!-- INICIO BARRA CEPHEUS-->
    <div id="cp_Barra">
        <div id="cp_opcoes">
            <ul class="cp_opcoes">
                <!-- BEGIN switch_user_logged_out -->
                <!-- FORA DA CONTA -->
                <!-- END switch_user_logged_out -->
                <!-- BEGIN switch_user_logged_in -->
              <i><a href="/profile?mode=editprofile&page_profil=informations">Editar Perfil</a></i>
              <i><a href="/privmsg?folder=inbox"><img src="https://i56.servimg.com/u/f56/17/97/98/69/yymnyc10.png" /></a>
              </i>
              <i><a href="/profile?mode=editprofile&page_profil=notifications"><img src="https://i56.servimg.com/u/f56/17/97/98/69/gyfvip11.png" /></a>
              </i>
                 
            </ul>
   

            <!-- END switch_user_logged_in -->
        </div>
    </div>
    <!-- FINAL BARRA CEPHEUS-->

CSS:

Código:

    #cp_Barra {
      background-color: #0d1721;
      width: 100%;
      height: 32px;
    }
    #cp_opcoes {
      float: right;
      margin: 0 50px;
    }
    ul.cp_opcoes {
      color: #fff;
      font-family: "Arial";
      font-size: 13px;
      list-style-type: none;
      display: table;
    }
    #cp_opcoes a {
      color: #fff!important;
    }
    #key_cp, #eye_cp, #user_cp, #envelope_cp, #shopping_cp, #folder_cp {
      width: 28px;
      line-height: 18px;
      text-align: center;
    }
    #key_cp:hover, #eye_cp:hover, #user_cp:hover, #envelope_cp:hover, #shopping_cp:hover, #folder_cp:hover {
      opacity: 0.85;
      filter: alpha(opacity =85);
    }
[data-counter]:after {
  background: #00bfa5;
  background-clip: padding-box;
  border-radius: 50%;
  color: #fff;
  content: attr(data-counter);
  font-family: "Arial",sans-serif;
  font-size: 5px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  height: 8px;
  min-width: 8px;
  line-height: 8px;
  margin-left: -10px;
  margin-top: 8px;
  padding: 5px;
  position: absolute;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}


Olá,

Troque a peça do overall_header que passou por essa:

Código:

<!-- INICIO BARRA CEPHEUS-->
<div id="cp_Barra">
   <div id="cp_opcoes">
      <ul class="cp_opcoes">
         <!-- BEGIN switch_user_logged_out -->
         <li>
            <a href="/login" class="cp_guest">
               <img src="http://i.imgur.com/0ns7zBy.png" /> Login
            </a>      
         </li>
         <li>
            <a href="/register" class="cp_guest">
               <img src="http://i.imgur.com/W4pPjOe.png" /> Cadastre-se
            </a>
         </li>            
         <!-- END switch_user_logged_out -->
         <!-- BEGIN switch_user_logged_in -->
         <li>
            <a href="/profile?mode=editprofile&page_profil=avatars" class="cp_avatar">
               <script type="text/javascript">document.write(_userdata.avatar);</script>
            </a>
         </li>
         <li>
            <a href="/profile?mode=editprofile&page_profil=informations">Perfil</a>
         </li>
         <li>
            <a href="/privmsg?folder=inbox" class="cp_icon cp_inbox"></a>
         </li>
         <li>
            <a href="/profile?mode=editprofile&page_profil=notifications" class="cp_icon cp_notice"></a>
         </li>
         <li>
            <a href="/login?logout=1">Sair do Fórum</a>
         </li>
         <!-- END switch_user_logged_in -->
      </ul>
   </div>
</div>
<!-- FINAL BARRA CEPHEUS-->

E o CSS que passou por esse:

Código:

#cp_Barra {
  background-color: #0d1721;
  width: 100%;
  height: 32px;
}

#cp_opcoes {
  float: right;
  margin: 0 50px;
}

.cp_opcoes {
  color: #fff;
  font-family: "Arial";
  font-size: 13px;
  list-style-type: none;
  display: initial;
  height: 32px;
}

.cp_opcoes li {
  display: block;
  float: left;
  border-right: 1px #666 solid;
}

.cp_opcoes a {
  display: initial;
  text-decoration: none;
  display: block;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  transition: 250ms ease background-color;
}

.cp_opcoes a:hover,
.cp_opcoes a:focus {
  background-color: #333;
}

.cp_opcoes a.cp_icon {
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  height: 32px;
  width: 20px;
}

.cp_inbox {
  background-image: url(https://i56.servimg.com/u/f56/17/97/98/69/yymnyc10.png);
}

.cp_notice {
  background-image: url(https://i56.servimg.com/u/f56/17/97/98/69/gyfvip11.png);
}

.cp_avatar img {
  height: 100%;
}

.cp_guest img {
  vertical-align: middle;
  margin-right: 3px;
}

#cp_opcoes a {
  color: #d9d9d9 !important;
}

#key_cp,
#eye_cp,
#user_cp,
#envelope_cp,
#shopping_cp,
#folder_cp {
  width: 28px;
  line-height: 18px;
  text-align: center;
}

#key_cp:hover,
#eye_cp:hover,
#user_cp:hover,
#envelope_cp:hover,
#shopping_cp:hover,
#folder_cp:hover {
  opacity: 0.85;
  filter: alpha(opacity =85);
}

[data-counter]:after {
  background: #00bfa5;
  background-clip: padding-box;
  border-radius: 50%;
  color: #fff;
  content: attr(data-counter);
  font-family: "Arial",sans-serif;
  font-size: 5px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  height: 8px;
  min-width: 8px;
  line-height: 8px;
  margin-left: -10px;
  margin-top: 8px;
  padding: 5px;
  position: absolute;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

^-^

Perfeito, agora teria como também deixar sempre quando uma pessoa descer a página ela vir junto ?

Adicione ao CSS:

Código:

#cp_Barra {
    position: fixed;
    z-index: 101;
    top: 0;
}

#header {
    padding-top: 32px;
}

^-^

Perfeito, bem assim que eu queria.

Se não se importar teria como adicionar o nome "American Life - RPG" no canto esquerdo << ?? dum tamanho já maiorzinho.

Se não for incomodo

Troque a parte do overall_header por esse:

Código:

<!-- INICIO BARRA CEPHEUS-->
<div id="cp_Barra">
   <a href="/" class="cp_title">American Life - RPG</a>
   <div id="cp_opcoes">         
      <ul class="cp_opcoes">
         <!-- BEGIN switch_user_logged_out -->
         <li>
            <a href="/login" class="cp_guest">
               <img src="http://i.imgur.com/0ns7zBy.png" /> Login
            </a>
         </li>
         <li>
            <a href="/register" class="cp_guest">
               <img src="http://i.imgur.com/W4pPjOe.png" /> Cadastre-se
            </a>
         </li>
         <!-- END switch_user_logged_out -->
         <!-- BEGIN switch_user_logged_in -->
         <li>
            <a href="/profile?mode=editprofile&page_profil=avatars" class="cp_avatar">
               <script type="text/javascript">document.write(_userdata.avatar);</script>
            </a>
         </li>
         <li>
            <a href="/profile?mode=editprofile&page_profil=informations">Perfil</a>
         </li>
         <li>
            <a href="/privmsg?folder=inbox" class="cp_icon cp_inbox"></a>
         </li>
         <li>
            <a href="/profile?mode=editprofile&page_profil=notifications" class="cp_icon cp_notice"></a>
         </li>
         <li>
            <a href="/login?logout=1">Sair do Fórum</a>
         </li>
         <!-- END switch_user_logged_in -->
      </ul>
   </div>
</div>
<!-- FINAL BARRA CEPHEUS-->

E adicione ao CSS:

Código:

.cp_title {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  line-height: 32px;
  height: 32px;
  padding: 0 10px;
  margin-left: 30px;
  display: block;
  float: left;
  transition: 250ms ease background-color;
}

.cp_title:hover {
  background-color: #666;
}

^-^

Ficou simplesmente Pika! Obrigado maninho