Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Como descifrar un codigo css
angeluz   16 Dec, 2012, 3:21 pm
#1
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:

Código PHP:
<?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:
<?php 
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:
Código PHP:
<?php 
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:
Código PHP:
<?php 
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:
Código PHP:
<?php 
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:

Código PHP:
<?php 
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:
Código PHP:
<?php 
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:
Código PHP:
<?php 
{$header}
y debajo de esto pegamos:
Código PHP:
<?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:
<?php 
<p class="BARRA1">
Cambias BARRA1 por el nombre que le hayas puesto.

Ahora:
Código PHP:
<?php 
<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:
Código PHP:
<?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) Blush
Jonatan H.   17 Dec, 2012, 8:02 am
#2
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.
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.