Como descifrar un codigo css
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 pri...

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:

		/* 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:
    background: url(images/TUIMAGEN) 17px 12px no-repeat #FBF8F4;
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: 8px 8em;
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:
    margin: 1em auto 20 auto;
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. Blush

Siguiente línea:
    border-radius: 15px;
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:

    border: 1px #E7E7E7;
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-weight: bold;
}
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:
{$header}
y debajo de esto pegamos:
<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:
<p class="BARRA1">
Cambias BARRA1 por el nombre que le hayas puesto.

Ahora:
<span style="color: #993300;"><strong>TITULO:</strong></span>
El color que pongas en código será el color del que aparecerá lo que pongas de titulo

Ahora:
<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) Blush
Archivos Adjuntos

Primero, un código CSS no se descifra, no está cifrado.

Después, el ejemplo está mal, separas BARRA de 1, dudo que funcione como tal... te cogerá BARRA y 1 por separado, aunque 1 no funcionará en todos los navegadores..

El punto no indica que sea elemento de un grupo ya hecho, indica que es una clase y no un id...

Por lo demás... mas que un enseñar css, parece mas como hacer una barra por que no explicas que es cada cosa de la estructura de css...
Última modificación: 17 Dec, 2012, 8:39 am por Diversionl.
Colaboradores
Jonatan H.
This forum uses Lukasz Tkacz MyBB addons.