Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Edicion simple de diseño SMF
  Leído 2478 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Dzigns
Mar 07 2010
Despues de un rato sin publicar algo interesante en la web, aqui les dejo una clase de edicion de themes SMF a la forma sencilla, quizas no logren hacer mucho pero por algo se enpieza.


Primero que nada necesitaran un editor de textos, pueden usar el Block de notas o Notepad, aunque resultara algo tedioso el hacerlo con el, les recomiendo usen el Notepad++ o si ya piensan entrarle un poco mas con el tiempo y luego ayudarnos en SMF Personal a disen~ar themes hacer sus propios themes pues usar programas como Dreamweaver(Adobe o Macromedia, es lo mismo).

Tambien necesitaran un editor de imagenes como photoshop, gimp, corel, frameworks, o el que mas les guste.

Bueno, comenzamos...

Tienen que tener bien ubicado y respaldado por seguridad los archivos que editaran, por el momento esta entrega sera solo para editar cosas basicas y una que otra imagen, asi que de preferencia hagan respaldo de el theme que editaran.

Localizan y abren sus archivos style.css y index.template.php

Lo primero que deben tener reconocido es lo que desean modificar.

En la hoja de estilos (style.css) esta todo el disen~o de colores y formato asi como la ubicacion y las imagenes.

En su index.template podran encontrar diferentes tipos de codigos en HTML, los que mas se editan son:

catbg
nav
toolbar
header
windowbg
etc

Hay que saber reconocer cuales son clases (class) y cuales son id's (id), en su hoja de estilos las clases son algo asi

.catbg
.windowbg

Y en los templates se veran asi

<td class=windowbg>
<tr class=catbg>

Osea, empiezan con punto (.) mientras que los id's son algo asi

#toolbar
#header
#logo

y en el index.template.php se encuentra asi

<div id=header>
<div id=toolbar>
<div id=logo>

(NOTA: SON EJEMPLOS, HAY MUCHOS MAS, NO SE BAYAN A QUEDAR CON LA IDEA QUE SOLO EXISTEN ESOS, PUEDEN HABER MAS O INCLUSO PUEDEN HACER SUS PROPIOS ID'S Y CLASES)

Los tipos y estilos de letras los encontraran algo asi:\

a.link(links del theme)
a.hover(Cuando pones el puntero sobre un link)
a.visited(Links ya visitados o clickeados)

Ahora les digo unas cuantas funciones del CSS para que sepan que editar y de que forma.

Primero que nada deben saber la simbologia, son estas las mas usadas.

# Define un id
. Define una clase
{ Marca el inicio
} Marca el final
: Marca el inicio de la estilizacion de algo(background, width, heigth,etc etc etc)
; Marca el final de la estilizacion.

Ahora un ejemplo utilizando todo:

Para un id:


#header {
background-image:url(x.jpg) no-repeat;
}

Para un class

.catbg {
background-image:url(x.jpg) no-repeat;
}

Para cambiar el fondo se usa "background" , pongamos un ejemplo donde pondremos el fondo negro

background: #000000;

Para poner una imagen de fondo se usa "background-image" , luego se declara la url(tiene que estar en la carpeta del theme o en una carpeta dentro del theme) y al final se declara si se repite o no y hacia donde en eje (X,Y [Coordenadas cartesianas])

Ejemplo de fondo con imagen dentro de la carpeta del theme la cual no se repetira:

background-image:url(imagen.jpg) no-repeat;

Ejemplo de fondo con imagen en el subdirectorio "imagenes"; la imagen se repite horizontalmente (X)

background-image: url(../imagenes/imagen.jpg) repeat-x;

Ahora con repeticion vertical (Y)

background-image: url(../imagenes/imagen.jpg) repeat-y;

Listo, ya les ensen~e lo basico de poner imagenes, ahora unas cuantas cosas mas referente a las imagenes.

Ancho de imagen.
width:Xpx;(donde X es un numero y px significa pixeles)

Alto de imagen.
heigth:Xpx;

Y mas funciones que con el tiempo les ire explicando(Recuerden, esta es la primer entrega, solo generalizaremos un poco tomando una clase corta y lo mejor explicada que pueda)

Ahora si, ya saben lo esencial basico para empezar, recuerden que los colores se escriben en HTML o si no lo saben, en Imgles, la proxima entrega empezaremos a editar un theme que yo mismo les dare, comenzando por lo mas sencillo, las letras y los colores de las mismas.

NOTA: YO NO SOY NINGUN TIPO DE MAESTRO, ASI QUE ANTES DE CRITICAR UN POSIBLE"MAL EXPLICADO" TOMEN EN CUENTA QUE LO HAGO CON INTENCION DE COMPARTIR CONOCIMIENTOS, NO CON INTENCION DE GANAR ALGO.

Copyright SMF Personal, AnimeDK, FXAnime.
Si quieres usar este post, no borres los derechos de quien lo comenzo, o pide permiso del autor para hacerlo.

2010 ADK.


« Última Modificación: Marzo 31, 2010, 01:35:18 pm por lucas-ruroken »



Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,