Detalhes da questão

Endereço do fórum: http://seriesbra.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá,

eu estou personalizando a barra de ferramentas do forumeiros via CSS, mantendo os créditos é claro. Eu consegui colocar um ícone ao lado de "Bem-vindo Admin", mas não estou conseguindo colocar ao lado das Notificações. Print:


Código do CSS referente a barra de navegação:

Código:

#fa_toolbar{background-color:#CD0000;
    border-bottom:7px solid #CD0000;
    border-top:1px solid #333;
    box-shadow:0 1px black, 0 2px 1px rgba(0,0,0,.4);
    font-family:'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:12px;
    font-style:normal}

    #fa_toolbar a{text-decoration:none!important}

    #fa_search #fa_textarea{-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2) inset;
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2) inset;
    background-color:#8B0000;
    background-image:url(http://i78.servimg.com/u/f78/17/96/03/52/search10.png);
    background-position:4px center;
    background-repeat:no-repeat;
    border:1px solid #8B0000;
    border-radius:0!important;
    box-shadow:0 2px 4px rgba(0,0,0,0.2) inset;
    color:#979DA7}

    #fa_right{margin-right:50px}

    #fa_right a.rightHeaderLink:first-child,#fa_right.welcome #fa_menu #fa_welcome,#fa_welcome{background:-moz-linear-gradient(#CD0000,#232B2B);
    background-attachment:scroll;
    background-image:-webkit-linear-gradient(#CD0000,#CD0000);
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    box-shadow:0 1px 0 #CD0000 inset;
    color:#f0f0f0!important;
    padding:0 5px;
    text-shadow:1px 1px #8B0000}

    #fa_menulist,#notif_list{-moz-border-radius:0 0 6px 6px;-moz-box-shadow:0 5px 7px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 5px 7px rgba(0,0,0,0.4);
    background:-moz-linear-gradient(#FFFFFF,#EDEDED);
    background-image:-webkit-linear-gradient(#FFFFFF,#EDEDED);
    border-radius:0 0 6px 6px;
    box-shadow:0 5px 7px rgba(0,0,0,0.4)}

    #fa_hide,#fa_magnifier,#fa_share,#fa_toolbar_hidden{display:none!important}
    .mini_ava img {
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    background: #fff;
    border: 1px solid #D5D5D5;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    height: 36px;
    margin: 0 5px;
    padding: 1px;
    width: 36px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    float: right;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
background: #8B0000;
border: 1px solid #8B0000;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
margin-top: 3px;
background-image: url(http://i.imgur.com/6vtRpv0.png);
background-repeat: no-repeat;
background-position: 100% 40%;
padding-right: 30px;
}
#fa_toolbar #fa_right #notif_list li.see_all a {
background-image: url(http://i.imgur.com/q8KOgBu.png);
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 10px;
width: 140px !important;
}
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}
#fa_right a.rightHeaderLink {
margin-left: 10px;
vertical-align: top;
line-height: 30px;
color: #FFFFFF;
border: 1px solid #8B0000;
padding: 0px 5px 0px 5px;
background: #8B0000;
color: #fff;
margin-top: 3px;
}

Acho que há algo de errado no código ou alguma informação que esqueci. O ícone que gostaria de colocar ao lado de Notificações é: https://i.imgur.com/YgXineA.png

Ele está dentro do código, no seguinte local:

Código:

#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}

Olá, boa noite;

Para obter o melhor resultado possível, precisaria que o senhor nos fornecesse uma conta de testes em seu fórum. Saliento também que essa conta não pode ter privilégios administrativos e/ou moderativos.

o/

Nome de usuário: testeajuda
senha: teste123

No seu segundo código, tente mudar o background-position: 15px 0px; para background-position: 0;. Lembre-se que pelo seu código, o ícone só aparecerá quando houver notificações não lidas.

Olá, eu não sabia desse detalhe pois não entendo muito de código. Como eu faria então para que o ícone de Notificações fosse fixo para aparecer? Tanto se não houver notificações lidas tanto se houver.

Obrigado.

Você tem este código, certo?

Código:

#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}

Troque-o por:

Código:

#fa_notifications {
  padding-right: 25px !important;
  background-image: url(http://i.imgur.com/YgXineA.png) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}

De preferência coloque-o ao final de sua Folha de Estilos, para que ele tenha prioridade.

o/

Deu certo amigo, agora só precisamos acertar o seguinte:

Quando clico na aba de Bem-vindo, o ícone some e o fundo volta pra cor da barra de ferramentas.


E quando clico na aba de Notificações, o ícone não some, continua e ele mantém a cor escura no fundo.


Aí quero saber como eu faço, o que ficar mais fácil pra você: fazer com que o ícone do bem-vindo não desapareça quando clicar e o fundo continue escuro ou fazer com que quando clicar em notificações o ícone suma e o fundo fique da cor da barra (mais claro), qualquer uma das duas estou aceitando. Só quero igualar os dois.

Ambos são fáceis. Eu optei por igualar os dois, mas caso o senhor prefira a outra alternativa, fique à vontade para que possamos fazê-la.
Enfim, adicione o código a seguir ao final de sua Folha de Estilos CSS:

Código:

.notification #fa_notifications {
  padding-right: 6px !important;
  background-image: none !important;
  background-color: #cd0000 !important;
}

o/

Perfeito! Agora só me ajude a colocar a borda na aba da notificações para igualar com o bem-vindo. Eu tentei usar borde-radius mas sem sucesso.

Muitas vezes temos que usar o !important quando estamos a estilizar elementos da barra de ferramentas.
Adicione o código a seguir ao final de sua CSS:

Código:

#fa_notifications {
  border-radius: 3px !important;
  border: 1px solid #8B0000;
}

o/

Certo. Muito obrigado, resolvido!