#Apolo:tutoriales

[apolocodes]

Skin con solo Css para foroactivo parte 1

¡Hola mis queridos tumblureros!

¿Estás de broma Apolo harás un skin sólo usando css? ¿QUÉ TE FUMASTE? ¿ESTA TODO BIEN EN TU VIDA? Sí, sí mis olimpicos, hoy haremos un skin puramente con css porque me gusta meterle retos a mi vida y porque me parece la forma más simple de introducirlos al mundo del codeo.

El Skin lo realizaremos entre todos y este tutorial será por partes. NO TOCAREMOS ningún template por ahora ya que la intención es que puedan pulir sus habilidades de css, antes de que me ponga a enseñarles cómo manosear las zonas html y los javascript... En fin, sin más preámbulos a lo nuestro.

Parte 1:

Aclaración: Al ser solamente css no necesitaremos la cuenta fundadora para realizar los cambios pero sí una cuenta administrativa.

• Vamos al panel de administración ► Visualización ► Elegir un tema: phpBB3 (Hoy usaré este pero pueden elegir el que quieran).

• Luego iremos a: panel de administración ► Visualización ► Índice ► General : Ahí pondremos que se vean los conectados Al píe del índice (ustedes pueden escoger la cantidad de horas)

• Ahora en: panel de administración ► Visualización ► Índice ► Estructura y Jerarquía : Yo lo pondré en Separa las categorías en el índice : Medio

• En este momento empieza dónde la creatividad se adueñará de ustedes, en la sección:  panel de administración ► Visualización ► Cabeceras y Navegación pueden poner lo que ustedes quieran, con o sin título, centrado o a un costado todo vale, en este caso ya que es un tutorial yo lo dejaré por defecto.

En la sección imágenes quitaremos las de los bordes redondeados y todas las que nos parezcan feas y no queramos tener.

En los colores : por ahora quitaremos toodoos los fondos y contornos.

LISTO TENEMOS NUESTRA BASE REALIZADA.

PARTE 2

Panel de administración ► Visualización ► Imágenes y Colores ► Colores ► CSS Stylesheet

¿Lo encontraron? ¿Apretaron en dónde dice Css stylesheet? ¿Vieron todo blanco? No se escondan, no teman... estamos aquí para cambiar todo eso y volverlo algo hermoso.

Lo primero que vamos a escribir es

Código:

