40 Códigos CSS Programacao Web "Partilhando"

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;
}

#13 Esconder Menu de Navegação Abaixo do Banner/Cabeçalho

#nav-bottom {
display: none;
}

#14 Esconder Navegação do Topo

#nav-top {
display: none;
}

Personalizar Post do Blog

#15 Alterar a Cor do Título do Post

.latest-post h2 a, .older-post h4 a {
color: #0000FF; /* Editar cor */
}

#16 Alterar o Título do Artigo Quando o Mouse Estiver em Cima e Remover o Sublinhado do Título

.latest-post h2 a:hover, .older-post h4 a:hover {
color: #FF0000; /* Editar cor */
text-decoration: none; /* Padrão underline */
}

#17 Alterar Cor dos Links e a Cor Quando o Mouse em Cima

/* Cor do Link do Conteúdo */
.latest-post p a, .post-content p a, .older-post p a, .latest-post li a, .post-content li a, .older-post li a, .main-sidebar a {
color: #0000FF; /* Editar cor */
text-decoration: none;
}
/* Cor do Link com Mouse em cima */
.latest-post p a:hover, .post-content p a:hover, .older-post p a:hover, .latest-post li a:hover, .post-content li a:hover, .older-post li a:hover, .main-sidebar a:hover {
color: #FF0000; /* Editar cor */
text-decoration: underline;
}
/* Cor do Link do Comentário */
a, a:visited {
color: #0000FF; /* Padrão #2E82BC */
outline: 0 none;
text-decoration: none;
}
/* Cores dos Links dos Comentários com Mouse em Cima */
a:hover, a:focus {
color: #FF0000; /* Padrão #005800 */
outline: 0 none;
}
/* Categorias Sidebar, Cor do link d lista de páginas no widget */
.page-list li a, .widget_nav_menu li a, .widget_meta li a, .widget_categories li a, .widget_pages li a {
color: #0000FF; /* Padrão #202020 */
}
/* Categorias Sidebar, Cor do link d lista de páginas no widget com mouse em cima */
.page-list li a:hover, .widget_nav_menu li a:hover, .widget_meta li a:hover, .widget_categories li a:hover, .widget_pages li a:hover {
color: #FF0000; /* Editar cor */
}

#18 Alterar o Espaçamento do Texto do Título do Post

h1, h2, h3, h4, .main-content h4, .latest-post h2 a, .latest-post h1.the-title {
letter-spacing: 1px; /* Editar px */
}

#19 Alterar o Tamanho da Imagem em Destaque

.main-content-area img.wp-post-image {
height: 165px; /* Editar px */
min-width: 50%; /* Edit % */
}

#20 Remover Data do Post

.date-extra {
display: none;
}
.post-meta {
border-right: none !important;
}

#21 Remover Nome do Autor

.post-meta a {
padding-left: 0; /* Editar px se necessário */
border-left: none;
}
.post-meta a:first-child {
display: none;
}

#22 Remover o Nome do Autor, Quantidade de Comentários e Data do Post

.post-meta {
display: none;
}

#23 Alterar a Cor do Link Continue Lendo

.latest-post .continue-reading a, .post-content .continue-reading a, .older-post .continue-reading a {
color: #0000FF; /* Editar cor */
}

#24 Remover o Sublinhado do Link Continue Lendo Quando Mouse em Cima

.latest-post .continue-reading a:hover, .post-content .continue-reading a:hover, .older-post .continue-reading a:hover {
text-decoration: none; /* Padrão underline */
}

#25 Alterar Fundo dos Posts Recentes da Página Principal (Estilo do Tema 1 e 2)

.main-content-area .section-header span {
background-color: #F2F2F2; /* Padrão #FFFFFF */
padding-right: 12px; /* Padrão 10px */
top: -3px; /* Padrão -2px */
}

#26 Editar Fonte e Barra Cinza dos Últimos Posts na Página Principal (Estilo do Tema 1 e 2)

.main-content-area .section-header {
background-color: #F2F2F2; /* Padrão #EEEEEE */
color: #FF0000; /* Padrão #707070 */
font-size: 14px; /* Padrão 11px */
font-weight: 700;
height: 12px; /* Padrão 8px */
line-height: normal;
margin: 30px 0; /* Padrão 20px */
padding: 3px; /* Padrão 0 */
}

#27 Remover Imagem Destacada de Cada Artigo Individual

/* DICA: Adicione o código dentro do Artigo. Vá em Editar Post → Configurações do OptimizePress → Outros Scripts → CSS Personalisado */
.main-content-area img.wp-post-image {
display: none;
}

#28 Alterar Comentário do WordPress

/* Tamanho da fonte do comentário */
.comments-container .comments-panel p {
font-size: 16px !important;
line-height: 26px !important;
}
/* Nome do autor do comentário */
.comments-container .comment-meta a {
font-size: 16px !important;
}
/* Data do comentário */
.comments-container .comment-meta span {
font-size: 13px !important;
}
/* Botão enviar */
.silver-button {
font-size: 14px;
}
/* Tabs de comentários */
.comments-container .tabs li a {
font-size: 14px;
}
.comments-container .tabs li.selected a {
font-size: 14px;
}
/* Link de resposta */
.comments-container .comment-meta a.comment-reply-link {
font-size: 13px;
}
/* Nome, email e site */
#leave-reply label {
font-size: 14px;
}
/* Quando campo obrigatório */
#leave-reply .form-submit p {
font-size: 13px;
}

Personalizar Blog Sidebar

#29 Alterar Cor do Fundo do Sidebar (Estilo do Tema 1, 2, e 3)

/* Fundo do Sidebar */
.main-content .sidebar-bg {
background-image: none;
background: #F5F5F5; /* Editar cor */
}
/* Seção do Sidebar */
.sidebar-section {
border-bottom: 1px solid #F5F5F5; /* Padrão #EAEAEA */
box-shadow: 0 2px 0 #F5F5F5; /* Padrão 0 5px 0 #F7F7F7 */
padding: 20px; /* Padrão 22px */
}

#30 Alterar o Posts Recentes – Widget do Sidebar

/* Aba */
.minipost-area ul.tabs li a {
color: #0000FF; /* Padrão #EAEAEA */
background-color: #CCCCCC; /* Edita cor do background */
padding: 4px 8px; /* Padrão 8px 10px */
font-family: ‘Source Sans Pro’, sans-serif; /* Editar fonte */
font-size: 15px;
}
/* Aba com mouse ativo */
.minipost-area ul.tabs li a:hover {
color: #FF0000; /* Editar a cor quando ativo */
background-color: #F5F5F5; /* Editar a cor do fundo da aba quando ativo */
text-decoration: none; /* Padrão underline */
}
/* Cor do link da aba dos posts */
.article-list li h4 a {
color: #0000FF; /* Padrão #202020 */
font-size: 15px; /* Padrão 14px */
font-family: ‘Source Sans Pro’, sans-serif; /* Editar fonte family */
font-weight: 400; /* Padrão 700 */
line-height: 1.4em;
}
/* Cor do link ativo da aba do post */
.article-list li h4 a:hover {
color: #FF0000; /* Editar cor */
}
/* Cor do link da aba comentário */
.article-list li p a {
color: #F5F5F5; /* Padrão 14px */
font-size: 13px; /* Padrão 11px */
font-weight: 700;
}
/* Cor do link ativo das abas de comentários */
.article-list li p a:hover {
color: #FFB573; /* Editar cor */
}

#31 Alterar Título dos Widgets do Sidebar

.main-sidebar .widget h4 {
color: #000000; /* Editar cor */
border-bottom: 2px dotted #999999; /* Padrão 1px dotted #DDDDDD */
font-size: 20px; /* Padrão 20px */
margin-bottom: 15px; /* Padrão 10px */
padding-bottom: 15px; /* Padrão 10px */
padding-top: 0;
}

Customização do Rodapé do Blog

#33 Alterar Cor de Fundo e Espaçamento do Rodapé

