O que é bom pode ficar melhor … o seu blog não será o mesmo após esse artigo! São 40 códigos css para você turbinar ainda mais o OptimizePress!
Se você estiver usando OptimizePress 2.0 e quiser personalizar o estilo do seu blog, você provavelmente sabe que não há nenhuma maneira mais simples de fazer isso, especialmente se você não é um programador.
Neste artigo, vou compartilhar os 40 códigos CSS mais solicitados que você pode usar para personalizar o seu blog.
Adicione o código que você deseja em: Configurações de Blog → Configurações Globais → CSS Personalizado:
Customizar Navegação do Blog
#1 Alterar Tamanho do Logo
.banner .op-logo img {
max-width: 200px; /* Padrão 250px */
}
#2 Alterar Espaçamento Superior e Inferior do Logo
.banner .op-logo {
padding: 25px 0; /* Padrão 40px */
}
#3 Alterar a Margem Superior do Menu de Navegação
body #nav-side.navigation #navigation-alongside {
margin-top: 25px; /* Padrão 40px */
}
#4 Editar o Espaçamento Lateral dos Links do Menu
/* Menu principal */
body .navigation ul li a {
line-height: 1em; /* Padrão 1.1em */
padding: 0.5em 1.1em; /* Padrão 1.1em 1.2em */
text-decoration: none;
}
/* Sub-menu */
body .navigation ul ul li a {
height: auto;
min-width: 120px; /* Padrão 180px */
padding: 0.5em 1.1em; /* Padrão 1.2em 1.5em */
text-align: left;
}
#5 Mudar Cor de Fundo do Menu de Navegação Quando o Mouse Está em Cima
body #nav-side.navigation ul#navigation-alongside li:hover a {
background-color: #F5F5F5; /* Editar cor */
}
#6 Mudar o Tamanho do Banner ou Cabeçalho
.banner .banner-logo {
height:145px; /* Editar px */
}
#7 Alterar Altura do Menu de Navegação Abaixo do Banner ou Cabeçalho
/* Menu principal */
body .navigation ul li a {
line-height: 1em; /* Padrão 1.1em */
padding: 1em 1.2em; /* Padrão 1.1em 1.2em */
text-decoration: none;
}
/* Sub-menu */
body .navigation ul ul li a {
height: auto;
min-width: 120px; /* Padrão 180px */
padding: 1em 1.2em; /* Padrão 1.2em 1.5em */
text-align: left;
}
#8 Centralizar o Menu de Navegação Superior ou do Rodapé
body .navigation ul {
text-align: center;
}
body .navigation ul li {
float: none;
display: inline-block;
text-align: center;
}
body .container .navigation ul {
text-align: center;
}
body .container .navigation ul li {
float: none;
display: inline-block;
text-align: center;
}
#9 Alterar o Fundo Quando o Mouse Está Ativo do Menu de Navegação do Topo
body #nav-top.navigation ul#navigation-above li:hover a {
background-color: #F5F5F5; /* Editar cor */
}
#10 Alterar o Tamanho do Menu de Navegação do Topo
body #nav-top.navigation ul li a, body #nav-top.navigation ul ul li a {
line-height: 1.1em; /* Padrão 1.1em */
padding: 1.2em 1.2em; /* Padrão 1em, 1.2em */
}
#11 Alinhar o Menu de Navegação do Topo a Direita
body .navigation ul#navigation-above li {
float: right;
}
#12 Esconder Imagem do Banner/Cabeçalho
.banner {
display: none;
<p style="padding: 0px; margin: 0px 0px 1.1em; border: 0px; font-size: 16px; font-