body {   background-image: url(PONGAN AQUI EL LINK);   background-attachment: fixed;   background-color: #222;   background-position: 31% 100%;   color: #444;   background-repeat: no-repeat;   background-size: 100%; }

¿Y esto qué miércoles es Apolo? YA ME ESTAS MAREANDO.

No mijos, esto lo que hará es lo siguiente: background-image es el sitio por si en vez de tener un color fijo quieres poner una imagen, el resto te posicionará la imagen, puedes jugar con los porcentajes y variarlos para que la manera en la que vemos la imagen se modifique, puedes quitar todo lo relativo a la imagen y solo poner background: color; si quieres un color base.  Fuera de eso, dónde dice no-repeat hará que no tengamos una y otra vez la imagen repitiéndose (mi recomendación personal es que busquen un fondo con 1920px de ancho).

Ahora que tenemos nuestra hermosa base vamos a hacer un freno pequeñito para elegir colores. Para ello pensamos en la paleta de colores que deseamos ¿Claros u oscuros? ¿Con qué acentos? Y como soy de esa gente que le gusta ahorrarse el tiempo los pondremos arriba de todo y llamaremos a esa zona variables, les dejo aquí un ejemplo:

Código:Seleccionar todo

/***VARIABLES****/ :root {  --fondo: #141414;  --borde: 5px solid #111;  --oscuro: #000;  --acento1: #52549d;  --acento2: #529d5c;  --acento3: #9d5252;

Y por último vamos a aplicar lo aprendido en el tutorial que hice sobre wraps. 

Código

#wrap {  width: 1100px;  background: var(--fondo);  border: var(--borde);  outline: 1px solid var(--oscuro);  margin: 50px auto; }

Antes de continuar me encantaría que si tienen dudas me consulten y si lo están siguiendo me cuenten cómo van. 

#Apolo:tutoriales #foroactivo #forumactif #css #skins

[apolocodes]

SKIN CON SOLO CSS PARA FOROACTIVO PARTE 2

¡Hola semidioses!

Ya estamos con la segunda parte de este enorme tutorial, en el anterior tramo hicimos las variables y el cuerpo del foro. En esta oportunidad vamos a hacer la portada, el título y el navbar. ¡Es muy poco Apolo! Lo sé, lo sé, pero no queremos hacer esto super extenso ¿o sí?.  

Así que manos a la obra:

Parte 1: Navbar

Soy un ser que le gusta empezar a codear de arriba para abajo, ¿Por qué? Porque me es más fácil de organizar. Por lo que primero haremos será el navbar.

¿Qué quiero que haga este navbar?  Ser hermoso... estar arriba del todo y que me siga. ¿Y todo con css? Sí, porque tú amas al css, yo amo al css, él ama al css, TODOS AMAMOS AL DIOS CSS.

Vale, vale, en el mismo sitio dónde estábamos colocando las cosas en el tutorial anterior (Panel de administración ► Visualización ► Imágenes y Colores ► Colores ► CSS Stylesheet)

Añadiremos lo siguiente:

Código:

ul.linklist.navlinks {   position: fixed;   background: var(--fondo);   top: 0;   right: 0;   left: 0; padding: 10px;   width: 100%;   border-bottom: var(--borde);   z-index: 999; }

Bien, ahora la explicación:

•La position fixed más el top: 0 = harán que este siempre arriba

•Nuestro left y right en 0 le indica que debe ocupar desde el inicio de cada lado, el width: 100% nos ayuda a declarar lo mismo.

•En cuanto al background estamos eligiéndole un color, y el border-bottom hace que tenga un borde debajo.

•¿Para qué el z-index? Bueno eso es una cosa preciosa que le dice numéricamente al css que es prioritario y qué va arriba de qué (lo amarán cuando empiecen a utilizarlo).

•¿Qué podemos cambiar? Todo... desde colores hasta posición, si quieren que abarque más o menos, si desean que se quede abajo de la portada, todo es editable. ¡Les animo a buscar ustedes mismos lo que quieren!.

Botoncitos del navbar

Esta parte la dividiremos en varias zonas:

Código:

ul.linklist.navlinks li {display: inline-flex;}

Esto puede ser modificado por cualquier tipo de display que se quiere, dependiendo de lo que cada uno quiera hacer puede ser, block, flex, etc

Código:

a.mainmenu {     color: #f1f1f1;   text-transform: uppercase;   font-family: Montserrat; }

Esta parte es el menú en sí puedes modificar la letra, el color de la letra, la fuente, etc.

Código:

a.mainmenu img { display: block;   background: linear-gradient(45deg,var(--acento1),var(--acento2));   padding: 10px;   border-radius: 5px;   text-align: center;   margin: 5px; -webkit-transition: 0.6s;   transition: 0.6s;   -ms-transition: 0.6s;   -o-transition: 0.6s;   -moz-transition: 0.6s; }

Esto es para modificar las imágenes, ¿Qué son esas cosas extra que agregue? Son para una transición de querer hovers estos pueden ser aplicados en otros sitios y cambiar el tiempo (0.6s significa que tardará esa cantidad de tiempo medido en segundos, puedes bajarlo o subirlo).

Código:

a.mainmenu img:hover { padding: 15px; transition: 0.6s; background: linear-gradient(45deg, var(--acento1),var(--acento3));}

Y aquí tenemos un hover.

¿Qué es eso de background: linear-gradient? Es un gradiente que hace que tengas una transición de colores pero puedes poner un solo color como base, como siempre intenta crear a gusto y placer. ¿Y el padding para qué? En este caso se utilizó para hacer más grande el botón.

En mi caso he elegido usar solamente los iconos porque me resultaba más bonito... pero ustedes pueden poner lo que juzguen mejor para su foro (por lo que solo añadí el css correspondiente a la parte de imágenes).

Parte 2: Portada (Imagen)

Código:

#logo-desc img { width: 1080px; height: 550px; }

Este hermoso código le dice a tu imagen que tamaño tener. Peeeeeeeeroooooo... ¡Pueden hacer muchísimo más con el logo! ¿Qué cosas Apolito de mi vida? Hacerlo un circulo central: ( clip-path: circle(50% at 50% 50%); ) o una cruz (clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);), ponerlo en posición absolute y que sea del tamaño de toda la pantalla como el navbar...  (deberías reemplazar el código anterior por esto:    #logo-desc img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 500px; } si haces esto el #wrap debería tener un margin-top:500px; o superior), ¿Quieres que tenga bordes? Ponle bordes entonces border: 10px solid var(--acento1); } entre un millar de cosas locas que se te pueden ocurrir y que me encantaría ver...

Parte 3: El título y subtitulo

El último tramo de este tutorial ¡Que felicidad!

Código:

#site-title {     position: absolute;   margin-top: -300px;   margin-left: 10px; } #site-title, #site-title h1 {   color: #fff;   font-size: 40px;   font-weight: 700;   padding-top: 15px;   text-transform: uppercase;   font-family: Montserrat; }

Lo dividiré en dos partes la primera le va a decir a nuestro título dónde ubicarse, tu decides si tenerlo más arriba, más abajo, más al centro, etc

La de abajo nos habla de la fuente en sí, la cual puedes experimentar cambiando su tipografía, color, agregando sombras, etc.

En cuánto a los subtítulos

Código:

#logo-desc p { position: absolute;   margin-top: -213px;   color: white;   margin-left: 50px;   display: block;   background: linear-gradient(45deg, var(--acento1), var(--acento2));   width: 535px;   border-radius: 10px;   padding: 5px;   font-family: Montserrat;   opacity: 0.9; }

¡A la pelotita Apolo le pusiste de todo! Bueno... sí. Pero es meramente para explicarles: el border-radius hará que lo veamos con curvitas. el width: nos indica el tamaño; la opacidad esta un poco más baja que la normal, todas estas cosas son modificables, incluso si no quieres que tenga subtítulos puedes simplemente poner {display: none;}

#Apolo:tutoriales #foroactivo #css #skin #forumactif

[apolocodes]

Hacer un skin solo con CSS parte 5

¿Ha llegado finalmente un nuevo tutorial?

Así es mis queridos olimpicos es momento de continuar haciendo un skin con solo CSS. ¿El tema de hoy? LAS CATEGORÍAS.

Retomando la línea de mis tutoriales anteriores hoy les traigo las categorías, a esta sección la dividiré en dos contenidos: 1. Cómo crear categorías y sus opciones. 2. Editar con css la zona.

¿Tienes ya tu café, té, chocolate o cerveza? Entonces empecemos.

#1 ¿Cómo crear categorías y qué opciones tiene?

• Panel de Administración - General - Categorías y foros

Aquí en el mismo renglón del título del foro encontrarán un + en verde. ¿Lo ven? Está medio escondido así que no se preocupen si no lo localizan a la primera. Una vez lo tengas podrás crear una categoría y señalar si quieres un foro.

¿Cuál es la diferencia entre categoría y foro?

La categoría ordena y agrupa los foros. Es el enorme título que suelen llevar arriba. En cambio los foros son los sitios destinados a crear temas y los que permiten la interacción con el usuario.

Una vez has elegido entre foro y categoría crearemos una categoría con foro.

Tenemos las opciones de poner una imagen, una descripción o ambos. Nosotros haremos las tres cosas así pueden aprender.

• Foro con imagen: En este caso yo elegiré un tamaño de 465x120px peeeroo... pueden elegir lo que quieran, les recomiendo que no sea más ancha que el wrap ni demasiado larga porque podr��a ser demasiado pesado para el foro y además podría quedar muy mal si se sale, lo pueden poner en la descripción o en la dirección de la imagen en este caso lo pondré en la primera.

• Foro con texto: Les recomiendo poner en inicio uno largo para que no tengan imprevistos. En esta parte Sí les diría que añadan un simple html que quede así:

• Foro con texto e imagen: Podemos ponerlo todo en la descripción ó poner la imagen en Dirección de la imagen y en descripción añadir

Para la explicación con hover:

ó para la explicación sin hover

.Recomiendo la segunda opción si quieres que el texto quede fijo o la primera si deseas ponerle un hover.

#2 Editar todo con css

Con esta base comenzaremos a codear el css. 1) ul.topiclist.forums : Esta zona abarca la totalidad de los foros en esa categoría. Aquí definiré un color, un borde abajo que marque el final, un borde que redondee la parte de abajo y cuanto espacio (margen) habrá entre categorías:

ul.topiclist.forums{    background: var(--oscuro);    border-bottom: 2px solid var(--acento1);    margin-bottom: 10px;    border-radius: 0px 0px 12px 12px; }

2) li.row : Esto abarca cada una de los subforos individuales, en este caso le pondremos un fondo, un borde abajo, y un margen, pero pueden probar lo que gusten.

li.row { border-bottom: 3px dotted var(--acento2);    margin: 5px;    background: var(--fondo); }

3) dd.dterm : Honestamente muchas veces en los skins me he salteado adrede esta zona, en otros no, el código de esta parte aplica a la zona del título de la categoría, el icono del costado y la descripción del foro, en esta oportunidad para mostrarles le pondré algunas cosas como un ancho y un padding.

