#tutorial de códigos

[necromancercoding]

¿Necesitas que cada campo del perfil tenga su propia clase para poder editarlo individualmente? Con este simple código podrás tener una clase personalizada para cada campo dependiendo del nombre que tenga.

Primero, deberás ir a tus templates y buscar el que se llama "viewtopic_body". Ahí, busca este código:

<!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field -->

Y sustituirlo por este:

<!-- BEGIN profile_field --> <div class="ppfield"> <div class="ppflabel">{postrow.displayed.profile_field.LABEL}</div> <div class="ppfcontent">{postrow.displayed.profile_field.CONTENT}</div> </div> <!-- END profile_field -->

Lo único que tienes que hacer ahora para que funcione es añadir este código javascript en tu foro, activándolo en los temas.

https://pastebin.com/raw/PPWbtfEj

Este código está hecho para aquellos perfiles que tienen este diseño. Puedes cambiar lo que quieras del perfil, mientras que vuestros campos del perfil tengan el diseño mencionado antes.

Como puedes ver en esta captura de mi foro de prueba, las clases están ya asignadas. En campos que sean de más de una palabra (como fecha de inscripción) se pondrá sólo la primera como clase (.fecha), en el caso de otros que tengan paréntesis (como apodo(s)) se borrarán los paréntesis (.apodos).

Si te ha servido y/o lo estás usando, se agradecen los rebloggeos y los likes. Cualquier duda o problema, puedes contactarme por ask o por chat de tumblr. ¡Abrazos!

[necromancercoding]

En este tutorial, os mostraré dos formas de crear vuestra propia barra personalizada, ya sea con iconos, imágenes o texto en los botones, fija en la parte superior de la pantalla.

La primera forma resultaría en una barra de navegación fija usando la barra de navegación por defecto de ForoActivo. Es la forma más fácil de usar la barra, aunque sólo nos permite mantener imágenes, texto o ambas cosas como los links de la misma. Pese a todo, no tiene por qué tener un resultado limitado ni mucho menos, y si no te manejas mucho tocando templates o modificando muchas cosas, la recomiendo.

Un código muy básico para conseguir este efecto es el siguiente:

