ekkorpg

[ekkorpg]

✦ Uso libre. ✦ No retirar créditos, ni usar como base para otro código. ✦ Si desean preguntar sobre cómo está hecho con mucho gusto los puedo guiar, con una pequeña mención en sus futuros diseños.

✦ Código para nota de voz. ✦ Medidas 380 x según lo largo del texto de mensaje. ✦ La imagen se acomoda. ✦ No exagerar en textos. ✦ Se puede omitir el span del nombre y la imagen sin problema. ✦ Iconos de Font Awesome, no son editables. ✦ Adaptable para fondo claro u oscuro en el data-mode="light/dark" según sea el caso. ✦ En caso de querer usar en mismo código en el mismo tema deben editar el id="check" y el for="check" remplazando la palabra check por la que quieran pero debe ser la misma.

✦ Tiene dos variables:

--accent: Color blanco.

--accent2: Color principal.

✦ Cualquier duda, pregunta, sugerencia estoy a un ask de distancia.

✦ Si te gusta mi trabajo el like y reblog me ayudan a crecer. ✦ No olviden hacer clic en “Recibir notificaciones” para no perderte ningún código nuevo.

✦ Disponible para crear todas sus ideas y volverás realidad; ¡Comisiones abiertas! ¡Pregúntame!

[Code] @elalmacen-rp XOX Luxury Poison

[ekkorpg]

Commande

Crystal Reed 400*640

[ekkorpg]

Commande Chase Hudson 400*640

[ekkorpg]

[ekkorpg]

Gérer conditionnellement le dernier enfant en CSS

Aujourd'hui, on va parler de CSS conditionnel !

Petite mise en situation : Vous avez un forum, et vous voudriez que les sous-forums soient affichés sur deux colonnes. Pour ça, vous choisissez d'utiliser les grilles CSS, parce que grid c'est la vie.

Mais voilà, parfois, dans vos catégories, il y a un nombre pair de forums, et tout va bien, et parfois il y a un nombre impair, et vous n'aimez pas du tout le rendu que ça donne.

Vous pourriez vous arranger pour avoir un nombre pair de sous-forums dans chacune des sections et sous-sections de votre forum. Ou bien vous pourriez traquer tous les cas particuliers pour personnaliser l'apparence de ce dernier sous-forum qui fait tâche. Mais à titre personnel, je vous proposerais plutôt d'utiliser la magie du CSS pour faire une petite modification conditionnelle du rendu de vos forums.

Je vous retrouve après le bouton "afficher davantage", parce que pavé César, tout ça, tout ça.

Du CSS conditionnel ? Keskecé ?

C'est du CSS normal, en vrai. Lorsque vous écrivez une règle CSS, son effet ne s'appliquera que si l'élément ciblé par le sélecteur existe. Nous allons donc écrire un sélecteur qui ciblera le dernier élément enfant d'un conteneur, mais seulement s'il est à une position impaire.

Si vous n'êtes pas au point sur ce qu'est un sélecteur CSS, faites un tour sur l'article du MDN sur la syntaxe CSS et l'article sur les sélecteurs. L'important à en retenir pour le moment, c'est qu'on peut combiner des sélecteurs.

Et nous avons deux sélecteurs en particulier qui vont nous intéresser :

:last-child va sélectionner le dernier élément enfant d'un conteneur

:nth-child(odd) va sélectionner tous les éléments enfants à une position impaire (le 1er, le 3ième, le 5ième, etc)

Pour ceux qui ont du mal avec la terminologie, les "enfants" d'un conteneur, c'est basiquement les éléments que vous y mettez. Donc si on prend cet exemple très simple :

<div class="demo"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

L'élément conteneur, celui qui a la classe demo, contient cinq éléments div qui sont ses enfants (des descendants directs). Si les div contenaient aussi d'autres éléments, ceux-là seraient plutôt des descendants (tout court) de notre conteneur.

Pour en revenir au sujet, on aimerait donc bien que dans cet exemple, ce cinquième élément, qui est le dernier enfant de la liste, et qui a le malheur d'être en position impaire, soit affiché de manière à occuper deux colonnes plutôt qu'une seule.

Pour ça, nous allons écrire un sélecteur qui va cibler les éléments div qui sont les enfants directs du conteneur de classe demo, ce qui va s'écrire .demo > div. Mais comme on veut spécifiquement cibler un div qui est le dernier de la liste ET qui est impair, on va lui coller les deux sélecteurs mentionnés plus haut, et notre sélecteur devient : .demo > div:last-child:nth-child(odd).

Et on en fait quoi maintenant ?

Cette fois, on va avoir besoin de nos connaissances en CSS grid, mais si on part d'une configuration simple d'affichage en deux colonnes, on va juste indiquer à l'élément div sélectionné qu'il devra prendre deux colonnes de large plutôt qu'une, avec la propriété grid-column.

Ce qui donnera le CSS suivant :

.demo { display:grid; grid-template-columns: repeat(2, 1fr); } .demo > div:last-child:nth-child(odd) { grid-column: span 2; }

Désormais, avec ce code, que notre conteneur de classe demo ait 3, 7, 13 ou 379 enfants, le dernier s'affichera toujours sur deux colonnes !

