Endereço do fórum: http://olimpiadaenem.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Olá,
Quero personalizar a barra superior de meu fórum para que ela fique semelhante a do PdF, porém em cor mais escura, para combinar com o tema de meu fórum.
Para isso, a partir do estilo da barra do FdF preciso que sejam feitas as seguintes alterações:

1 - Escurecer a barra, a cor deve ser #2D3134;
2 - Remover botões de redes sociais;
3 - Escrever a palavra Forumeiros com a mesma fonte, porém na cor Branca;
4 - Escrever as informações como "Bem-vindo Usuário" e "Notificações" também com a cor Branca;
5 - As demais funções permanecem iguais.
Obs.: Não precisa se preocupar com a imagem do usuário que aparece nessa barra. Tenho um código funcionando, criado aqui no fdf, que faz essa função de inserir a foto.

Espero que seja possível atender meu pedido, aguardo ajuda!

Saudações!

Aceda à tua Folha de Estilo CSS:
Cpainel ->> Visualização ->> Gestão de imagens ->> Cores ->> Folha de Estilo CSS

Código:

#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}

Resulta?
Até mais.
Sennior

Funcionou parcialmente, o problema é que no meu fórum está a barra do tema padrão:


Então precisaria primeiro modificar ela para ficar igual a do fdf fazendo as alterações solicitadas.

Ou seja, o que tenho é a barra padrão acima e quero chegar em algo igual a barra do fdf com todas aquelas alterações que descrevi no 1º tópico.

Obs.: O itens 1 e 2 estão satisfeito com o uso dessa parte do código:
#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;

Olá amigo! Troque o código passado pelo Sennior por este:

Código:

#fa_toolbar {background-color:#2D3134!important;}
        #fa_share {display:none!important;}
        #fa_toolbar #fa_service {color: #fff!important;font-family: sans-serif;font-size: 16px;font-weight: 700;text-transform: uppercase;}
        #fa_right {color:#fff!important;}
       

Atenciosamente,
While.

While, leia minha última mensagem. O código não funcionou, é preciso modificar mais coisas...

Ah sim! Deseja como o FDF, só que com essas modificações né?
Troque por este código e veja como esta ficando:

Código:

#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #fff!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-left: -11px;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
    margin-right: 18px;
}
a#fa_hide {
    display: none!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png');
    width: 30px;
    height: 30px;
    cursor: pointer;
}

#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
a#fa_magnifier {
    position: absolute;
    left: 22pc;
}



Até mais.

Vou tentar explicar de modo mais detalhado.


Para começar, quero que aquele logo antigo seja substituído por esse em azul do canto esquerdo.
A palavra Forumeiros deve aparecer com esse mesmo estilo porém escrita em branca, pois o fundo será escuro, ao contrário do que acontece no fdf.
Além disso, quando passar o cursor sobre a palavra não deve aparecer o sublinhado, que insiste em aparecer um meu fórum.

A barra de busca deve ficar igual a do fdf apenas com o fundo escuro. Além disso, ela só deve aparecer por completo quando colocado o cursor sobre ela, assim como acontece aqui no fdf.

Em seguida,

Preciso que as informações abaixo estejam com uma "borda" em azul, assim como a figura abaixo, mas as escritas, que estão em azul devem ser brancas por causa do tema escuro.



Ao passar o cursor sobre esses "botões" eles devem ficar todo em azul, assim como acontece aqui no fdf.

Por fim a seta no canto direito. Ela precisa ficar ao contrário do que acontece aqui no fdf, ou seja, ser branca em condições normais mas ser preta com uma caixa em azul quando o cursos estiver sobre ela.

Com o último código que me passou o resultado é esse:


Encontrei um tópico em que o mesmo assunto foi debatido, mas o resultado obtido com o código fornecido lá também foi ruim. Mesmo assim, informo o link abaixo caso queira dar uma verificada. De repente pode ser uma boa maneira de conseguir resolver o meu problema... Não entendo muito de códigos, por isso deixo essa parte para os especialistas.

https://ajuda.forumeiros.com/t105096-barra-de-ferramentas?highlight=Barra+de+Ferramentas

Olá, troque o css passado pelo Sennior para este:

Código:

#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-left: -11px;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
    color:#fff!important;
    margin-right: 18px;
}
a#fa_hide {
    display: none!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png');
    width: 30px;
    height: 30px;
    cursor: pointer;
}
 
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
a#fa_magnifier {
    position: absolute;
    left: 22pc;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #3091C1!important;
    border-color: #3091C1!important;
    color: #FFF!important;
}
 

Resulta?
Atenciosamente,
While.

While, apenas os botões ficam em azul quando o cursos está sobre eles. O restante permanece sem as alterações que preciso.

#UP
Por favor, ajudem!

#UP

O que há de errado?

Boas!

Vamos lá, coloque agora este código.
Depois me diga o que quer mudar:

Código:

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
        #fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_toolbar #fa_service {
    display: inline-block !important;
    visibility: visible !important;
    text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
    color: #666666;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
    border: 1px solid transparent;
    border: none;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #FFFFFF;
    text-decoration: none;
}
#fa_service {
    color: #666!important;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
    color: #666666;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #39C!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}a#fa_hide {
    display: none!important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #444!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}

Até mais.
Sennior

Olá Sennior,
Obrigado por me responder, estava pensando que tinham desistido de meu problema.
A barra não ficou como desejo. Vejo que está sendo difícil solucionar os detalhes.