ul.linklist.navlinks {    background: #000;    position: fixed;    top: 0px;    left: 0px;    z-index: 99;    width: 100%;    text-align: center; }

Las posibilidades, por supuesto, son ilimitadas. Lo malo: Hay ciertos links que, si no los queremos, tendremos que quitarlos con CSS. Esto puede ser engorroso, así que aquí os dejo el código para borrar las páginas menos usadas: Calendario y FAQ (siempre y cuando no modifiquéis su posición en la lista; el número entre paréntesis equivale al orden de los links).

ul.linklist.navlinks li:nth-child(2), ul.linklist.navlinks li:nth-child(3) {    display: none; }

Lo bueno de este método es que ForoActivo nos ha bendecido con la posibilidad de añadir Links Personalizados donde puedes customizar qué usuarios ven cada link. Es rápido y sencillo, sin uso de codes o cosas raras.

¿Quieres usar texto pero no imágenes? Borra todas las imágenes de la barra de navegación en Gestión de Imágenes->Avanzado->General. ¿Quieres usar imágenes pero no texto? Activa la opción de "Anunciar únicamente las imágenes en la barra de vínculos" en Cabecerías y Navegación. Y no te preocupes si tu idea era usar alguna fuente de iconos como Font Awesome (personalmente es la que más uso); muchas de estas fuentes tienen un equivalente para que las instales en tu pc y puedas usar su Cheatsheet para tus botones.

También vale la pena decir que aunque pueda parecer simple, no tiene por qué serlo. Puedes modificar la zona de la navbar en la template de overall_header, concretamente la porción es esta (líneas 272-274):

<ul class="linklist navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul>

Puedes poner más elementos dentro de esta lista igual que editarías una barra de navegación completamente personalizada.

La segunda versión es la barra de navegación completamente personalizada: tú decides lo que pones en ella; texto, imágenes, lo que desees. Aquí entrará por supuesto en juego el diseño y la dificultad que estéis buscando, y aunque yo no entraré en modificaciones más laboriosas como poner un perfil en esta zona, podéis mandarme las cuestiones respecto a esto por ASK.

El código HTML vendría a ser algo así:

<div class="navegacion"> <a href="" class="linknav" title="">Link</a> </div>

Por supuesto, añadiendo tantos links como prefiráis. El código CSS vendría a ser el mismo, similar al anterior, pero cambiando la class.

.navegacion {    background: #000;    position: fixed;    top: 0px;    left: 0px;    z-index: 99;    width: 100%;    text-align: center; }

¿Y dónde se pone? En los módulos. Los módulos tienen la capacidad de poder personalizar quién ve cada módulo. Tendrás que hacer una barra de navegación para usuarios y otra para invitados, como mínimo. En diferentes módulos cada una.

Si sólo tienes puesto esto en módulos y te están ocupando un espacio vacío en tu foro, aplastando todo lo demás, añade por último este css:

#left {    width: 0px;    height: 0px; }

Como he mencionado antes, aquí el límite está en vuestra imaginación. Las barras de navegación pueden ser simples, con links o botoncitos y poco más, o pueden ser más elaboradas con elementos como menús dropdowns, información sobre el usuario y demases.

Cualquier duda o cuestión, mi ask está abierto a todas horas.

Los likes y reblogs de aquellos que consideréis este tutorial útil serán muy apreciados.

¡Abrazos!

[necromancercoding]

En la gran mayoría de casos, cuando tengo un cuadro de texto siempre le pongo padding, ya sea mayor o menor. Pero si tiene el scroll activado, en cuanto hace scroll el padding-bottom "desaparece", yéndose al final del texto del scroll. Así es como funciona el padding, pero puede verse algo extraño en el sentido estético. Hoy os traigo dos soluciones prácticas para casos así.

Primer método: Bordes.

Este método es rápido y simple, y os valdrá en la gran mayoría de casos. Lo recomiendo, sobretodo, cuando no podéis editar el HTML por cualquier razón. El código deberá ser similar a este:

.TUCONTENEDOR{ background:#FFF; border:10px solid #FFF; height:XXpx; overflow:auto; }

Si te fijas, el borde y el fondo son del mismo color. Este método puede resultar difícil de efectuar cuando el fondo tiene un fondo con opacidad o directamente una imagen, pero para eso tenemos el otro método. Además, yo le añado un padding-right de tres píxeles para que el texto no quede pegado al scroll, aunque si no siempre hace scroll puede añadirte tres píxeles a la derecha que no tendrás a la izquierda.

Segundo método: Margin en el child.

El segundo método es tan fácil como el anterior, pero aquí tendrás que modificar el HTML. Tu código HTML debería verse algo así:

<div class="TUCONTENEDOR"><p>Tu texto.</p></div>

Yo he usado el elemento p, pero puedes usar un div de igual manera. El código CSS se vería así:

.TUCONTENEDOR{ background:#FFF; height:XXpx; } .TUCONTENEDOR p{ height:XXpx; overflow:auto; margin:10px; }

Ten en cuenta que si la altura de tu contenedor, por ejemplo, es 200px, deberás restarle a la altura de tu contenedor el margin de arriba y de abajo (en este caso, tendría una altura de 180px). El ancho suele ajustarse automáticamente, pero el método es el mismo.

Como podéis ver, los dos métodos dan un resultado similar, por lo que la decisión de cuál usar queda a vuestro gusto. Tened en cuenta a la hora de usar el primer método que no podréis tener bordes; sí podréis tener un outline, pero el modo de uso de ese atributo es diferente al de los bordes. Si queréis usar de forma cómoda los bordes en vuestro contenedor, os recomiendo el segundo método.

Como siempre, cualquier duda o cuestión acerca del tutorial, estoy por ask o chat de tumblr. Los reblogs y likes si os ha ayudado se agradecen mucho. ¡Saludos!

[necromancercoding]

Ver los cambios en tu foro a tiempo real antes de aplicarlos es una forma rápida de diseñar y mucho más eficiente que escribir a ciegas si, como yo, se te hace más fácil diseñar si lo tienes delante. En este tutorial enseñaré el método que uso para diseñar mis foros.

Yo uso chrome, pero todos los navegadores tienen una versión de inspeccionar elemento. En este tutorial os mostraré el uso en Chrome. Tanto en Mozilla como en Chrome puedes abrir el inspeccionar elemento con el botón derecho y pulsando "Inspeccionar Elemento"; en Chrome también puedes abrirlo usando F12.

Para facilitarte las cosas, primero que nada pulsa en el botón con 3 puntitos en vertical, y en donde dice "Dock side" pulsa "Undock into separate window". Esto hará que tu DevTools esté en una ventana separada. La pestaña que usaremos la gran mayoría del tiempo es la de "Elements". Las secciones que usaremos son las siguientes:

Para crear nuevas líneas, pulsaremos el icono del "más". Esto generará un nuevo bloque de CSS con el nombre del elemento que estés seleccionando en el HTML; pero si quieres puedes cambiar esto simplemente borrando y poniendo el selector que desees.

Lo bueno de codear con este modo es, primero, que tienes sugerencias para cada atributo que pongas en tu CSS. Si pones overflow, por ejemplo, te dirá scroll, auto, hidden, visible... Con los atributos en los que su value tenga números, podrás subirlos y bajarlos con las flechas de tu teclado (1 en 1), con shift y flecha (10 en 10) y control + shift + flecha (100 en 100). Además, si tu atributo es incorrecto (ya sea el nombre del atributo o su value), te avisará de ello para que puedas corregirlo. También tienes la opción de esconder ciertos values (se te marcarán como comentario en el CSS) para dejar de verlas aplicadas.

Además, cuentas con la posibilidad de poder mantener hovers activos (entre otras cosas), que es bastante útil a la hora de diseñar un hover que muestre cosas, por ejemplo, en un perfil. Sólo tienes que seleccionar el elemento al que quieres aplicar el hover, hacer click en :hov y darle click a :hover. Un puntito amarillo saldrá al lado de este elemento, significando que el hover está activo. Así mismo, si cuando le das al + el hover está activado en el elemento, te generará el nombre del elemento con el hover (.postprofile:hover, por ejemplo) en lugar de sólo el nombre.

Todo esto que añadas se irá almacenando en el inspector-stylesheet, que podrás ver haciendo click en el link que señalo en verde aquí:

Este archivo almacena el CSS que hayas ido añadiendo en la página, ¡eso sí! No almacena cambios que hagas al CSS ya instalado en la página, y se borra al actualizar la página, así que ten cuidado con eso.

Como podéis ver, en mi foro de pruebas puede verse el código que he aplicado en body, poniendo el fondo del color que se ve en mi CSS; pero si actualizase ahora, se volvería a ver la imagen que tengo puesta instalada en el foro, a menos que pusiera este código en mi CSS.

Con este método llevo realizando todos mis diseños, y es una manera rápida y fácil de editar el CSS sin comerte mucho el coco y viendo los cambios al momento. Para todos aquellos que como yo prefiráis ver las cosas, quizá esto os salve la vida (bueno, tampoco exageremos, quizá os salve un par de horas de curro).

Los likes y reblogs si esto os ha servido son agradecidos; cualquier pregunta o cuestión que tengáis, mis asks están abiertos. ¡Abrazo!

[necromancercoding]

Últimamente, veo muchos iconos, títulos y demás que acaban siendo empujados por paddings que el contenedor no necesita. El padding puede ser útil para zonas donde no tienes una altura definida, por lo que si pones un padding, por ejemplo, de 10px 0px, te centrará el texto con 10 píxeles por arriba y por abajo. ¿Pero qué pasa si tienes una altura determinada y por más que juegas con el padding no consigues centrarlo? ¿Y si quieres tener un elemento siempre centrado verticalmente, sin importar la altura de su contenedor “padre”?

Line-height es un atributo de css que se usa para dar un tamaño concreto a cada línea de texto. Si tu icono, título o cualquier otro div sólo tiene 1 línea en todo momento, esta es tu mejor opción. También hay opciones un poco más raras como el transform, así que revisaremos todos sus pros y sus contras en este tutorial.

Padding:

Es el más útil, como he mencionado antes, si tienes una altura indeterminada y quieres que el texto quede centrado. Lo bueno de usar el padding es que aunque el texto sea más largo de lo esperado, el padding seguirá siendo el mismo y el contenedor se adaptará a la nueva altura. No es tan útil para su uso en contenedores con una altura definida; aunque si usas el atributo "box-sizing" con la opción "border-box", usar el padding en situaciones así te puede ser más fácil que ir calculando cuanto le tienes que quitar a la altura para que quede con el tamaño correcto.

Line-height:

A la hora de centrar verticalmente iconos y títulos, es mi elección estrella. Su uso es muy simple: pones en su tamaño los mísmos píxeles que el tamaño del contenedor. Si tu botón es de 60px de altura, tu line-height también será de 60px. Fácil, rápido y para toda la familia. ¿El problema? Si por alguna razón tu título tiene un salto de línea, el texto, lógicamente, saldrá de su contenedor, debido a que cada línea tiene 60px de altura (en nuestro ejemplo).

Positions y Transforms:

¿No te quedas satisfecho con ninguna de estas dos opciones o ninguna te da los resultados que esperas? Si tienes algo que quieres centrar verticalmente en cualquier tipo de contenedor, la última opción sería esta. Estas líneas de CSS es todo lo que necesitas:

position:relative; top:50%; transform:translateY(-50%);

Y voilá, tu texto estará centrado. ¡Eso sí! El contenedor "padre" de este código deberá tener position:relative; si usas otra position como, por ejemplo, absolute. Dependiendo de cómo quieres que esté situado tu contenido centrado en relación con el resto, usarás uno u otro. Pero si es para algo como un botón o un título, recomiendo usar relative.

¿El problema de esto? En algunos casos, sobretodo en las imágenes, causa un blur poco deseado que hace que el texto o la imagen en cuestión se vea extraña. La solución es simple: tu imagen, botón, texto, etcétera, debe de tener una altura total que sea un número par. Con esto, evitarás el temido blur causado por el transform.

¿Necesitas verlo en acción para saber cuál es la mejor opción? Pásate por este pen.

Y con esto y un bizcocho, ¡hasta mañana a las ocho! (o a las nueve... que hay que descansar)

Los likes y reblogs si este tutorial os ha ayudado se agradecen; cualquier pregunta o cuestión, mis asks están abiertos. ¡Abrazos!