1. Spirit Fanfics >
  2. Membros >
  3. mikozun

mikozun

Sexo: Feminino
Localização: Fortaleza - CE
Aniversário: 3 de Junho
Cadastro:

10 Códigos legais pro seu style

Postado

10 Códigos legais pro seu style

(ignorem a imagem feinha eu estava com zero vontade de fazer algo mais caprichado quem sabe eu mude depois)



Olá, acontece que recentemente venho recebendo muitas mensagens pedindo códigos e algumas delas são muito semelhantes no que querem então eu resolvi postar um jornal maroto reunindo alguns dos que me são mais pedidos e também alguns outros, não apenas pra facilitar o meu trabalho, mas também pra ajudar alguém que posteriormente possa se interessar por algum deles.




1 – “Como faço pra concertar o bug transparente na nav mobile?”
Pra muita gente que nem repara nesses errinhos isso pode parecer até estranho, mas acontece que sempre que usamos branco na nav do style ocorre um probleminha, isso acontece porque a nav diminui de tamanho quando vai pro mobile (pra se adequar a tela e funcionar direitinho) e ai um botão escrito “mais” é aidiconado quando clicamos nele os restante dos itens da nav aparecem em um submenu, acontece que esse “submenu” tem um fundo branco e quando colocamos as letras brancas elas não aparecem e dá a impressão que não tem nada ali, segue um exemplo:

E pra arrumar isso é bem simples, você só precisa adicionar o código a seguir bem embaixo do } que fecha a parte do cimalogo.

Mostrar Spoiler: Código pra arrumar a nav "transparente"
#nav .dropdown-menu > li > a {
color: #xxx!important;
background: #xxx!important;
text-shadow: 0px 0px 0px transparent; box-shadow: 0px 0px 0px transparent inset;
} #nav .dropdown-menu > li > a:hover {
color: #ccc!important;
background: #xxx!important;
text-shadow: none!Important; box-shadow:none!Important;
}

Lembre-se de substituir o “xxx” pelas cores que você quer certo?




2- “Como faço pra subir o menu do usuário?”
Quando digo o menu do usuário estou me referindo a essa parte de “perfil, amigos, atualizações, etc”


Existem dois códigos que podem ser usados pra mexer nessa parte sendo eles:
Mostrar Spoiler: Código 1
#boxUsuario .baixo ul {
position:relative!important;
top:-XXXpx!important;
}

E
Mostrar Spoiler: Código 2
#boxUsuario.boxConteudo .baixo{
top:-XXXpx;
}

Pessoalmente eu uso mais o primeiro, mas os dois tem basicamente a mesma função!




3- “Como posso deixar os dois primeiros botões da nav diferentes do restante?”



Mostrar Spoiler: Código pros botões da nav
#nav li:first-child a{
color:#XXX;
background-color:#XXX;
border:1px solid #XXX;
} #nav li:nth-child(2) a{
color:#XXX;
background-color:#XXX;
border:1px solid #XXX;
}


Caso você queira mudar mais um botão ou fazer uma nav arco-íris por exemplo é só você adicionar outro desses mudando a numeração por exemplo:
#nav li:nth-child(3) a{
color:#XXX;
background-color:#XXX;
border:1px solid #XXX;
}






4- “Como deixo o icon redondo?”


Mostrar Spoiler: Código pra deixar o icon redondo
.boxConteudo #cphTopo_imgUsuarioAvatar {
border-radius: 100%;
padding-top: 0px!important;
border: 3px solid #XXX!important;
background: #XXX!important;
position: relative;
}

Como pode ver esse código também ajuda você a colocar a bordinha ao redor do icon >.<




5- “Como mudar a fonte da parte do perfil?”


Mostrar Spoiler: Código pra mudar a fonte das informações do usuário
.boxConteudo .informacoes{
top:17px;
position:relative;
color: #XXX;
text-shadow: 1px 1px 0px #XXX;
font-family: Calibri!important;
font-size:10px!important;
letter-spacing:0.01cm;
font-weight:bold!important;
padding: 8px;
border:none;
text-align:left!important;
}

Você pode mexer em todo o texto dessa parte com esse código!




6- “Como mudo o fundo do perfil do usuário sem mudar o fundo da descrição em baixo?”
Segue um exemplo bonitinho pra ilustrar melhor essa dúvida.



Mostrar Spoiler: Código pra alterar o fundo do box de informações
#boxUsuario.boxConteudo .textoBg1,#boxUsuario.boxConteudo tr.textoBg1 td {
background-color: #XXX;
border-left: 6px solid #XXX;
border-radius:0px;
color: #XXX;
}

Usando esse código você modifica apenas o fundo da parte de cima sem mexer na de baixo >.<




7- “Como deixo um espaço em baixo do perfil?”
Mais uma imagem pra ilustrar melhor:


Mostrar Spoiler: Código pra deixar o espacinho
.boxConteudo .baixo-perfil{
margin-top: 60px;
margin-bottom:160px!important;
position:relative;
top: 150px!important;
}

Você pode ir alterando os valores e vendo qual se encaixa melhor no seu modelo.




8- “Como mudar a cor da fonte do adicionar da nav?”


Mostrar Spoiler: Código pra mudar o adicionar
/* ####################################################################### */
/* Botao Adicionar */
.btn-primary span,.btn-warning span,.btn-danger span,.btn-sucess span, btn-info span{
font-family: Calibri!important;
font-size: 10px!important;
font-weight: bold!important;
font-variant: small-caps!important;
text-transform: uppercase;
letter-spacing: 0.03cm;
color: #XXX!important;
} #nav .btn {
color: #XXX!important;
background:#XXX;
border-radius: 0px;
border:#XXX;
}

A primeira parte muda apenas a cor da fonte, e a segunda a cor do fundo, borda e afins.




9- “Como eu levo a secao nav mais pra baixo ou mais pra cima?”


Mostrar Spoiler: Código pra mexer na posição do secaonav
#secaoNav {
background: none;
border:none;
position: relative;
top:-70px;
}

Mais uma vez basta mexer no valor do top (mas tome cuidado)




10- Como adicionar palavras na frente dos títulos e do menu direito?


Mostrar Spoiler: Código pra palavrinha no título
.boxConteudo .titulo,.boxConteudo h1:after,.boxConteudo h2:after{
content:"palavra que vc quer";
background:#XXX;
color:#XXX;
font-style:italic;
font-size:13px;
}


Mostrar Spoiler: Código pra palavrinha no menudireito
.boxMenuDireito .tituloMenuDireito:before {
content: "palavra que vc quer";
background: #XXX;
color: #XXX;
}




Bônus: Hover simples no título e fundo do menu direito

Pra entender melhor como esse efeito funciona é só você dar uma olhada no menu direito (box de amigos)desse meu style.

Mostrar Spoiler: Hover pro título do menudireito
.boxMenuDireito .tituloMenuDireito:hover:before {
content: "palavra pra aparecer quando passar o mouse ";
background: #XXX;
color: #XXX;
}


Mostrar Spoiler: Hover pro fundo do menudireito
.boxMenuDireito .textoMenuDireito:hover {
background: #XXX;
transition: 4s;
}



Espero que esse jornal ajude alguém, estou sempre aqui pra dúvidas e ajuda, pra aprender alguns truques de modelo você pode visitar o aulas de style e caso precise de ajuda pode procurar a mim ou outro beta >.<

Permalink Comentários (26)

Atualizações do Usuário

Usuário: mikozun
medo de a faculdade me matar antes de eu conseguir me formar pq olha
Usuário: mikozun
to com uma dor de cabeça que só cristo
Usuário: mikozun
Adicionei um novo style css
Style: Watts
Style: Watts
Watts então gente aparentemente michelagenlo não é family friendly o suficiente nem censurado, por isso vamos de george frederic watts.
Usuário: mikozun
Favoritei o style
Style: Wolves roam these lands
Style: Wolves roam these lands
Elf Mostrar Spoiler: vini Oi genten, ~aqueles, depois de anos um feat novo e depois de anos um modelo pra esse style, mas é mais que compreensivel; quando eu fiz o banner e..
Usuário: mikozun
@mustangflames namoral viu tu n tem juizo