Hola, hoy les mostraré como descifrar un código css, para hacerlo les daré un ejemplo muy sencillo, agregaremos una barra de anuncios C:
Bien lo primero que haremos será crear un campo de css, para eso vamos a:
Panel de administración====>Estilos y plantillas====>Estilos=====>TUESTILO=====>Global.css=====> MODO AVANZADO
Se irán hasta abajo y crearán un grupo nuevo; ejemplo:
Bien, ahora ya tenemos un grupo, pero, ¿Cómo creamos más barras? Simple copia y pega desde el .BARRA1 y cámbiale el nombre y los valores C;
Ahora sí como editar un css:
Lo primero que notamos es:
/* TUNOMBRE*/ aquí reemplazas TUNOMBRE por el nombre de la categoría C: ejemplo: /*Barras de tutorial*/
Ahora lo siguiente:
.BARRA1 { el . (punto) indica que es un elemento del grupo ya hecho y BARRA1 es el nombre que le darás tu (puedes cambiarlo a tu gusto) y el { indica que inicia el código :3
Siguiente línea:
Background lo llamaremos fondo en palabras entendibles C; la parte donde dice url(images/TUIMAGEN) se refiere a la ruta donde esta la imagen de fondo (images es una carpeta de tu foro) lo siguientes código px (píxeles) se refiere a la posición y el no-repeat quiere decir que no se repita.
El siguiente código después del "#" es el código del color de fondo. Cambialo por el que gustes.
NOTA: una buena manera de cambiar la posición sin estar editando todo es la opción "inspeccionar elemento" de google chrome
Siguiente línea:
Padding traducido al español significa relleno, es decir, si lo dejamos en 0 solo se verá el texto de nuestra barra.
Siguiente línea:
Esta línea nos habla del margen, es decir, la distancia que salvaguardemos entre un elemento y otro. Solo juega con el "inspeccionador de elementos de google" hasta encontrar el valor definido.
Siguiente línea:
Esta es referente al borde, es decir, la "orilla" de nuestras barras.
Como verán la mía dice "radius" es un efecto de borde redondeado, si no desean esto borren esta línea y solo dejen la siguiente:
Este es un borde pequeño, de nuevo vemos el código "#" aquí también podremos cambiar el color del borde C:
Siguiente línea:
Font se refiere a la letra y weight es peso, en resumen tipo de letra, Bold es negrita pero ustedes pueden dejar la que gusten :3
Ahora solo nos queda cerrar el código con una llave }.
Ahora a usar nuestras barras!!!
Para esto vamos a:
Panel de administración========>Estilos y plantillas====>TUTEMA===>plantillas======>índice=====>index
Buscamos:
y debajo de esto pegamos:
Ahora a personalizarla!!
Donde dice:
Cambias BARRA1 por el nombre que le hayas puesto.
Ahora:
El color que pongas en código será el color del que aparecerá lo que pongas de titulo
Ahora:
Ruta del link:Lo reemplazamos por el link a donde nos llevará ejemplo: www.tuforo.com/memberlist.php nos llevará a nuestra lista de usuarios
Titulo del link: Será el titulo que tendrá por ejemplo: Lista de miembros. y al dar click te llevará hacia el link anterior C:
Fecha: Si anuncias algún evento te sirve para poner la fecha, de lo contrario borra esta parte.
Cuando desees cambiar el anuncio tan solo reemplazas la ruta del link, el titulo y la fecha (de usarse)
Adiós comenten C: y aporten si falto algo o no lo explique bien (soy nuevo)
Bien lo primero que haremos será crear un campo de css, para eso vamos a:
Panel de administración====>Estilos y plantillas====>Estilos=====>TUESTILO=====>Global.css=====> MODO AVANZADO
Se irán hasta abajo y crearán un grupo nuevo; ejemplo:
Código PHP:
/* TUNOMBRE*/
.BARRA 1 {
background: url(images/TUIMAGEN) 17px 12px no-repeat #FBF8F4;
padding: 8px 8em;
margin: 1em auto 20 auto;
border-radius: 15px;
border: 1px #E7E7E7;
font-weight: bold;
}
Bien, ahora ya tenemos un grupo, pero, ¿Cómo creamos más barras? Simple copia y pega desde el .BARRA1 y cámbiale el nombre y los valores C;
Ahora sí como editar un css:
Lo primero que notamos es:
/* TUNOMBRE*/ aquí reemplazas TUNOMBRE por el nombre de la categoría C: ejemplo: /*Barras de tutorial*/
Ahora lo siguiente:
.BARRA1 { el . (punto) indica que es un elemento del grupo ya hecho y BARRA1 es el nombre que le darás tu (puedes cambiarlo a tu gusto) y el { indica que inicia el código :3
Siguiente línea:
Código PHP:
background: url(images/TUIMAGEN) 17px 12px no-repeat #FBF8F4;
El siguiente código después del "#" es el código del color de fondo. Cambialo por el que gustes.
NOTA: una buena manera de cambiar la posición sin estar editando todo es la opción "inspeccionar elemento" de google chrome
Siguiente línea:
Código PHP:
padding: 8px 8em;
Siguiente línea:
Código PHP:
margin: 1em auto 20 auto;
Siguiente línea:
Código PHP:
border-radius: 15px;
Como verán la mía dice "radius" es un efecto de borde redondeado, si no desean esto borren esta línea y solo dejen la siguiente:
Código PHP:
border: 1px #E7E7E7;
Siguiente línea:
Código PHP:
font-weight: bold;
}
Ahora solo nos queda cerrar el código con una llave }.
Ahora a usar nuestras barras!!!
Para esto vamos a:
Panel de administración========>Estilos y plantillas====>TUTEMA===>plantillas======>índice=====>index
Buscamos:
Código PHP:
{$header}
Código PHP:
<p class="BARRA1"><span style="color: #993300;"><strong>TITULO:</strong></span> <a href="RUTA DEL LINK">Titulo del link</a> fecha->(16/12/2012)</p>
Ahora a personalizarla!!
Donde dice:
Código PHP:
<p class="BARRA1">
Ahora:
Código PHP:
<span style="color: #993300;"><strong>TITULO:</strong></span>
Ahora:
Código PHP:
<a href="RUTA DEL LINK">Titulo del link</a> fecha->(16/12/2012)</p>
Ruta del link:Lo reemplazamos por el link a donde nos llevará ejemplo: www.tuforo.com/memberlist.php nos llevará a nuestra lista de usuarios
Titulo del link: Será el titulo que tendrá por ejemplo: Lista de miembros. y al dar click te llevará hacia el link anterior C:
Fecha: Si anuncias algún evento te sirve para poner la fecha, de lo contrario borra esta parte.
Cuando desees cambiar el anuncio tan solo reemplazas la ruta del link, el titulo y la fecha (de usarse)
Adiós comenten C: y aporten si falto algo o no lo explique bien (soy nuevo)