Sobi2 Template Advanced Standard modificar el Css |
Visitas: 4802
|
|
Template Joomla
|
|
Martes, 23 de Marzo de 2010 09:13 |
|
Página 1 de 2
Despues de instalar Sobi2 y el Template Advanced Standard, hemos introducido las primeras categorias y avisos, pero nos queda bastante sosito, osea como una hamburguesa del McDonald’s sin ketchup ni mostaza, y ademas no se adapta demasiado a los colores de nuestra web, bien vamos a modificar el Css para personalizarlo. Con este artículo no pretendo dar una clase de Css ni nada parecido, simplemente ofrecer un ejemplo fácil y una idéa para quien quiera personalizar un poco la plantilla de su directorio Sobi2
Como hemos visto en el artículo Sobi2 instalar y Configuracion General, el directorio recién instalado quedaría así:
Sobi2 Template Advanced Standard modificar el Css del Aviso
Por contra con Sobi2 y la plantilla Advanced Standard tal como viene en el paquete, un aviso quedaría así:
vamos a cambiarle el fondo y el color del borde, para éllo vamos a Componente -> Sobi2 -> Configuracion general -> Pestaña Fondo y veremos ésto:
El color del borde lo substituimos por el que nos guste, en mi caso por el verde de mi sitio y como que no me gusta ninguna Imagen de fondo de las que vienen me haré una. Para éllo me voy a la carpeta components\com_sobi2\images\backgrounds y veo que el fondo del Avisoo se basa en unas imágenes gif de 22 x 18 pixels que se repiten, por tanto me voy a fabricar uno mio de la misma medida con cualquier editor de imágenes y lo añado a la carpeta, recargo la página y veo que el nuevo archivo ya aparece en el desplegable, lo selecciono y grabo, ahora al refrescar el frontend me aparecerá lo que yo quería:
Sobi2 Template Advanced Standard modificar el Css del Componente
Para que el salto visual de la ficha al fondo de la página no sea tan brusco, me iré al archivo Css principal de Sobi2 que está en components\com_sobi2\includes y se llama com_sobi2.css.
Aqui buscaré la clase de estilo que me interesa, que se llama div.sobi2 y le añadiré una instrucción background: #999999; para cambiar el color del fondo del componente Sobi2 pero no de la plantilla de la web, aprovecho para cambiar el color del texto del Aviso añadiendo una instrucción color: #97DF16; y queda algo mucho más acorde con el Css del resto de la plantilla
|
Comentarios
Cambiar la instrucción border: solid #97DF16; por border: dotted #xxxxxx;, para más información: www.video-tutorial-joomla.com/template-joomla/template-css-de-joomla-border.html
Quisiera saber cual es el procedimiento para que los marcos que contienen la informacion en vez que tengan un borde solido queden punteados.
Suscripción de noticias RSS para comentarios de esta entrada.