#NC tutoriales | Explore Tumblr posts and blogs

00blackbird · 1 year ago

Note

Yo también pensé que podría estar en esos templates peroné xDD. El template está modificado, pero intuyo que puedo añadirle la clase a otro div que no sea el h3 y ya.

¡Muchas gracias, precioso! Un abrazote 💜

¡Hola, Necro precioso! Mando la pregunta por aquí porque quizá hay más curiosos como yo. ¿Sabes desde qué template se puede modificar el aviso de un nuevo mensaje? El que sale cuando otra persona ha posteado justo antes que tú: «Un nuevo mensaje ha sido añadido mientras escribías el tuyo. Puedes ver los últimos mensajes posteados abajo y decidir si quieres modificarlo o registrarlo.» Llevo buscando un rato pero no lo encuentro. ¡Gracias! 💜

¡Hola BB! Creo, después de toquetear mucho, que no hay un template dedicado a esa zona. Pero, con ayuda del nuevo selector :has(), se puede hacer algo.

Vas a ir al template posting_topic_review (En Escribir un Mensaje & Mensajes Privados) y vas a añadir una clase al h3 de la línea 2 (si no estás usando este h3, ponlo y simplemente añádele un display:none en un style). Para mi ejemplo, voy a usar la clase ".revisartema" (sin las comillas).