Plus qu'à appliquer ça à vos forums maintenant ;p

Si vous voulez plus de détails, ou si vous voudriez bien savoir comment on s'en sortirait si on avait trois colonnes plutôt que deux, j'ai écrit un tutoriel plus détaillé sur le forum de support du Blank Theme, n'hésitez pas à aller le lire !

[ekkorpg]

SUBURBAN GOTHIC, rp graphics pack

This template pack is available for free to subscribers of The Theatre on Patreon or Deviantart.

This pack includes: one (1) coloring, two (2) icon border templates and one (1) promo template. The templates are all 1080px in width for best image quality.

PLEASE CREDIT ME if you use the content featured in this pack! This resource was created with images from the public domain and/or images that are free of use, with the exception of images of Rianne Van Rompaey that only serve for preview purposes.

Consider liking or reblogging this post if you’d like to see more of such content in the future. ♡

DOWNLOAD : DEVIANTART or PATREON

[ekkorpg]

Commande Hyunjin avatar 400*640

[ekkorpg]

Commande timothée chalamet 400*640

[ekkorpg]

Manipuler les couleurs en CSS avec color-mix()

Quand on potasse le design de nos forums, on a souvent besoin de trouze mille couleurs pour faire quelque chose d'à peu près joli. Parfois, on aurait juste besoin de variantes "plus claire", "plus sombre", "semi-transparente" de notre couleur de base. En temps normal, on va donc devoir définir chacune de nos couleurs une par une, chacune son code hexadécimal péniblement pioché sur une palette.

Mais en CSS moderne, il existe maintenant color-mix(), une fonction qui est prise en charge par la plupart des navigateurs modernes.

La fonction prend trois valeurs, séparées par des virgules :

L'espace de couleurs : Je n'ai pas les connaissances en colorimétrie pour expliquer ça, mais c'est apparemment utilisé pour définir quelle formule mathématique est utilisée pour mélanger les couleurs. Il y a plusieurs valeurs disponibles, j'ai vu beaucoup de gens conseiller oklab, mais je ne saurais pas trop expliquer pourquoi. On écrira donc in oklab, pour dire qu'on utilise l'espace de couleurs oklab.

Une première couleur, dans n'importe quel format (rgb, hsl, hexadécimal, etc...), suivie ou non d'un pourcentage

Une deuxième couleur, dans n'importe quel format, suivie ou non d'un pourcentage

En ce qui concerne les pourcentages facultatifs :

Si on ne définit aucun pourcentage, par défaut, ça sera un mélange 50/50 entre les deux couleurs

Si on définit seulement le pourcentage d'une seule des couleurs, par exemple 30%, alors la somme des deux fera automatiquement 100%, donc par exemple 30/70

Si le total fait moins de 100%, le résultat final sera partiellement transparent.

Donc, si nous souhaitons utiliser la couleur #663399, mais juste légèrement transparente, par exemple pour la mettre par-dessus une image, on l'écrira comme ça :