Por isso, tenho uma sugestão: Talvez seja melhor deixar a barra de meu fórum igual a do fdf e depois fazer as alterações necessárias.
O que você acha da ideia? Aguardo seus comentários.

#UP

Novidades! Usando o código abaixo obtive o efeito apresentado na imagem:

Código:

span#fa_share {
    display: none!important;
}

#fa_toolbar {background-color: #2D3134!important;}

#fa_icon {
    background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;
}

#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #FFFFFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

a#fa_service {
  color: #fff!important;
  font-family: sans-serif!important;
  font-size: 15px!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
}

#fa_right #fa_menu ul, #fa_right.notification #fa_menu ul {
    display: none;
}

#fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_search {
    margin-left: 20px;
    height: 30px;
}
#fa_search {
    position: relative;
}
#fa_search form {
    margin: 0;
    padding: 0;
    display: inline;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #39C!important;
    border-color: #39C!important;
    color: #FFF!important;
}

#forum-search .inputbox, #search .inputbox, #search_menu .inputbox, .inputbox.desc_search_input {
    background: #FFF;
    border: 1px solid #39C;
    border-radius: 3px 0 0 3px;
    height: 22px;
    margin-right: -2px;
    padding: 3px;
}

Apenas duas coisas precisam ser feitas ainda:

Deixar a barra de pesquisa com o mesmo efeito da barra do fdf, assim como aquelas setas que aparecem no canto direito para exibir/ocultar a barra de ferramentas.

Aguardo ajuda...

Boas!

Coloque este código no inicio d eteu CSS:

Código:

#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png')!important;
    width: 21px!important;
    height: 23px!important;
    cursor: pointer!important;
    background-position-x: -13pc!important;
    background-position-y: -3px!important;
}

Até mais.
Sennior

Sennior, o código não funcionou. Ficou mais estranho do que já estava...

#UP

Preciso que esse problema da seta no canto direito seja arrumado, em primeiro lugar.


Criei uma imagem com as setas adaptadas para o tema de meu fórum, talvez possa ajudar na solução do problema.


Aguardo ajuda!

Mas ué... Essa função já existe em te fórum autor.
Ao clicar sobre a seta ela esconde a barra de notificações.

O que deseja realmente?
Até mais.

A seta existe sim. Mas quero que quando o cursor fique sobre essa seta ela fique com uma borda azul, como na imagem da postagem anterior.

Boas!

Assim?

Código:

a#fa_hide:hover {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -31px 0 transparent!important;
    color: #FFF!important;
}


Até mais.

Sennior, funcionou parcialmente:



Quando a barra não está exibida não aparece a borda quando o cursor está sobre a seta.

O código que estou usando no momento é o seguinte:

Código:

span#fa_share {
    display: none!important;
}

#fa_toolbar {background-color: #2D3134!important;}

#fa_icon {
    background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;
}

#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.leftHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #FFFFFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

a#fa_service {
  color: #fff!important;
  font-family: sans-serif!important;
  font-size: 15px!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
}

#fa_right #fa_menu ul, #fa_right.notification #fa_menu ul {
    display: none;
}

#fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_search {
    margin-left: 20px;
    height: 30px;
}
#fa_search {
    position: relative;
}
#fa_search form {
    margin: 0;
    padding: 0;
    display: inline;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #39C!important;
    border-color: #39C!important;
    color: #FFF!important;
}
a#fa_hide:hover {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -31px 0 transparent!important;
    color: #FFF!important;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #444!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}

#fa_toolbar a:hover {
    text-decoration: underline;
}
#fa_toolbar_hidden {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    margin-top: -60px;
    background-color: #FFFFFF;
    border-radius: 0px 0px 5px 5px;
    z-index: 999;
}
#fa_toolbar_hidden {
    border: 1px solid #CCC;
    border-radius: 0!important;
    border-right: 0;
    border-top: 0;
}
.fa_fix {
    position: fixed !important;
    position: absolute;
    top: 0;
    right: 0;
}
#fa_hide, #fa_show {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat 0 0 transparent!important;
}
#fa_show {
    background-position: -60px 0!important;
}

Um outro problema que tenho observado é que quando um visitante acessa o fórum os botões "login" e "registre-se" deveriam ficar no mesmo estilo dos botões "bem-vindo user" e "notificações".



Teria como você fazer uma verificação disso também, por favor?

Olá, adicione mais esse código em sua folha de estilo css:

Código:

 a#fa_show:hover {
              background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -90px 0 transparent!important;
    color: #FFF!important;
        }
            a.rightHeaderLink {
                    background-color: transparent!important;
                    border: 1px solid #39C!important;
                    border-radius: 3px!important;
                    color: #fff!important;
                    font-size: 11px!important;
                    font-weight: 700!important;
                    line-height: 22px!important;
                    margin-top: 3px!important;
                    padding: 0 6px!important;
                    text-decoration: none!important;
                    transition: 200ms;
            }
a#fa_hide.rightHeaderLink {border:none!important;line-height:0px!important;padding:0px!important;margin-top:0px!important;transition:none!important;}

Até mais.

Obrigado while! Problema resolvido, pode encerrar o tópico.
Sennior, agradeço pela ajuda que me deu.
Ambos foram muito importantes para a obtenção desse resultado.
Novamente estou muito satisfeito com o obtido.