40CSS Para Otimizar o OptimizePress 2

40 Códigos CSS para Melhorar Seu Blog Feito em OptimizePress 2

2 Flares Twitter 0 Facebook 0 Pin It Share 1 Google+ 0 LinkedIn 1 Filament.io 2 Flares ×

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;

}

#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.
2 Flares Twitter 0 Facebook 0 Pin It Share 1 Google+ 0 LinkedIn 1 Filament.io 2 Flares ×

Sobre o autor 

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.

28 Comentários

  • Lima

    Responder Responder 2 de setembro de 2014

    Olá leonardo boa tarde!

    Faz pouco tempo que uso o optimizepress e não sei usa-lo por completo. Não estou conseguindo usar a maioria dos códigos que você passou.

    A minha dúvida é em relação editar a lista de categorias.

    Gostaria de saber como posso fazer essas alterações.

    Grato!

    • Leonardo Zanette

      Responder Responder 11 de setembro de 2014

      Olá Lima!

      Realmente, para a lista de categorias criei uma específica para meu site, segue ela:
      li.cat-item.cat-item-5 a {
      background-color: #3FC380;
      padding: 20px 20px 15px;
      color: #fff !important;
      display: block;
      border-bottom: 10px solid #03A678;
      font-size: 20px;
      font-weight: normal;
      border-radius: 3px;
      }

      E você pode criar para cada categoria depois, só alterando o 5 (.cat-item-5, 5 é o id da categoria) na parte de cima, e o estilo que quiser.

      Abraços,
      Leonardo Zanette

      • Anderson

        Responder Responder 14 de fevereiro de 2016

        Leonardo,

        Muito bom seu post, me ajudou muito, consegui personalizar a categoria com o código que você postou aqui, mais só consegui um item. Onde encontro o id das outras categorias?

        Desde já agradeço!

        Abraços!

  • Pedro Martins

    Responder Responder 11 de setembro de 2014

    Obrigado por traduzir e adaptar essas dicas leandro!

    Tenho uma dúvida…como altero a fonte, cor e tamanho dos menus…

    forte abraço.

    • Pedro Martins

      Responder Responder 11 de setembro de 2014

      Desculpe!

      LEONARDO*** HEHE

    • Leonardo Zanette

      Responder Responder 11 de setembro de 2014

      Olá Pedro!

      Se for do blog é em Configurações do Blog > Estrutura do Layout > Cabeçalho & Preferências de Navegação > Navegação Principal do Blog.

      Se for na página é dentro do Editor Live > Cabeçalho & Navegação > Navegação …

      É isso ou quer um script css que altere tudo de uma vez? Se for para alterar tudo precisaria ver a página!

      Abraços, Leonardo Zanette

  • Sergio

    Responder Responder 28 de setembro de 2014

    Olá Leonardo!
    Tenho acompanhado recentemente suas dicas do optmizepress e achei muito útil. Tenho uma dúvida, como faço para inserir o código de rastreamento do facebook na home page do meu site optimizepress (tem um botão de cupom de desconto para compra do meu e-commerce feito no open cart).
    Ficarei muito grato por qualquer ajuda.

    • Leonardo Zanette

      Responder Responder 1 de outubro de 2014

      Olá Sergio!

      Colocar o código de rastreamento você diz do remarketing do Facebook?

      Se for vai em OptimizePress > Dashboard (Painel) > Análise e Rastramento, e coloque o pixel na segunda área de texto que aparecer!

      Abraços, Leonardo Zanette.

  • luciano

    Responder Responder 21 de março de 2015

    Olá Leonardo.

    Muito bom, parabéns pela iniciativa em traduzir e compartilhar com a gente essas dicas. Já baixei o plugin para traduzir o OP e funcionou direitinho!! ;)

    Estou tendo uma dificuldade e gostaria de ver se você pode me ajudar. Tenho um código CSS que gostaria de aplicar a uma determinada LINHA (le_body_row_3) no Live Editor, só que não estou conseguindo “chamar” a classe CSS que inseri nas configurações da página. Tentei criar uma classe CSS com outro nome e fazer fazer referência a ela nas configurações da linha, mas tb não funcionou.

    Alguma luz :)

    Grato e um grande abraço!

  • Luciano Marmo

    Responder Responder 1 de julho de 2015

    Olá Leonardo, sei que o tema 3 do blog mantém o título dos posts na página principal com o mesmo tamanho, porém os widgets barra lateral perde o alinhamento.

  • Alexandra

    Responder Responder 2 de julho de 2015

    Meu blog esta desconfigurado ja tentei de tudo e não consigo arrumar os anuncios esta abaixo fora de organização alguns estão fora de margem, etc pode me ajudar

  • Henrique

    Responder Responder 18 de novembro de 2015

    Olá, como coloca no optmize essas categorias coloridas que você tem na barra lateral? obrigado

  • Leonardo

    Responder Responder 24 de novembro de 2015

    Leonardo, você sabe como colocar um ícone ao lado do nome das categorias?

  • Drinko

    Responder Responder 10 de dezembro de 2015

    Gostaria de saber como eu faço pra colocar o link do adsense via CSS, tipo tem vários blogs que quando entra, aparece uma janela pop up e quando clica fora abre automaticamente uma janela do anuncio do adsense, como eu faria isso? obrigado

  • Rafael

    Responder Responder 19 de janeiro de 2016

    Leonardo, como faço pra por o menu de navegação ao lado do logo, nem abaixo e nem acima, mas sim do lado, nos templates já vem assim, mas pra criar do zero não estou conseguindo, por favor me da uma mãozinha.

    • Camila Schneider

      Responder Responder 13 de maio de 2016

      Olá Rafael, para ter esse Menu ao lado, ative dentro de Navegação do Cabeçalho: Navigation Bar Alongside Logo (é a 3ª opção de menus), e aí você escolhe qual menu (que você já tenha configurado anteriormente) para aparecer ao lado do seu logo.

      Espero ter ajudado.
      Abraços, Camila

  • Lidia Chain

    Responder Responder 22 de janeiro de 2016

    Ola Gostaria de saber qual codigo CSS utilizo para deixar um ícone visível, temos duas formas de pagamento, mas a plataforma não permite o boleto visivel para o cliente, apenas se eu editar a forma CSS.

    Obrigada

    Lidia

  • machado junior

    Responder Responder 29 de fevereiro de 2016

    Por favor, como faço para introduzir um codigo para implantar um gerador de player no meu facebook. Não sei colocar o codigo do body.Grato!

  • Rodrigo

    Responder Responder 24 de setembro de 2016

    Olá como você faz pra colocar esse menuzinho “Flares” no lado esquerdo da página quando a barra de rolagem descer

    • Camila Schneider

      Responder Responder 28 de setembro de 2016

      Oi Rodrigo, td bem? É só baixar o plugin do flare e nas configurações você pode optar por essa opção ;)
      Abraços,
      Camila

  • Ricardo

    Responder Responder 11 de novembro de 2016

    Como esconder/revelar o botao de compra na pagina de vendas depois de X segundos. É possível fazer com outros elementos?

  • MAURICIO

    Responder Responder 14 de novembro de 2016

    Boa tarde, Camila!!!!!

    Eu uso um template responsivo chamado “ChattelsBlog Blogger”, e eu queria colocar um Script para aumentar e diminuir as letras das postagens. Vc. pode me ajudar?

    Desde já agradeço.

    Mauricio

    • Camila Schneider

      Responder Responder 30 de novembro de 2016

      Oi Mauricio, tudo bem? Mas você não precisa de um script, pode aumentar diretamente nos elementos de texto ou headline. Se quiser me chamar no face para te ajudar melhor, fique a vontade!
      Grande abraço,
      Camila

  • jessica

    Responder Responder 3 de janeiro de 2017

    This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.

  • cidadaosa

    Responder Responder 7 de maio de 2017

    Hola, eu gostaria que me ajudassem pfv.
    Eu vi na web em algum lugar um templates que mudar de cor, conforme o tempo local, gostaria de fazer ou arrumar um deste, se algum tiver, me avisa por favor, obg!

    Mandem e-mail para: cidadaosa@gmail.com

    vlew

  • Wallpaper Lab

    Responder Responder 21 de setembro de 2017

    MUITO OBRIGADO!!!

Deixe um Comentário

* Indicar Campos Obrigatórios