40 Estilos CSS que Puedes Utilizar Para Personalizar y/o Mejorar tu Blog OptimizePress 2.0

responsive-optimizepress

Si tu utilizas OptimizePress 2.0 y quieres personalizar y/o mejorar tu blog, probablemente sepas que no es fácil si no sabes como hacerlo, específicamente si no te explican. Por eso en este post, Quisiéramos compartir contigo los 40 estilos CSS que más quisieras cambiar en tu blog y además mostrarte particularmente los que nosotros utilizamos con nuestro blog.

 

Para modificar los estilos debes agregar tu código en OptimizePress → Blog Settings → Modules → Other Scripts → Custom CSS:

Personaliza la Navegación del Blog

#1 Edita el Ancho Máximo del Logo

.banner .op-logo img {

max-width: 200px; /* Default 250px */

}

#2 Edita La Parte Superior e Inferior de relleno(Padding) del Logo

.banner .op-logo {

padding: 25px 0; /* Default 40px */

}

#3 Edita el Margen Superior del Menú de Navegación

body #nav-side.navigation #navigation-alongside {

margin-top: 25px; /* Default 40px */

}

#4 Edita El Espacio Lateral de los Enlaces del Menú

/* Main menu */

body .navigation ul li a {

line-height: 1em; /* Default 1.1em */

padding: 0.5em 1.1em; /* Default 1.1em 1.2em */

text-decoration: none;

}

/* Sub-menu */

body .navigation ul ul li a {

height: auto;

min-width: 120px; /* Default 180px */

padding: 0.5em 1.1em; /* Default 1.2em 1.5em */

text-align: left;

}

#5 Edita El Color de Fondo delMenú de Navegación cuando el Mouse Está en Cima.

body #nav-side.navigation ul#navigation-alongside li:hover a {

background-color: #F5F5F5; /* Edit color */

}

#6 Edita El Tamaño de la Imagen de Alto del Banner/Encabezado

.banner .banner-logo {

height:145px; /* Edit px */

}

#7 Edita El Tamaño debajo de la Navegación del Banner/Encabezado

/* Main menu */

body .navigation ul li a {

line-height: 1em; /* Default 1.1em */

padding: 1em 1.2em; /* Default 1.1em 1.2em */

text-decoration: none;

}

/* Sub-menu */

body .navigation ul ul li a {

height: auto;

min-width: 120px; /* Default 180px */

padding: 1em 1.2em; /* Default 1.2em 1.5em */

text-align: left;

}

#8 Centrar el Texto del Menú de Navegación Superior o Inferior

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 Editar el Color del Menú de Navegación Superior cuando el Mouse esta Encima

body #nav-top.navigation ul#navigation-above li:hover a {

background-color: #F5F5F5; /* Edit color */

}

#10 Editar el Tamaño del Menú de Navegación Superior

body #nav-top.navigation ul li a, body #nav-top.navigation ul ul li a {

line-height: 1.1em; /* Default 1.1em */

padding: 1.2em 1.2em; /* Default 1em, 1.2em */

}

#11 Alinear el Menú de Navegación Superior a la Derecha

body .navigation ul#navigation-above li {

float: right;

}

#12 Ocultar la Imagen del Banner/Encabezado

.banner {

display: none;

}

#13 Ocultar el Menú de Navegación Inferior del Banner/Encabezado

#nav-bottom {

display: none;

}

#14 Ocultar el Menú de Navegación Superior

#nav-top {

display: none;

}

Personalizar el Postdel Blog

#15 Editar el Color del Link del Titulo del Post

.latest-post h2 a, .older-post h4 a {

color: #0000FF; /* Edit color */

}

#16 Editar el Color del Enlace para el Titulo del Post cuando el Mouse esta Encima Y Quitar el Subrayado del Enlace Cuando el Mouse Esta Encima

.latest-post h2 a:hover, .older-post h4 a:hover {

color: #FF0000; /* Edit color */

text-decoration: none; /* Default underline */

}

#17 Cambiar el Color de los Enlaces de Contenido y El Color de Enlace Cuando el Ratón este Encima

/* Content link color */

.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; /* Edit color */

text-decoration: none;

}

/* Content link hover color */

.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; /* Edit color */

text-decoration: underline;

}

/* Comments link color */

a, a:visited {

color: #0000FF; /* Default #2E82BC */

outline: 0 none;

text-decoration: none;

}

/* Comments link hover color */

a:hover, a:focus {

color: #FF0000; /* Default #005800 */

outline: 0 none;

}

/* Sidebar categories, pages widgets link color */

.page-list li a, .widget_nav_menu li a, .widget_meta li a, .widget_categories li a, .widget_pages li a {

color: #0000FF; /* Default #202020 */

}

/* Sidebar categories, pages widgets link hover color */

.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; /* Edit color */

}

/* Sub footer link color */

.sub-footer .col ul li a {

color: #0000FF; /* Default #404040 */

font-size: 15px; /* Default 13px */

}

/* Sub footer link hover color */

.sub-footer .col ul li a:hover {

color: #FF0000; /* Default #404040 */

}

#18 Editar el Espacio de la Letra del Titulo del Post

h1, h2, h3, h4, .main-content h4, .latest-post h2 a, .latest-post h1.the-title {

letter-spacing: 1px; /* Edit px */

}

#19 Editar el Ancho y Alto de la Imagen Destacada

.main-content-area img.wp-post-image {

height: 165px; /* Edit px */

min-width: 50%; /* Edit % */

}

#20 Quitar la Fecha de Publicación del Post

.date-extra {

display: none;

}

.post-meta {

border-right: none !important;

}

#21 Quitar el Nombre del Author del Post

.post-meta a {

padding-left: 0; /* Edit px if needed */

border-left: none;

}

.post-meta a:first-child {

display: none;

}

#22 No Mostrar el Nombre del Autor, Comentarios y Fecha de Publicación del Post

.post-meta {

display: none;

}

#23 Editar el Color del Enlace para Continuar Leyendo

.latest-post .continue-reading a, .post-content .continue-reading a, .older-post .continue-reading a {

color: #0000FF; /* Edit color */

}

#24 Quitar el Subrayado de la Leyenda Continuar Leyendo Cuando el Mouse esta Encima

.latest-post .continue-reading a:hover, .post-content .continue-reading a:hover, .older-post .continue-reading a:hover {

text-decoration: none; /* Default underline */

}

#25 Editar El Color de  Fondo del Encabezado del Último Artículo en la Página de Inicio (Theme style 1 and 2)

.main-content-area .section-header span {

background-color: #F2F2F2; /* Default #FFFFFF */

padding-right: 12px; /* Default 10px */

top: -3px; /* Default -2px */

}

#26 Editar el Último Artículo La Fuente de la Letra y la Barra Gris en la Página de Inicio(Theme style 1 and 2)

.main-content-area .section-header {

background-color: #F2F2F2; /* Default #EEEEEE */

color: #FF0000; /* Default #707070 */

font-size: 14px; /* Default 11px */

font-weight: 700;

height: 12px; /* Default 8px */

line-height: normal;

margin: 30px 0; /* Default 20px */

padding: 3px; /* Default 0 */

}

#27 Quitar la Imagen Destacada  Image desde Cada Artículo

body.single-post .post-image {

display: none;

}

#28 Editar los Comentarios de WordPress

/* Comment font size */

.comments-container .comments-panel p {

font-size: 16px !important;

line-height: 26px !important;

}

/* Comment author name */

.comments-container .comment-meta a {

font-size: 16px !important;

}

/* Comment date */

.comments-container .comment-meta span {

font-size: 13px !important;

}

/* Submit button */

.silver-button {

font-size: 14px;

}

/* Comment tabs */

.comments-container .tabs li a {

font-size: 14px;

}

.comments-container .tabs li.selected a {

font-size: 14px;

}

/* Reply link */

.comments-container .comment-meta a.comment-reply-link {

font-size: 13px;

}

/* Name, email, website */

#leave-reply label {

font-size: 14px;

}

/* Denotes Required Field */

#leave-reply .form-submit p {

font-size: 13px;

}

Personalizar la Barra Lateral del Blog

#29 Editar el Color de Fondo de la Barra Lateral  (Theme style 1, 2, and 3)

/* Sidebar background */

.main-content .sidebar-bg {

background-image: none;

background: #F5F5F5; /* Edit color */

}

/* Sidebar section */

.sidebar-section {

border-bottom: 1px solid #F5F5F5; /* Default #EAEAEA */

box-shadow: 0 2px 0 #F5F5F5; /* Default 0 5px 0 #F7F7F7 */

padding: 20px; /* Default 22px */

}

#30 Editar Los Tabs de Post Recientes para el Widget de la Barra Lateral

/* Tab */

.minipost-area ul.tabs li a {

color: #0000FF; /* Default #EAEAEA */

background-color: #CCCCCC; /* Edit background tab color */

padding: 4px 8px; /* Default 8px 10px */

font-family: ‘Source Sans Pro’, sans-serif; /* Edit font */

font-size: 15px;

}

/* Hover tab */

.minipost-area ul.tabs li a:hover {

color: #FF0000; /* Edit hover text color */

background-color: #F5F5F5; /* Edit hover background tab color */

text-decoration: none; /* Default underline */

}

/* Tab post title link color */

.article-list li h4 a {

color: #0000FF; /* Default #202020 */

font-size: 15px; /* Default 14px */

font-family: ‘Source Sans Pro’, sans-serif; /* Edit font family */

font-weight: 400; /* Default 700 */

line-height: 1.4em;

}

/* Tab post title link hover color */

.article-list li h4 a:hover {

color: #FF0000; /* Edit color */

}

/* Tab comment link color */

.article-list li p a {

color: #F5F5F5; /* Default 14px */

font-size: 13px; /* Default 11px */

font-weight: 700;

}

/* Tab comment link hover color */

.article-list li p a:hover {

color: #FFB573; /* Edit color */

}

#31 Editar El Titulo de los Widget para la Barra Lateral

.main-sidebar .widget h4 {

color: #000000; /* Edit color */

border-bottom: 2px dotted #999999; /* Default 1px dotted #DDDDDD */

font-size: 20px; /* Default 20px */

margin-bottom: 15px; /* Default 10px */

padding-bottom: 15px; /* Default 10px */

padding-top: 0;

}

 

Personalizar el Pie de página y Sub Pie de Página del Blog 

#32 Cambiar el Color de Fondo del Sub Pie de Página

.sub-footer {

background: #FBFBFB; /* Edit color */

background-image: none;

}

#33 Cambiar el Color de Fondo y Espacio del Pie de Página

.footer {

background: #FBFBFB; /* Edit color */

padding: 5px 20px; /* Default 0 20px */

}

#34 Edita el Color del Enlace del Pie de Página y la Fuente de la Letra

.footer li a {

color: #0000FF; /* Default #000000 */

font-size: 15px; /* Default 13px */

font-family: ‘Source Sans Pro’, sans-serif; /* Edit font */

font-style: normal;

font-weight: 400; /* Default 700 */

}

#35 Cambiar el Color del Enlace Sobrepuesto del Pie de Página

.footer li a:hover {

color: #FF0000; /* Edit color */

text-decoration: underline; /* Default none */

}

#36 Editar el Texto Copyright del Pie de Página (Tamaño de la Letra  y La Fuente de la Letra)

.footer p {

font-size: 14px; /* Default 13px */

font-family: ‘Source Sans Pro’, sans-serif; /* Edit font family */

font-weight: 400; /* Edit if needed */

}

#37 Centrar el Texto Copyright y la Navegación del Pie de Página

.footer .footer-left {

float: none;

text-align: center;

padding-bottom: 10px; /* Edit px */

}

.footer ul {

float: none;

text-align: center;

}

.footer ul li {

float: none;

display: inline-block;

}

#38 Quitar del Pie de Página la Barra Superior Horizontal(Theme style 1)

.footer-content {

background-image: none;

}

Personalización Varios

#39 Cambiar el Espacio Carta de la Navegación del Blog, Título del Sub Pie de Página y La Navegación del Pie de Página 

.header-nav li a, .navigation li a, .footer ul li a, .sub-footer h4, .sub-footer .textwidget {

letter-spacing: 1px; /* Default 0.5px */

}

#40 Cambiar el Color de Fondo del Blog

.wrapper {

background-image: none;

background: #EEEEEE; /* Edit color */

}

.main-content-area {

background-image: none;

background: #EEEEEE; /* Edit color */

}

.main-content-area-container {

background-image: none;

background: #EEEEEE; /* Edit color */

}

Aquí lo tienes! Creemos que estos estilos son los que normalmente las personas están buscando para personalizar su blog OptimizePress 2.0. Nosotros personalmente hemos probado algunos estilos en TrabajaEnInternetHoy.com los cuales te los mostramos a continuación:

Estilos para el Pie de Página y el Contenido del Blog

Estilos para Los Comentarios

Información Obtenida del Blog de Khaimun.

Leave A Response


*

* Denotes Required Field