dd.dterm { padding: 5px;    width: 62%!important; }

4) a.forumtitle : Es la zona del título del foro ¡Es hermoso andarlo editando! Les diría que jueguen mucho y se diviertan haciéndolo con cualquier idea que se les ocurrá en este caso añadiré los siguientes atributos.

a.forumtitle {    display: block;    text-align: center;    background: linear-gradient(45deg,var(--acento1),var(--acento2));    font-family: April Fatface;    text-transform: uppercase;    color: white;    font-size: 18px;    text-shadow: 1px 1px black;    letter-spacing: 1px;    width: 101%; }

5. Nuestra imagen se encuentra en dd.dterm img aquí pondremos algunas cosas, en mi caso difiniré el tamaño de imagen para que todas sean iguales, también pueden jugar con los blend-mode o ponerle simplemente bordes.

dd.dterm img {    border: 5px solid var(--oscuro);    outline: 1px solid var(--acento1);    margin-top: -5px;    width: 465px; height: 120px; }

6. Nuestro texto bueno aquí usamos un poco de html por lo que nuestra clase sería:.nuestrotextocate ¿Qué le pondremos? El tamaño (width, height, padding), el tipo de fuente y su color (font-size, font-family, color), la forma (display, overflow), bordes y decorados (border, outline). Recuerden que las cosas que les dejo realizadas son simplemente de muestra.