Ahora, con esa clase, vamos a targetear el body así: body:has(.revisartema):not(:has(#message-box)). Esta línea sólo debería targettear al body cuando estás en esa página, nada más. El revisar tema que se muestra bajo los botones de Modificar y Registrar sí que es el template de posting_topic_review, así que lo que modifiques ahí saldrá cambiado en esta página también. Son las dos cajas de arriba las que no se pueden modificar (o al menos, yo no he encontrado la zona; mi sospecha era que estaban en el posting_body, o que eran alguno de los templates de error como error_body o confirm_body, pero nada cumple con la organización del HTML de esta página).

¡Un abrazo! 💕

PD: Por supuesto con JS puedes reorganizar las dos cajas de arriba, pero pensé en ofrecer una alternativa de puro HTML+CSS porque en mi opinión es siempre preferible si el edit es mínimo 💞

#Blackbird's Domains #BB Reblog #necromancercoding #NC tutoriales #ncask #Código #Tutoriales

8 notes · View notes

kymeragaming-blog · 8 years ago

Photo

https://youtu.be/26c94xdhjZg Yorn Full Gameplay + Item Build. YouTube: Kymera Gaming para futuros Videos, Tutoriales y mas. #moba #mobagamer #mobagames #gameplay #mobilegames #mobilegamer #yorn #itembuilds #filmora #ncs

#mobagames #yorn #moba #filmora #mobagamer #ncs #gameplay #mobilegames #mobilegamer #itembuilds

0 notes

necromancercoding · 5 years ago

Photo

En este capítulo 2, diseñaremos la navegación y parte del cuerpo, para dejarlo listo para el siguiente capítulo en donde diseñaremos el tablón. Recuerda que puedes navegar todo este tutorial en el tag #nctutorial: desde cero.

¿Recordáis lo que os dije al final del anterior tutorial? Eso de limpiar el foro. ¡Espero que lo hayáis hecho! Porque nos vamos a poner manos a la obra y a diseñar.

Mi foro, ahora mismo, tiene esta pinta:

Un poco triste, pero no os preocupéis, que no se va a pasar así para siempre.

Lo primero que vamos a hacer es incluir algunas cosas que nos van a hacer la vida un poco más sencilla. Nos vamos a dirigir a overall_header y vamos a localizar el </head>. Antes de esto, copiaremos el HTML que podéis encontrar en este pastebin.

¿Qué hace todo ese código? Pues diversas cosas. Incluye las fuentes de honeybee, fontawesome y saturnicons. También incluye el código de tooltips; podéis modificar el CSS para que se ajuste a vuestro diseño. Incluye también el script de seleccionar todo, para que no tengáis que incluirlo en el panel (o, si sois como yo, para que no se os olvide añadirlo). Y por último, incluye las fuentes que usaremos en este foro: Montserrat (400, 400i, 700, 700i, 900 y 900i), y Roboto (400, 400i, 700 y 700i).

Ahora toca poner las variables básicas. ¿Por qué vamos a trabajar con variables? Porque por qué no lo harías. Le ahorras tiempo a tus compañeros si el acento no casa con algo, o si cambiáis los colores de los grupos, o cualquier cosa que queráis modificar. Además, facilita que el diseño sea consistente (todos sabemos que sacar el color con el selector de colores no siempre es lo más correcto y puede generar 3 colores similares pero no iguales).

Mis variables, para empezar, tienen esta pinta:

:root { --accent1: #596175; --accent2: #3c3e47; --border1: 1px solid #444; --border2: 1px solid #404040; --tbckg: rgba(23,23,23,0.25); --dbckg1: #2a2a2a; --dbckg2: #2c2c2c; --dbckg3: #2e2e2e; --dbckg4: #303030; --dbckg5: #333333; --dbckg6: #373737; }

Los dos primeros serían los colores de acento, que suelo tener dos. Luego vienen los bordes, uno más claro y otro un poquito más oscuro. El fondo transparente lo marco con una T delante, y los fondos opacos tienen una D delante. Como siempre, esta es mi manera de trabajar, puede que vuestra marcación sea completamente diferente. Yo uso muy pocas letras en las variables, para poder escribir más rápido.

También vamos a asegurarnos de que tengáis puestas las fuentes correctas de cuerpo y título en Colores. En nuestro caso, pondremos Montserrat, sans-serif para título, Roboto, Verdana, Helvetica, sans-serif para cuerpo y Courier New, monospace para códigos. Y pondremos el tamaño de la fuente principal a 12.

Una vez tengamos eso, vamos a ajustar el cuerpo del foro. Por defecto, #wrap viene con tres formas de poner el width, porque a FA le gusta el overkill (si desactivas el CSS de base, con width te valdrá).

#wrap { width: 1152px; min-width:1152px; max-width:1152px; }

Por supuesto, modifica el número por el ancho que quieras tener. En este skin, también vamos a tener un padding y un borde en el #wrap, y además, no tiene un fondo opaco. Pues vamos a ello.

#wrap { width: 1152px; min-width:1152px; max-width:1152px; background:var(--tbckg); border:var(--border1); padding:30px; }

Ahora vamos a añadir un par de correcciones pequeñas:

body#phpbb { background-size:cover; background-position:center; }

Esto nos ajustará el fondo del foro y lo centrará.

a:hover{ text-decoration:none!important; }

Esto retirará el subrayado cuando haces hover en un link.

*::selection{ background:var(--accent1); color:white; }

Esto hará que cuando selecciones algo en el foro, el fondo corresponda con el acento que hemos declarado en las variables. Si tu acento es muy claro, te conviene cambiar el color de texto a uno más oscuro que blanco.

::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: var(--accent1); border:2px solid #090909; } ::-webkit-scrollbar-track { background:#090909; } ::-webkit-scrollbar-corner { background: transparent; }

Este es un código básico de scrollbar para navegadores webkit. Para firefox, usaremos este:

* { scrollbar-color: var(--accent1) #090909; }

Y por último, usaremos este código para esconder un anuncio de FA que se desplega en las esquinas y es un grano en el culete:

#criteo_sticky { display:none; }

Ya va teniendo mejor pinta, ¿no?

Vale, ahora vamos a meter un par de javascripts que nos harán la vida un poco más sencilla. Revisa este pastebin. Tienes los comentarios en el código para que tengas claro qué hace cada cosa. Deberás ponerlo con el check en Todas las páginas.

Y con eso, podemos empezar a meter mano a nuestro HTML. Tendremos que crear dos cajas: una para la navegación lateral, que fijaremos, y una que estará en la parte de arriba del cuerpo pero que no bajará al hacer scroll. La lateral la llamaremos #nav y la otra se llamará #topnav.

Nos dirigiremos al overall_header y buscaremos el principio de <body id="phpbb">. Codearemos justo debajo.

Vale, ya tenemos nuestras cajas. Ahora tenemos que rellenarlas. Vas a buscar en tu template, el mismo que tienes abierto, overall_header, el .navbar dentro de #page-header. Verás que hay un ul llamado .linklist.navlinks{NAVBAR_BORDERLESS}. Pues vamos a coger solo la variable que está dentro, {GENERATED_NAV_BAR}, y la vamos a meter en #nav. Esta variable genera los links de la navegación, cada uno dentro de un <li> y, si tiene, con su correspondiente imagen. Una vez que lo tengamos, puedes borrar todo el div de .navbar. TEN CUIDADO de no borrar ningún </div> de cierre de más.

Ahora necesitamos generar el nombre de usuario y su avatar. Para ello, vamos a usar un script directamente en el código. "<script>document.write(_userdata.username);</script>" nos permitirá escribir el nombre de usuario. "<script>document.write(_userdata.avatar);</script>" nos permitirá escribir el avatar. Estas variables ("_userdata.{cosa}") son valores internos que tu foro almacena cuando el usuario lo visita. Algunos de ellos son id (el numerito de usuario), avatar, username, user_posts... Pondremos el primero en .tntop y el segundo en .tnicon.

Por último, lo último que nos queda es poner los links del navtree. Esto se encuentra en el viewforum_body o en el viewtopic_body: "<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC}". Eso lo pondremos en .tnbot. Con todo, nuestro HTML debería verse así:

<div id="nav">{GENERATED_NAV_BAR}</div> <div id="topnav"> <div class="tnenv"> <div class="tntop"> BIENVENIDO A NOMBRE DEL FORO, <strong><script>document.write(_userdata.username);</script></strong> </div> <div class="tnbot"> <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC} </div> </div> <div class="tnicon"><script>document.write(_userdata.avatar);</script></div> </div>

Copiaremos el código completo del template para asegurarnos de que lo llevamos con nosotros, mandaremos el template y registraremos. Y tendríamos que tener algo así:

Ahora nos queda diseñarlo. Vamos a ir fijándonos en nuestro mockup para guiarnos. En este paso, no detallaré mucho el proceso, ya que será diferente para cada uno, y lo que sí detallaré será cómo colocar los datos de la toolbar. Le hemos añadido también un par de cosas al body y al #wrap para posicionar el cuerpo de forma centrada respecto a las navegaciones:

body#phpbb { margin-top: 0!important; padding: 111px 0 0 61px!important; }

div#wrap { margin-top: 100px; }

111px sería el alto de mi navbar superior, y 61px es el ancho de mi navbar lateral. Además, hemos añadido un margin en el cuerpo para que haya todavía más espacio entre el navbar superior y el cuerpo.

Ahora todo está en su sitio menos la toolbar. No preocuparse. Vamos a usar este mini tutorial para ponerlo fijo, abajo a la izquierda y este otro para cambiar los iconos.

Pero aunque tengamos el icono diseñado, cuando hacemos hover o click... en fin, cosas de la toolbar. Pero los podéis editar usando :hover (a#fa_welcome:hover, a#fa_notifications:hover) y las clases de activación (#fa_right.welcome #fa_menu #fa_welcome, #fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications). Además, puedes modificar el icono si añades :before al final (#fa_right.welcome #fa_menu #fa_welcome:before, #fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications:before).

Nos quedaría posicionar las cajas. Primero usaremos #notif_list para la lista de temas y #fa_menulist para el panel de usuario. Igual que la toolbar, tendrá fixed, puesto en la zona inferior para que no choque con la navbar superior.

Por último, para asegurarnos de que la toolbar no rompe el diseño desde invitado, vamos a eliminarla con un poquito de JS (que añadiréis en el que habéis copiado antes desde pastebin, a continuación de la línea 35):

$('.bodyinvi #fa_toolbar').remove();

Y con eso y un bizcocho, daríamos por terminada esta navegación. Y lo prometido es deuda, ¡ya podéis ver el foro en funcionamiento!

https://nc-beyondthewalls.foroactivo.com/

El diseño irá avanzando a medida que veáis las partes de los tutoriales, para que lo veáis avanzar poco a poco. Tendréis una cuenta para usar y verlo desde dentro, llamada Señora Gertrudis, con la contraseña necromancercoding. No tendréis permiso para postear nada, tenedlo en cuenta, es una cuenta simplemente de visualización.

Podéis encontrar las imágenes incluidas en este tutorial aquí.

#tutorial #foroactivo #foros #rpg #rpg hispano #nctutorial #nctutorial: desde cero #nctutorial: aprendizaje

72 notes · View notes

necromancercoding · 4 years ago

Photo

En esta cuarta entrega de Diseñando un skin desde cero, vamos a ponernos con los subforos. Como mencioné en la anterior entrega de Diseñando desde cero, esta entrega se hará mano a mano con el tutorial que hice en su momento de esta zona, que puedes ver aquí. Recuerda que puedes navegar todo este tutorial en el tag #nctutorial: desde cero.

Primero que nada: recomiendo tener abierto el otro tutorial para que si tenéis alguna duda de por qué uso una variable u otra, tengáis la explicación allí.

Mi método para diseñar subforos es: primero escribe el HTML, con un solo subforo, y luego añade todas las variables. Así que vamos a hacer eso, marcando dónde nos hacen falta las variables (esto lo hago por visibilidad para que sepáis dónde irían, de normal no pongo nada).

<div class="forabg"> <div class="header">cat title</div> <div class="fbody"> <div class="frow"> <div class="frbody"> <div class="fr1"> <img src="imagen nuevos mensajes" class="frnew" /> <div class="frimg"></div> </div> <div class="fr2"> <a href="link del foro" class="forumtitle">Nombre foro</a> Descripción. </div> <div class="fr3"> <div class="frdata"> Avatar de last message <div class="frdenv"> <span><strong>Var temas</strong> TEMAS</span> <span><strong>Var respuestas</strong> RESPUESTAS</span> </div> </div> <div class="frlast"> Last link Last datos </div> </div> </div> <div class="fsubs"></div> </div> </div> </div>

Vale, ahora que tenemos todo el HTML escrito, vamos a poner las variables. Como recordatorio, la zona de categorías corresponde al template index_box.

<div class="forabg"> <div class="header">{catrow.tablehead.L_FORUM}</div> <div class="fbody">   <div class="frow"> <div class="frbody"> <div class="fr1"> <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="frnew" /> <div class="frimg"></div> </div> <div class="fr2"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.FORUM_DESC} </div> <div class="fr3"> <div class="frdata">  {catrow.forumrow.avatar.LAST_POST_AVATAR}  <div class="frdenv"> <span><strong>{catrow.forumrow.TOPICS}</strong> TEMAS</span> <span><strong>{catrow.forumrow.POSTS}</strong> RESPUESTAS</span> </div> </div> <div class="frlast">  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>  {catrow.forumrow.USER_LAST_POST} </div> </div> </div> <div class="fsubs"></div> </div>   </div> </div>

Lo pegamos en el template borrando todo lo demás y lo publicamos. Ahora mismo, tenemos el forito así:

Pero antes de ponernos con el CSS, tendremos que poner un par de detallitos. Lo primero, es incluir el HTML de la descripción; en nuestro caso, pondremos un subforo con links y otro sin links.

<div class="desc">Lorem ipsum dolor sit amet.</div> <div class="subs"><a href="">Link</a><a href="">Otro link</a></div>

Incluiremos también nuestra imagen en el campo de Imagen de foro. Haremos esto en todos nuestros foros y añadiremos también el texto de fondo de nuestra categoría en el título (si quieres que esto salga en caso de subforos interiores, tendrás que añadirlo también en el título del subforo "parent").

<span>Lorem ipsum</span><em>Dolor sit amet</em>

Casi lo tenemos preparado para ponernos con el diseño.

Ahora nos toca añadir la numeración de categorías en el título. Como esto no tiene sentido que aparezca en el interior de subforos, vamos a hacer que sólo aparezca en el índice. Nos dirigiremos a index_body, buscaremos la variable llamada {BOARD_INDEX} y la envolveremos en un div llamado #foros.

<div id="foros">{BOARD_INDEX}</div>

Copiamos y guardamos. Ahora nos dirigiremos a los javascript y crearemos uno nuevo, que marque solo índice, y pondremos el siguiente código:

$(document).ready(function() { $('#foros').children().each(function (index,element) { $(element).find('.header span').attr('number', (index + 1)); }); });

Y añadiremos una línea de CSS para hacer que aparezcan:

.forabg .header span:before {content: "0"attr(number)". ";}

Además, necesitaremos un par de códigos extra, que pondréis en otro JS que tenga marcados Índice y Subforos. Tenéis todos los códigos aquí.

Ya tenemos todo listo para el CSS.

Como siempre, haremos el CSS siguiendo nuestro mockup, pasito a pasito. Acordaos de usar cuantas más variables mejor, que luego facilita el trabajo de modificar los colores. Ahora vamos a arreglar un par de cositas antes de terminar. Retiremos el texto extra que tenemos en la navegación (el <em> de los headers).

.tnbot a span em { display: none; }

Añadiremos también las imágenes que nos faltan, la que da el borde de colores de las imágenes y las flechitas del last.

¡Y ya lo tenemos! En el siguiente capítulo, pasaremos a diseñar las estadísticas y los afiliados. Recordad que podéis ver el foro en funcionamiento en:

https://nc-beyondthewalls.foroactivo.com/

Podéis encontrar las imágenes incluidas en este tutorial aquí.

#nctutorial #nctutorial: desde cero #nctutorial: aprendizaje

39 notes · View notes