Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Kit avatar e assinatura.
Hoje à(s) 01:37 am por ranzatti

» Efeito nos grupos
Hoje à(s) 12:17 am por Matt Shultz

» PAGINA HTML
Hoje à(s) 12:08 am por T1ag0

» Concurso do Dia das Bruxas: Vossas participações
Ontem à(s) 11:05 pm por iScroll

» Logo fixo
Ontem à(s) 10:50 pm por iScroll

» Logo para um fórum
Ontem à(s) 10:36 pm por Hyouran

» Rank para o meu fórum
Ontem à(s) 10:33 pm por Matt Shultz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Matt Shultz
 
iScroll
 
Harleen
 
Ketholy123
 
T1ag0
 
PlayWillian
 
zHugh
 
soldado
 
Lecxa
 

Quem está conectado
187 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 186 Visitantes :: 2 Motores de busca

soldado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Personalizar barra de ferramentas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

Resolvido Personalizar barra de ferramentas

Mensagem por Flames em 27/07/17, 06:19 pm

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 é: http://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;
}
avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Luiz em 28/07/17, 05:09 am

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Flames em 28/07/17, 05:25 am

Nome de usuário: testeajuda
senha: teste123
avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Kyo Panda em 28/07/17, 08:37 am

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.


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5784

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Flames em 28/07/17, 04:13 pm

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.
avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Luiz em 28/07/17, 05:13 pm

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. Feliz

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Flames em 28/07/17, 06:13 pm

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.
avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Luiz em 28/07/17, 06:21 pm

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. Feliz
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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Flames em 28/07/17, 06:53 pm

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.

avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Luiz em 28/07/17, 06:59 pm

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Flames em 28/07/17, 07:09 pm

Certo. Muito obrigado, resolvido!
avatar

Flames
Nível 5

Masculino
Inscrito dia : 05/10/2011
Mensagens : 50
Pontos Ativos : 78

Ver perfil do usuário http://jornamice.com.br.tc

Resolvido Re: Personalizar barra de ferramentas

Mensagem por Luiz em 28/07/17, 07:29 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum