Hoja de estilo para suffusion

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

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

Datos Biográficos
Últimos Posts

Ernesto Marrero

Webmaster y blogger en Webactual.org

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

Ernesto Marrero

Últimos posts porErnesto Marrero (ver todo)

Tambien te puede interesar:

Una respuesta a “Hoja de estilo para suffusion”

Deja un comentario Cancelar respuesta