color-mix(in srgb, #663399, transparent 25%)

Et vous pouvez parfaitement utiliser une propriété customisée (variable CSS) à la place des couleurs, ce qui vous facilitera d'autant plus le travail :

\--color-primary: #663399; \--color-primary-light: color-mix(in oklab, var(\--color-primary), white); \--color-primary-dark: color-mix(in oklab, var(\--color-primary), black);

(comme d'hab, Tumblr n'aime pas afficher des bouts de code, donc pour rappel, les propriétés customisées sont précédées de deux tirets et utilisées via la fonction var()).

On peut faire des tas de choses avec cette fonction, et je vous recommande d'aller jeter un coup d'œil aux vidéos de Kevin Powell pour vous faire une idée. Même si l'anglais ne vous parle pas, le visuel devrait vous aider à comprendre à quel point c'est cool !

Pour en savoir plus :

Vidéo de Kevin Powell - A deep dive into CSS color-mix()

Vidéo de Kevin Powell - Using currentColor with color-mix()

Article francophone du MDN sur color-mix()

Article anglophone (et plus complet) du MDN sur color-mix()

[ekkorpg]

✦ Uso libre. ✦ No retirar créditos, ni usar como base para otro código. ✦ Si desean preguntar sobre cómo está hecho con mucho gusto los puedo guiar, con una pequeña mención en sus futuros diseños.

✦ Código para Instagram. ✦ Medidas de ancho 520px y el largo varía según las imágenes que coloquen. ✦ Las imágenes en todos se acomodan. ✦ No exagerar en título, ni en textos, el texto inferior en la base se puede omitir sin problema. ✦ Iconos de Font Awesome no editables.

✦ Tienen dos variables iguales en todos los códigos.

-accent: Color blanco de la letra.

-accent2: Color principal.

✦ Solo en la base:

-font: tamaño del título.

✦ En las acciones:

-img: La imagen grande del personaje.

✦ Para cambiar el estilo de las imagenes en la ase en data-style="Aqui" deben dejar vacío que es el base o colocar two, three ambas opciones de 5 a 10 imagenes.

✦ Cualquier duda, pregunta, sugerencia estoy a un ask de distancia.

✦ Si te gusta mi trabajo el like y reblog me ayudan a crecer. ✦ No olviden hacer clic en “Recibir notificaciones” para no perderte ningún código nuevo.

✦ Disponible para crear todas sus ideas y volverás realidad; ¡Comisiones abiertas! ¡Pregúntame!

[Code] @elalmacen-rp XOX Luxury Poison

[ekkorpg]

matt bomer gif pack

by clicking ON THE SOURCE LINK you will find 895 GIFS of MATT BOMER in the show MID-CENTURY MODERN (SEASON 1). all gifs were made by yours truly. please DO use them to roleplay, as reaction gifs, for sidebars, all that good stuff. please DO NOT repost, add to other gif hunts, use for crackships, crop into gif icons or edit in any way. give this post a like and/or reblog if you found these gifs at all useful! CONTENT WARNINGS: flashing lights (disco ball, last few gifs of the last episode)

[ekkorpg]

Credit © Watson if you use ♡

[ekkorpg]

[ekkorpg]

Credit © Watson if you use ♡

[ekkorpg]

Libre-service : chronologie verticale

Voici une base de code pour faire une chronologie. à utiliser dans en post (pour les fiches ou une annexe historique, par exemple).

Le code utilise les couleurs du Blank Theme mais personnalisez-le comme bon vous semble !

C'est une redit d'un ancien LS qui prenait la poussière parce que j'avais jamais pris le temps de le remettre en avant. C'est chose faite, et sur Blank Theme !

Code

Autre libre-service

[ekkorpg]

LS Grimmcodes - Alternative pour les profils

J'ai vu passer beaucoup de demandes d'aide pour le thème n°1 de Grimmcodes, et tout particulièrement sur la question des champs de profil.

Si le tutoriel d'installation du thème et la FAQ mise à disposition par Grim ne vous suffisent pas, je vous propose une alternative au code d'origine en ce qui concerne la page de profil et les messages.

Jetez-donc un œil à mon tutoriel de mise en place de la version alternative.

Je n'ai pas eu assez de cobayes volontaires pour tester tout ça, donc remontez-moi vos soucis si possible (idéalement, sur le discord de La Piscine si vous y êtes, il y a un sujet de demande de feedback).

Voilà voilà, enjoy !

[ekkorpg]

Couleur de groupe sur le pseudo dans la barre de navigation

Sur le discord de la Piscine, en avril dernier, s'est posé la question suivante : Lorsqu'on affiche le pseudo du membre connecté dans la barre de navigation, comme y appliquer la couleur de son groupe ?

On utilisera exactement la même méthode que celle qui nous permet de récupérer l'avatar ou le pseudo du membre connecté pour les mettre dans la barre de navigation, c'est-à-dire qu'on va utiliser une variable générée par Forumactif, _userdata.

_userdata contient des informations utiles auxquelles on accède via le mot clé correspondant, comme ça :

_userdata.username : contient le pseudonyme du membre connecté

_userdata.avatar : contient le code HTML destiné à afficher l'avatar du membre connecté

_userdata.avatar_link : contient l'URL de l'avatar du membre connecté

_userdata.groupcolor : contient la couleur (sans le #) du membre connecté

groupcolor a été rajouté par Forumactif en douce il n'y a pas si longtemps que ça (septembre 2024, pour les curieux), raison pour laquelle la plupart des LS disponibles n'ont pas l'air d'en avoir entendu parler.

Cela dit, le bidouilleur Forumactif ordinaire ne sait absolument pas quoi faire de cette information, et c'est normal. Du coup, voici un exemple de mise en pratique pour vous.

Tout se passera généralement dans le template overall_header de Forumactif. Pendant vos opérations chirurgicales sur ce template, si vous voulez placer le pseudo (et sa couleur) quelque part, vous pourrez rajouter (par exemple) ce bout de code :

<div class="accueil-visiteur"> Bienvenue, <span id="pseudo-visiteur">Invité</span> </div>

Trouvez-vous ensuite un emplacement après la navigation pour rajouter ce petit script :

<!-- Cette partie du code peut être placée après toute la section dédiée à la navigation --> <script type="text/javascript"> const pseudoOnline = document.getElementById('pseudo-visiteur'); if(pseudoOnline && _userdata.session_logged_in) { pseudoOnline.innerHTML = _userdata.username; pseudoOnline.style.color = '#' + _userdata.groupcolor; } </script>

Le script récupère l'élément qui a l'identifiant pseudo-visiteur (s'il existe) et vérifie au passage que l'utilisateur est connecté. Une fois ces vérifications faites :

Il remplace son contenu par le pseudo du membre connecté

Et il rajoutera la couleur du pseudo directement dans le HTML

Il ne fait pas de modifications quand il ne trouve pas les informations nécessaires, donc le texte que vous aurez mis par défaut (ici "Invité") apparaitra dans ce cas là.

En principe la variable _userdata est présente en permanence sur les forums de FA, d'où l'absence de vérification de son existence. Si elle n'est pas là, vous aurez certainement d'autres problèmes à gérer sur votre forum, de toute façon.