.nuestrotextocate {    width: 455px;    text-align: justify;    color: #ccc;    font-size: 13px;    height: 120px;    display: block;    font-family: 'Montserrat', sans-serif;    overflow: auto;    border: 5px solid var(--oscuro);    outline: 1px solid var(--acento1);    padding: 5px; }

7. Cómo se habrán dado cuenta nosotros hicimos dos tipos de texto así que ahora usaremos el que está junto a una imagen... y aquí viene la hora de jugar mucho.

Les dejaré algunas opciones: → Hacer que el texto este sobre la imagen (cambia el color del background por transparent o uno con la opacidad bajada):

.nuestrotextocate2 {    background: #58c3664d;    height: 110px;    display: block;    position: absolute;    width: 455px;    margin-left: 5px;    padding: 5px;    text-align: justify;    font-size: 12px;    overflow: auto; }

→ Hacer que el texto este a un costado de la imagen (juega con el margen-left para ponerlo del lado que desees), recuerda que puedes ponerle el color de background que quieras:

.nuestrotextocate2 {    background: #58c3664d;    height: 110px;    display: block;    position: absolute;    width: 216px;    margin-left: 5px;    padding: 5px;    text-align: justify;    font-size: 12px;    overflow: auto; }

→ Hacer que el texto aparezca vía hover ¡UY UY UY SE COMPLICA LA COSA! Bueno no desesperen esta parte puede ser más compleja pero intentaré explicarlo lo mejor posible.

¿Recuerdan que les había dado esta opción? :

Lorem impusi...

Bueno con esto usaremos dos partes en el css la primera se llamará .nuestrotextocate1 y la segunda .nuestrotextocate1:hover

Les explicaré el más simple (en mi humilde opinión), lo primero será ponerle altura, ancho, color de fondo, display: block; la posición: absolute y opacity: 0; con esto estaremos realizando una cajita (que no la podremos ver porque le pusimos 0 de opacidad), además hay que añadir las propiedades de fuente y las transiciones (esto nos dirá el tiempo que tarda en realizarse el efecto). Les debería quedar algo así:

.nuestrotextocate1 { background: var(--acento2);    position: absolute;    height: 110px;    display: block;    margin-left: 3px;    padding: 5px;    width: 455px;    text-align: justify;    color: #ccc;    overflow: auto;    opacity: 0;    -webkit-transition: all 0.4s ease-in-out 0s;    -moz-transition: all 0.4s ease-in-out 0s;    transition: all 0.4s ease-in-out 0s; }

Luego hay que añadir la palabra :hover y la opacidad: 1, nos quedaría así:

.nuestrotextocate1:hover {opacity: 1;}

Llegamos al último tramo del tutorial ¡Se hizo gigante! Ahora tenemos que acomodar los números del costado y el último tema.

dd.topics : Es para editar la zona que nos dice la cantidad de temas.

dd.posts : Es el sitio de la cantidad de post.

Yo pondré ambos con el mismo código para ahorrar líneas de css

dd.topics, dd.posts {    width: 17%;    display: inline-block;    background: linear-gradient(45deg,var(--acento1),var(--acento2));    margin: 5px;    text-align: center;    color: #ccc; }

Bueno aquí pondré algo extra en el panel de administración iré a "Índice - Estructura y Jerarquía:  Mostrar los avatares en la columna "Últimos mensajes" Sí" con eso nos mostrará el avatar del último usuario en responder (no es necesario añadirlo).

dd.lastpost {   background: linear-gradient(45deg,var(--acento1),var(--acento2));    margin: 5px;    width: 35%;    height: 103px;    font-size: 17px;    color: #ccc; }

La parte de la imagen:

.lastpost-avatar img {    width: 65px;    height: 90px;    border-radius: 5px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px; }

¡Y ahora sí se ha acabado! Nos vemos en el siguiente :D

#Apolo:tutoriales #tutorial #css #skin #foroactivo #forumactif #diseño #web #juego de rol #rol #español #ayuda #recursos

[apolocodes]

Hacer un skin SOLO con CSS Parte 3

Hola a todos, otro tutorial puro css. ¡YEEEEY! Hoy vamos con los módulos también llamados widgets.

Hay varias partes para editar en los mismos como yo dije que no haría nada con html y que este skin estaba realizado puramente con css, usaré algunos de los que tenemos por defecto, en este caso escogí el de conexión, últimos temas y calendario.

Para usarlos vayan a Panel de administración - Módulos - Gestión de los módulos del foro - Mostrar los módulos del foro: Sí

Además de ello le puse anchura de columna 1(izq) un total de 200píxeles, ustedes lo pueden modificar a gusto y placer.

Sin más preambulos, vamos a lo nuestro:

Parte 1: El contenedor

Volvemos a nuestro Css stylshett (el que esta justo al lado de los colores).

El contenedor de todos los modulos se llama #left

¿Qué podemos editar en el? Todo lo que quieran, color, bordes, fondos, tamaño, incluso lugar en el que desean tenerlo (para esto usen position: absolute, y margenes que le expliquen al contenedor dónde debe estar). Dejaré aquí una muestra de como me quedó a mí:

#content-container div#left {    width: 200px;    float: left;    margin-right: 3px;    overflow: hidden;    background: var(--fondo);    border: var(--borde); }

Parte 2: Títulos de los Widgets

Estos se llaman h3 pero como en muchos sitios foroactivo pone h3 vamos a ser más especiales a la hora de nombrarlos y ponerle también el nombre de su padre: .module .h3

.module .h3 {    background: linear-gradient(45deg, var(--acento1), var(--acento2));    text-align: center;    color: white;    border-radius: 5px;    padding: 10px; }

¿Apolo lo dejarás así de normal? No, porque ya me conocen si puedo complicarme la vida lo hago...

Así que vamos a meterle un hover lara lara.

.module .h3:hover { background: linear-gradient(45deg, var(--acento2), var(--acento3));    text-shadow: 2px 1px black;    transition: 1.5s; }

PARTE 3: WIDGETS ESPECIFICOS

A) Conectarse:

Bueno ya con la base realizada nos pondremos a editar específicamente los widgets que tengo puestos... esto lo pueden obviar y poner los suyos propios pero bueno.

Widget de conexión

dl.mod-login-avatar {    width: 170px;    background: linear-gradient(45deg, var(--acento1), var(--acento2));    padding: 5px;    border-radius: 5px; }

¿Qué es esto? Aquí estamos estableciendo la zona dónde irá el avatar del usuario. En este caso generaremos como un fondo, es totalmente precindible su edición pero en lo personal me gusta darle vueltas a las cosas.

dl.mod-login-avatar img {width: 170px; border-radius: 5px;}

¿Y esto Apolo? Es la imagen de avatar de usuario en sí, aquí podremos poner un ancho, un largo, un borde, si lo queremos redondeado si no, etc.

.module form p label {    color: var(--acento1);    text-transform: uppercase;    text-align: center;    display: block; margin-top: 13px; }

input#username.inputbox.autowidth, input#password.inputbox.autowidth {    width: 91%!important;    background: linear-gradient(45deg, var(--acento2), var(--acento3));    padding: 5px;    border: var(--borde);    color: black; }

Estos dos códigos modificaran la zona desde invitado, el de arriba los títulos Nombre de usuario y Contraseña, el segundo lo que hace es modificar los cuadraditos dónde rellenaremos los datos.

input.button1 { display: block;    background: linear-gradient(var(--acento1), var(--acento2));    color: white;    border: var(--borde);    padding: 10px;    border-radius: 15px;    text-transform: uppercase; }

input.buttom1:hover { background: linear-gradient(var(--acento2), var(--acento3)); }

Este es el botón de conectarse. Lo que hicimos aquí fue darle fondo, color de letra, borde, espacio, curvarlo un poco y poner que este en mayúsculas la letra, en el de abajo le pusimos un hover.

.module .box-content .mod-login {    display: block;    text-align: center;    color: #fff;    margin-top: 8px;    margin-left: -1px;    text-transform: uppercase; }

.module .box-content .mod-login dd {background: var(--oscuro); padding: 5px;}

El de arriba modifica el título: Mensajes y Mensajes privados. El segundo la parte de la información de los mismos.

.mod-login p.center a {color: var(--acento2);} .mod-login p.center a:hover {color: var(--acento3);}

Esto modificará la parte que dice "Mi perfil"

Terminamos el modulo de conexión ahora vamos con el de calendario.

B) Calendario:

#calendar .center, #mini-calendar .center {color: white;} #calendar table.table1 tbody th {background: var(--acento1);}

Hará que los títulos de los días tengan color.

#calendar td.row2.hover-td.center, #calendar td.row3.hover-td.center, #calendar td.hover-td.center {border: 1px solid var(--oscuro);}

Hará que cada fecha tenga un cuadrado.

#calendar a.gen { background: linear-gradient(var(--acento2), var(--acento3)); }

Marcará que cada vez que vean un evento sea con colores.

C) Últimos temas

#comments_scroll_div{    font-family: Roboto;    text-transform: uppercase;    color: #fff;    background: #0000008f;    border: 5px solid var(--oscuro);    border-radius: 5px;    padding: 5px; text-align: center; }

Esta parte es la base (lo del fondo) de la zona de últimos temas, nosotros aquí editamos: la letra, el color, el borde, etc. ¡Sean creativos y hagan algo hermoso!

#comments_scroll_div a{    display: block;    background: var(--acento1);    color: white;    padding: 5px;    border-radius: 5px;    border: var(--borde); }

Este es el link, una aclaración importante, los últimos temas tienen dos links uno al tema en sí y el otro al usuario que respondió, este código se aplica a ambas cosas a la vez.

Espero que este tutorial les sirviese! Nos vemos en el próximo.

#Apolo:tutoriales #foroactivo #forumactif #css #skins