.footer {
background: #FBFBFB; /* Editar cor */
padding: 5px 20px; /* Padrão 0 20px */
}

#34 Alterar a Cor e Fonte do Texto do Rodapé o Rodapé

.footer li a {
color: #0000FF; /* Padrão #000000 */
font-size: 15px; /* Padrão 13px */
font-family: ‘Source Sans Pro’, sans-serif; /* Editar fonte */
font-style: normal;
font-weight: 400; /* Padrão 700 */
}

#35 Alterar a Cor do Link do Rodapé Quando o Mouse Está em Cima

.footer li a:hover {
color: #FF0000; /* Editar cor */
text-decoration: underline; /* Padrão none */
}

#36 Editar Fonte e Tamanho do Texto do Copyright no Rodapé

.footer p {
font-size: 14px; /* Padrão 13px */
font-family: ‘Source Sans Pro’, sans-serif; /* Editar fonte */
font-weight: 400; /* Editar se preciso */
}

#37 Centralizar o Texto e Menu de Navegação do Texto de Copyright 

.footer .footer-left {
float: none;
text-align: center;
padding-bottom: 10px; /* Editar px */
}
.footer ul {
float: none;
text-align: center;
}
.footer ul li {
float: none;
display: inline-block;
}

#38 Remover a Linha Inferior do Menu do Topo (Estilo do Tema 1)

.footer-content {
background-image: none;
}

Personalizações Diversas

#39 Alterar o Espaçamento de Texto dos Links dos Menus

.header-nav li a, .navigation li a, .footer ul li a, .sub-footer h4, .sub-footer .textwidget {
letter-spacing: 1px; /* Padrão 0.5px */
}

#40 Editar fundo do Blog (Estilo do Tema 1)

.wrapper {
background: #EEEEEE; /* Editar cor */
}

Eu acredito que aqui estão cobertas as personalizações mais importantes que as pessoas querem fazer. Eu pessoalmente testei o código CSS em um site de demonstração. Eu realmente espero que você encontre aqui um código que faltava para configurar o seu blog com OptimizePress 2.0.

Essas dicas foram retiradas, adaptadas e traduzidas do blog: http://www.khaimun.com/optimizepress-2-blog-css-customization/, a quem se devem os direitos pela criação.

0 Flares Twitter 0 Facebook 0 Pin It Share 0 1Save Google+ 0 LinkedIn 0

Filament.io Made with Flare More Info

Sobre o autor Leonardo Zanette

Mestre em Informática pelo NCE-UFRJ. Eu acredito que a diferença entre o sucesso e o fracasso do seu negócio digital está na sua capacidade de criar e controlar seu próprio site, se aproveitando rapidamente de novas oportunidades que aparecem.

About The Author

Leonardo Zanette

Mestre em Informática pelo NCE-UFRJ. Eu acredito que a diferença entre o sucesso e o fracasso do seu negócio digital está na sua capacidade de criar e controlar seu próprio site, se aproveitando rapidamente de novas oportunidades que aparecem.

Baixe GRÁTIS o Plugin para Traduzir o OptimizePress

Coloque seu Nome e Email e Clique para baixar!

Nome *

Email *

Nunca enviaremos spam

Assine nosso YouTube

Pesquisar por:

• Elementos OptimizePress
• Marketing Digital
• Optimize Press 2
• OptimizeMember

Artigos Recentes

• Páginas Responsivas com OptimizePress – Saiba como Resolver questões Mobile
• Novo Plugin PlusPack – Descubra quais são as novidades!
• Templates não aparecem em seu Optimize Press – Saiba como resolver!
• Como Criar o “Efeito Deslizante” no OptimizePress (Smooth Scrolling)
• Como Criar Página de Boas Vindas para Cada Nível no OptimizeMember

Copyright © 2014 · OptimizePress na Prática · Todos direitos reservados

0 Flares Twitter 0 Facebook 0 Pin It Share 0 1Save Google+ 0 LinkedIn 0

Filament.io Made with Flare More Info ×