Rdio.
¿Volvera?
Bueno primeramente muchos me han pedido que les ayude con este tema y también me han dicho que como se hace esto, el otro, etc. Así que esta vez les enseñare lo mejor que pueda, como hacer sus propias Plantillas CSS. Hay posibilidades de que estos tutoriales o tutorial se divida en muchas partes para explicar un poco mas sobre esto.
¿Que beneficios tiene esto?
Mas posibilidades de plantillas. Evitamos completamente el que otros usuarios tomen las plantillas de nuestros proyectos. Podremos conocer mas la función de este BBCode. La presentación de los proyectos tendrá mas estilo y eso tendrá mas audiencia.Para no darles sueño con la teoría tan larga que tiene este tema, solo les hablara de el estilo que se le da con las "propiedades" y aclarare lo que es el BBCode llamado "CSS-DIV".
Es un botón para agregar en el apartado de la zona de texto, un código o termino HTML, mas o menos: [.CSS-DIV=""][/CSS-DIV.] su significado es "CSS" cascading style sheet(español hojas de estilo en cascada) y "DIV" división o divisiones, que crea apartados/contenidos. Dentro de las comillas se ponen las propiedades para cada DIV - Estilo y dentro de ambas llaves va el contenido.
Las propiedades por defecto que este tiene son las siguientes:
border: 1px solid #BBB; (Borde) solo genera un verde a la caja.
margin: 0px auto; (Margen) ajusta la caja de modo que quede centrada.
padding: 2px 5px; (Relleno) Establece la anchura de algunas o todas las zonas de relleno de los elementos
position: static!important; (Posición - Estático) cambia la posición por defecto
Las propiedades que normalmente se emplea para las Plantillas CSS para nuestros proyectos son las siguientes (Ingles - Español - Definición):
Predeterminados:
Background(Fondo): Este tiene una gran profundidad puedes colocar un fondo, imagen, cambiar el tamaño del mismo, su posicion, etc.Width(Ancho): Establece la anchura de los elementos de bloque sea por px(pixel),%(porciento),etc.
Height(Altura): Establece la altura de los elementos de bloque.
Margin(Margen): Establece la anchura de algunos o todos los márgenes de los elementos. Usando top,bottom,left y right (arriba,abajo,izquierda y derecha).
Border(Borde): Permite establecer simultáneamente los bordes de bloque. Tiene diferentes estilos:
Text-Align(Alinear Texto): Alineación del contenido de un elemento de bloque. Tiene diferentes estilos: Right(Derecha),Left(Izquierda),Center(Centrar) y Justify(Justificado). Ocultos (start,end,inherit y initial)
Border-Radius(Redondear el borde): Redondean las 4,3,2 o solo 1 esquina de nuestro bloque.
Float(Flotar?): "Sobre pone en el aire nuestro bloque", sea con: right o left.
Box-Shadow(Sombra): Genera una sombra a nuestro bloque, tiene un uso asombroso, por que puedes colocar de 1 a infinidad de sombras.
Text-Shadow(Texto con sombra): Genera una sombra a todo el texto de nuestro bloque.
Otros:
Font-Weight(Grosor de la fuente): Hace mas gruesa la fuente, el valor es de enteros, desde 100 hasta 900. Aunque se puede usar: bold,bolder,lighter,initial,etc.Font-Size(Tamaño de fuente): Cambia el tamaño de fuente, sea en px,em,%,etc.
Color(Color): Cambia el color de los textos.
Font-Family(Cambia la fuente): Cambia la fuente de nuestro bloque. Con este se puede jugar, las fuente predeterminadas son:
(CSS: Fonts) , tendré que verificar si puedo colocar un link externo ( Tengo permiso de @Sayer301! ).
Paso 0.
El paso 0 si no tienes ideas o aun no sabes mucho del tema, es buscar en Dios-Papi Google lo siguiente: Web Template, esto buscara estructuras de sitios web de y se pueden sacar ideas. Aunque un gran contra de esto, es que la propiedad position no surte efecto y eso nos quita infinidad de productividad. Una vez encontrada la que nos guste, yo usare esta: AQ
Paso 1.
Bien es hora de adaptar esa plantilla a CSS y preguntaras ¿Como?, la idea no es como si no hacerlo. Ahora vamos por el primer bloque osea el cuerpo OH si tienes buena vista te diste cuenta que el Web Template que usaremos no tiene cuerpo, pues sin cuerpo. Solo usaremos las propiedades:
Paso 2.
Ahora toca hacer las zonas de la cubeta y el internet explorer, que mas o menos, serian el apartado de Información, Historia, Scans, Premios, Fanbars, etc. Hay 2 opciones hacer este bloque con un programa gráfico o CSS(RECOMENDADO), manos a la obra:
Paso 3.
Juntamos los bloques anteriores en uno solo(con sus respectivas propiedades):
Agregamos un texto para darle mas formato y el logo del web template:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur consectetur dui, quis luctus est varius in. Donec volutpat elit lectus, non tempus urna mattis a. Integer lobortis vestibulum lacus, in consectetur felis. Maecenas a tincidunt odio. Sed pellentesque nisl vitae nisi auctor volutpat. Nam quam metus, commodo at urna vitae, suscipit blandit nunc. In eget laoreet lectus. Donec condimentum at justo vel porttitor. Nam enim turpis, consequat eu venenatis sit amet, faucibus congue augue. Donec in tempor lectus. Vivamus ligula urna, finibus id felis vel, egestas blandit purus. Aliquam vehicula cursus justo non tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vitae aliquam nisi. Aliquam eu ullamcorper elit.
Nam sed egestas ipsum. Vestibulum nec interdum justo, sed lobortis libero. Duis hendrerit venenatis enim ac lacinia. Suspendisse non venenatis massa. Fusce tristique quam erat, ac lobortis sem ultricies in. Donec convallis ac nunc ut hendrerit. Maecenas non luctus mi. Etiam consequat dui in rhoncus venenatis. Maecenas molestie, libero vitae gravida interdum, massa velit porta quam, id viverra metus neque quis magna.
Paso 4.
Cambiamos los campos por los de un proyecto y completamos el estilo de nuestra plantilla, usando las propiedades ya explicadas:
Han pasado 16 años desde que la región de Summerty salió de la horrible guerra civil que provocó el hermano del rey para robarle trono. Esa guerra robó todo el esplendor del que presumía la región, haciendo que las falsas promesas que hizo Snow Lancaster tras robar el trono fueran fácilmente creidas.
Ahora, 16 años después, justo cuando la región comienza a recuperarse de las graves consecuencias de la guerra, las tropas de Snow empiezan a destruirlo todo con el pretexto de buscar un extraño objeto encontrado por un antiguo explorador que se dice que podría dar el poder de destruir o rgenerar la región, el Ojo Del Tigre.
Cansados de la tiranía de los Lancaster, una misteriosa organización llamada Sinsajo se rebela contra Snow y hace todo lo posible por derrocarlo.
[Player] Greener es un joven de Villa Topacio que al desaparecer su mejor amiga, decide ir a buscarla por la región; pero, en uno de sus viajes, encuentra el diario de un antepasado suyo que le muestra como encontrar el Ojo Del Tigre y salvar la región.
El paso 0 si no tienes ideas o aun no sabes mucho del tema, es buscar en Dios-Papi Google lo siguiente: Web Template, esto buscara estructuras de sitios web de y se pueden sacar ideas. Aunque un gran contra de esto, es que la propiedad position no surte efecto y eso nos quita infinidad de productividad. Una vez encontrada la que nos guste, yo usare esta: AQ
Paso 1.
Bien es hora de adaptar esa plantilla a CSS y preguntaras ¿Como?, la idea no es como si no hacerlo. Ahora vamos por el primer bloque osea el cuerpo OH si tienes buena vista te diste cuenta que el Web Template que usaremos no tiene cuerpo, pues sin cuerpo. Solo usaremos las propiedades:
✔ border:none; ✔ width: NUMERO%; ✔ background: rgb(1, 21, 30);;
Para colocar el fondo, ajustar el ancho y quitar el borde. OJO cuidado con no quitar el punto y coma.Hola
Paso 2.
Ahora toca hacer las zonas de la cubeta y el internet explorer, que mas o menos, serian el apartado de Información, Historia, Scans, Premios, Fanbars, etc. Hay 2 opciones hacer este bloque con un programa gráfico o CSS(RECOMENDADO), manos a la obra:
P1: Generar 3 codes, 2 dentro de uno, de esta forma.
P3: Que pasa, se ve feo, ahora con la propiedad de float, margin y width lograremos que sea vea como la imagen:P4: Hacemos lo mismo pero la imagen de lado derecho y lo juntamos con el anterior, quedara de esta forma:
1
P2: Rellenamos los campos como en la respectiva imagen.2
3
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan et iusto odio dignissim qui blandit natur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan.
Paso 3.
Juntamos los bloques anteriores en uno solo(con sus respectivas propiedades):
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan et iusto odio dignissim qui blandit natur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan.
Agregamos un texto para darle mas formato y el logo del web template:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur consectetur dui, quis luctus est varius in. Donec volutpat elit lectus, non tempus urna mattis a. Integer lobortis vestibulum lacus, in consectetur felis. Maecenas a tincidunt odio. Sed pellentesque nisl vitae nisi auctor volutpat. Nam quam metus, commodo at urna vitae, suscipit blandit nunc. In eget laoreet lectus. Donec condimentum at justo vel porttitor. Nam enim turpis, consequat eu venenatis sit amet, faucibus congue augue. Donec in tempor lectus. Vivamus ligula urna, finibus id felis vel, egestas blandit purus. Aliquam vehicula cursus justo non tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vitae aliquam nisi. Aliquam eu ullamcorper elit.
Nam sed egestas ipsum. Vestibulum nec interdum justo, sed lobortis libero. Duis hendrerit venenatis enim ac lacinia. Suspendisse non venenatis massa. Fusce tristique quam erat, ac lobortis sem ultricies in. Donec convallis ac nunc ut hendrerit. Maecenas non luctus mi. Etiam consequat dui in rhoncus venenatis. Maecenas molestie, libero vitae gravida interdum, massa velit porta quam, id viverra metus neque quis magna.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan et iusto odio dignissim qui blandit natur aut odit aut fugit. Duis autem vel eum iriure vero eros et accumsan.
Paso 4.
Cambiamos los campos por los de un proyecto y completamos el estilo de nuestra plantilla, usando las propiedades ya explicadas:
Han pasado 16 años desde que la región de Summerty salió de la horrible guerra civil que provocó el hermano del rey para robarle trono. Esa guerra robó todo el esplendor del que presumía la región, haciendo que las falsas promesas que hizo Snow Lancaster tras robar el trono fueran fácilmente creidas.
Ahora, 16 años después, justo cuando la región comienza a recuperarse de las graves consecuencias de la guerra, las tropas de Snow empiezan a destruirlo todo con el pretexto de buscar un extraño objeto encontrado por un antiguo explorador que se dice que podría dar el poder de destruir o rgenerar la región, el Ojo Del Tigre.
Cansados de la tiranía de los Lancaster, una misteriosa organización llamada Sinsajo se rebela contra Snow y hace todo lo posible por derrocarlo.
[Player] Greener es un joven de Villa Topacio que al desaparecer su mejor amiga, decide ir a buscarla por la región; pero, en uno de sus viajes, encuentra el diario de un antepasado suyo que le muestra como encontrar el Ojo Del Tigre y salvar la región.
Explora la nueva y exuberante región de Candelia
Consigue las medallas de la valía para poder liderar la organización Sinsajo.
Derroca al tirano Snow
Descubre la joya del Ojo del Tigre, un amuleto que potencia el crecimiento natural.
Consigue las medallas de la valía para poder liderar la organización Sinsajo.
Derroca al tirano Snow
Descubre la joya del Ojo del Tigre, un amuleto que potencia el crecimiento natural.
Brock: Por apoyarme siempre, ayudarme con los gráficos y sopor.
Pabel: Porque siempre está dispuesto a darme su opinión y ayudarme con mis dudas
Sceptile 9: Porque siempre sé que si necesito ayuda con un script puedo recurrir a el.
A todos los usuarios de Wah que ayudan con las dudas de novatos como yo
A los que estáis viendo este hack, por vuestro simple interés.
A Game Freak por crear una gran saga por la cual todos nosotros estamos ahora reunidos en este foro.
Pabel: Porque siempre está dispuesto a darme su opinión y ayudarme con mis dudas
Sceptile 9: Porque siempre sé que si necesito ayuda con un script puedo recurrir a el.
A todos los usuarios de Wah que ayudan con las dudas de novatos como yo
A los que estáis viendo este hack, por vuestro simple interés.
A Game Freak por crear una gran saga por la cual todos nosotros estamos ahora reunidos en este foro.
Canal Oficial de Youtube: Guilly Alpha
Espacio WAH: Espacio Imperial
Espacio WAH: Espacio Imperial
Los datos del proyecto son de @El Guillyh
Cualquier duda, problema, pregunta,etc que tengan con cuestión al tema puede comentarla. Si necesita ayuda con respecto a adaptar un web template también pueden comentarla. Suerte y espero lo disfruten.
Última edición:
