JScript

Programação & Desenvolvimento


Barra IPBoard apenas em CSS!

JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Barra IPBoard apenas em CSS! Empty Barra IPBoard apenas em CSS!

Mensagem por JScript em Sab 07 Mar 2015, 10:01 am

Olá pessoal!

Pra quem gosta do visual IPBoard, ai vai um CSS que modifica os links do usuário na barra:
Código:

#fa_welcome::after {
  content: "\25BC";
  font-size: 10px;
  margin-left: 5px;
  text-decoration: none;
}
#fa_menulist, #notif_list {
  background: -moz-linear-gradient(center top , #fff 0%, #f6f6f6 70%, #ededed 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: medium none !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);
  line-height: inherit !important;
  overflow: hidden;
  padding: 10px !important;
  width: 340px !important;
}
#notif_list {
  min-height: 58px;
  width: 100%;
}
#fa_usermenu {
  float: left !important;
  padding: 0 !important;
  position: relative !important;
  text-align: left !important;
  width: auto !important;
}
#fa_usermenu img {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #d5d5d5;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 50px;
  max-height: 50px !important;
  max-width: 50px !important;
  padding: 1px;
  vertical-align: middle;
  width: 50px;
}
#fa_ranktitle {
  margin-left: -70px;
  margin-top: 60px;
  position: absolute;
}
#fa_menulist > li {
  float: left;
  margin: 3px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
  width: 50%;
}
#fa_usermenu > table {
  float: right;
  margin-bottom: 28px;
  margin-left: 4px;
  margin-right: 8px;
}
#fa_toolbar #fa_right .fa_separator {
  width: 100%;
}

#fa_notifications::before {
  content: "\2709";
  font-size: 22px;
  letter-spacing: normal;
}
#fa_notifications {
  float: left !important;
  letter-spacing: -999px;
  text-align: center;
  width: 50px;
}
#notif_unread {
  letter-spacing: normal;
  margin: 0 5px 0 0 !important;
  vertical-align: top;
}
#notif_list > li:nth-of-type(1):not(.see_all) {
  margin-top: 32px !important;
}
#notif_list li.see_all::before {
  color: #595959;
  content: "Notificações";
  font-size: 16px;
  position: absolute;
  top: 10px;
}
#notif_list li.see_all {
  background-color: transparent !important;
  border-bottom: 1px solid #ececec;
  position: absolute;
  top: 10px;
  width: 90% !important;
}
#notif_list li.see_all::after {
  color: #777;
  content: "Você não tem notificações!";
  left: 6px;
  position: absolute;
  top: 38px;
  z-index: 0;
}
#notif_list li:not(.see_all) + .see_all::after {
  display: none;
}
#notif_list li.see_all a {
  color: #595959 !important;
}

Você poderá traduzir o que está no item content: "para o seu idioma"; respeitando o que está em negrito!

Resultado:
Barra IPBoard apenas em CSS! FSRbrHC
Barra IPBoard apenas em CSS! XsEWieu

Agradeço a ajuda de nosso amigo @Wagner,

JS


Última edição por JScript em Sab 21 Mar 2015, 6:41 pm, editado 1 vez(es) (Razão : Correção no código!)



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Barra IPBoard apenas em CSS! Empty Re: Barra IPBoard apenas em CSS!

Mensagem por waghcwb em Sab 07 Mar 2015, 10:17 am

@JScript,

Muito bom!! CSS tem muitos "poderes" ainda ocultos hahahahaha. Gosto muito de usar ele aliado ao Javascript, mas com as evoluções que vem surgindo, fica cada vez mais fácil usar apenas CSS cheers



The quieter you become, the more you are able to hear

Barra IPBoard apenas em CSS! Btn_viewmy_160x25_pt_BR



study
DiogoR.
DiogoR.
Membro
Membro

Time Online : 325d 4h 18m 58s
Mensagens : 93
Data de inscrição : 03/03/2015

Barra IPBoard apenas em CSS! Empty Re: Barra IPBoard apenas em CSS!

Mensagem por DiogoR. em Sab 21 Mar 2015, 4:17 pm

Reparei num erro que você certamente enganou-se ao postar o tutorial.

Veja como fica no meu fórum:
Barra IPBoard apenas em CSS! QOtDqYF

Isso deve-se a dois erros no CSS, veja:
Código:
#fa_welcome::after {
  content: "\\25BC";
  font-size: 10px;
  margin-left: 5px;
  text-decoration: none;
}

Se reparar está assim : \\25BC e devia de estar assim : \25BC

Código:
#fa_notifications::before {
  content: "\\2709";
  font-size: 22px;
  letter-spacing: normal;
}

Se reparar está assim : \\2709 e devia de estar assim : \2709

(Editado!)

E assim sim, o verdadeiro resultado:
Barra IPBoard apenas em CSS! QKCmXxb

Espero ter ajudado.


Última edição por JScript em Sab 21 Mar 2015, 6:42 pm, editado 1 vez(es) (Razão : Editado!)
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Barra IPBoard apenas em CSS! Empty Re: Barra IPBoard apenas em CSS!

Mensagem por JScript em Sab 21 Mar 2015, 6:42 pm

Obrigado pela correção amigo, o código já foi atualizado!

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...



Conteúdo patrocinado

Barra IPBoard apenas em CSS! Empty Re: Barra IPBoard apenas em CSS!

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 3:06 pm