nov 042012
 

 

suffusion css Hoja de estilo para suffusion

Configuración del CSS de Suffusion

Suffusión  de  Sayontan Sinha es el más versátil de todos los temas gratis de WordPress y tan bueno como todos los temas de pago. Por ser tan popular es el theme de muchos sitios gestionados con WordPress. Por eso se hace necesario hacerle unos retoques de CSS.  Con estos retoques de CSS lograrás, un sitio personalizado, que no se parezca a ningún otro, apariencia profesional y efectos “fuera de la caja”.
Te recomiendo mirar la hoja y las aclaraciones en color naranja para que puedas configurar el CSS de suffusión a tu manera, no lo copies porque entonces quedaría muy parecido a este sitio y la idea es que el sitio quede individualizado. No temas!! son poco mas de 100 líneas de código.
Este post tiene el propósito de mostrarte mi sobreescritura(override) del CSS de Suffusion. Estos ajustes los puedes incluir en la configuración del Theme Suffusion >> Back-end >> Custom Includes. Este CSS puede ir cambiando y prefeccionandóse. Quizás algunos !important estén de más en el código.
Les presento entonces mis retoques personalizados de CSS para el Theme Suffusion.

/*esto centra el título de las categorias en el magazine*/ 
.suf-mag-category-image { 
   align: center; padding:10px; 
}
 /*este es el estilo de el título de los widget
 (centrado,fondo y color de texto)*/ 
.suf-widget h3 { 
   text-align: center; 
   color: #84002E; 
   background-color: #FF5B00;
 }
 /*este es el estilo de el título de los widget 
(cuando se pone el cursor encima)*/
.suf-widget h3:hover { 
   color: #74C2E1;
   background-color: #005B9A;
 } 
/*este es el estilo del widget superior de adsense 
(hago coincidir el fondo del widget y el borde con el color
 de la cabecera de la página)*/ 
div.suf-widget { 
   background-color:#578BB2; 
   border: 1px solid #578BB2 !important;
 } 
/*este es el estilo de los widget en la revista
 (centrado,fondo y color de texto)*/
 .suf-mag-categories td {
   margin: 10px; 
   border-width: 2px;
   border-style: solid;
   border-color: #005B9A; 
   vertical-align: top;
   background-color: #A9E1F8;
   color: fff; text-align: justify;
 }
 /*este es el estilo de los widget en la revista 
(cuando se coloca el raton encima)*/ 
.suf-mag-categories td:hover{ 
   margin: 10px; border-width: 2px; 
   border-style: solid; 
   border-color: #FF5B00; 
   vertical-align: top; 
   background-color: #fff; 
   color: #005B9A ; text-align: center; 
} 
 /*Ajustes de los menús superiores*/
#nav { 
   font-size: 92%;
   border-bottom: 0px solid #009000; 
   height: 32px; 
} #nav-top { 
   background-color: transparent; 
   font-size: 76%;
   border: none; padding: 0 0px; 
} 
 /*Una clase para cuando quiera centrar algún elemento*/
div.center{ 
   text-align: center; 
   color: #84002E; 
   background-color: #FF5B00;
 } 
.suf-widget-1c {
   width: 100%;
   margin: 0px 0; border: none; 
} 
#horizontal-outer-widgets-1.flattened {
   width: 100%; 
   margin: 0px 0; 
   padding:0px 0; 
   border: none; 
   background-color: #F8F8FF;
 } 
#horizontal-outer-widgets-2.flattened { 
   width: 100%; 
   margin: 0px 0;
   padding:0px 0;
   border: none; 
   background-color: #F8F8FF; 
 /*estilo que alterna colores en los comentarios 
(como agregado los bordes tambien son diferentes)*/} 
.even {
   background: #F2F7FC!important; 
   border-width:6px!important;
   border-color:#3E9BF8#227AD1!important;
 } 
.odd { 
  background:#FFFEEE!important; 
  border-width:6px!important;
  border-color:#227AD1#3E9BF8!important; 
} 
 /*Agregando una sombra a las cabeceras H2*/
h2 { 
text-shadow: 0px 0px 1px #1DC0F2;
 }
 /*Lo siguiente aumenta el tamaño de la numeración
 de los comentarios (esta parte debe 
tener una forma más sencilla de hacerlo*/ 
.commentlist{ 
  color: #227AD1; 
  font-size:300%;
 } 
/*Lo siguiente disminuye (del 300 % anterior) 
el tamaño del texto de los comentarios*/ 
.comment-body{ 
  font-size:35%!important;
 } 
/*Disminuyendo tambien el tamaño del texto responder*/ 
.reply { 
font-size:35%!important; 
}
 /*Mi configuración de citas (blockquote)*/ 
blockquote{ 
   background:none;
   padding:8px; 
   border:2px dashed #ddd; 
   box-shadow: 10px 10px 5px #888888;
   text-indent: 0px!important;
 } 
blockquote p:first-letter { 
   background: none!important; 
   padding: 4px; float: left; 
   margin: 5px 3px 1px 0!important;
   font-family: Georgia; 
   font-size: 36px; 
   font-weight: bold; 
   text-indent: 0px!important;
   text-shadow: 2px 2px 4px #888888; 
} 
 /*La cabecera*/ 
#header { 
   height: 1px;
  padding: 1px 0px;
 } 
 /*configuración de los widget de text 
elimino bordes y cambio color de fondo*/ 
.widget_text { 
  background-color:#F8F8FF;
  text-align: center; 
  border: none; 
}
 /*Justificando el texto de todos los párrafos*/
p, .p {text-align: justify;}

 

 

 Hoja de estilo para suffusion

Ernesto Marrero

Webmaster y blogger at Webactual.org
Blogger divulgador de proyectos open source. Interesado en la actualidad SEO. Puede contactar conmigo a través de ernestomarrero(arroba)gmail.com.

  Una respuesta a “Hoja de estilo para suffusion”

 Deja un comentario

Inclusión de palabras clave es considerado SPAM.

(obligatorio pero no será publicado)