28114 sujets

CSS et mise en forme, CSS3

Problème avec UserCSS

bonjour,

je réécris un thème stylus mais en usercss pour ajouter la personnalisation (c'est la première fois que j fais avec l'option de personnalisation) et je rencontre un problème et une question, j'ai regardé ici https://github.com/openstyles/stylus/wiki/Writing-UserCSS#var et https://stylus-lang.com/docs/variables.html mais je ne trouve pas de réponse donc je demande :

1°) la question :
avant tout, le code :
/* ==UserStyle==
@preprocessor    stylus

@var select     bgchoice                "Background choice" {
    "Cat": "catbg",
    "None": "nobg",
    "Custom": "custombg"
}
@var text       custombgurl             "Background URL"                        "URL between quotes"
==/UserStyle== */
est-il possible de faire en sorte que la case où l'on entre l'url ne soit visible QUE si on choisis l'option custom ceci afin de gagner de la place dans le menu de personnalisation ?

2°) le problème :
avant tout, le code :
/* ==UserStyle==
@preprocessor    stylus

@var select     avatarposition          "Avatar position" {
    "Large Middle": "avatarlargemiddle",
    "Large Top": "avatarlargetop",
    "Large Bottom": "avatarlargebottom",
    "Small Middle": "avatarsmallmiddle",
    "Small Top": "avatarsmalltop",
    "Small Bottom": "avatarsmallbottom",
    "Custom position": "avatarcustomposition"
}
@var text       avatarcustomposition    "Avatar custom position"                12vh
@var select     avatarsize              "Avatar size" {
    "Large": "avatarlarge",
    "Small": "avatarsmall",
    "Hidden": "avatarhidden",
    "Custom": "avatarcustomsize"
}
@var text       avatarcustomsize        "Avatar custom size"                    512px
@var text       bubblestext             "Bubbles font size"                     20px
==/UserStyle== */

if bubblestext {
        .css-6obdga,
        .css-1gi22a8 {
            font-size: bubblestext;
        }
    } 

/* Avatar position */
    if (avatarposition=="avatarlargemiddle") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 12vh;
            }
        }
    }
    if (avatarposition=="avatarlargetop") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 4vh;
            }
        }
    }
    if (avatarposition=="avatarlargebottom") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 18vh;
            }
        }
    }
    if (avatarposition=="avatarsmallmiddle") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 16vh;
            }
        }
    }
    if (avatarposition=="avatarsmalltop") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 4vh;
            }
        }
    }
    if (avatarposition=="avatarsmallbottom") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: 28vh;
            }
        }
    }
    if (avatarposition=="avatarcustomposition") {
        @media screen and (min-width: 900px) {
            .css-13tht1l,
            .css-g2goff {
                position: absolute;
                top: avatarcustomposition;
            }
        }
    }
    
    /* Avatar size */
    if (avatarsize=="avatarlarge") {
        @media screen and (min-width: 900px) {
            /* Bigger avatar */
            .css-13tht1l,
            .css-g2goff {
                border-radius: 20px;
                height: 512px;
                left: 0.6%;
                max-width: 512px;
                padding: 0px;
                transition: 0.3s linear;
                width: 512px;
            }

            /* Put chat and textarea more on right*/
            .css-735j5d {
                padding: 0px 0px 20px 5px;
                width: 100%;
            }
            .css-1lvpjll {
                height: 100%;
                top: 0px;
            }

            .css-1lbk8wf {
                margin-bottom: 70px;
                padding: 0px 10px 0px 540px;
                width: 100%;
            }
            .css-g9r8dt,
            .css-is4lk1 {
                align-self: start;
                bottom: 0px;
                margin-left: 540px;
                width: calc(100% - 555px);
            }    
            .css-b9bzmp {
                padding: 0px 10px 0px 28%;
                width: 100%;
            }
        }
    }
    
    if (avatarsize=="avatarsmall") {
        @media screen and (min-width: 900px) {
            /* Small avatar */
            .css-13tht1l,
            .css-g2goff {
                border-radius: 20px;
                height: 320px;
                left: 0.6%;
                max-width: 320px;
                padding: 0px;
                transition: 0.3s linear;
                width: 320px;
            }

            /* Put chat and textarea more on right*/
            .css-735j5d {
                padding: 0px 0px 20px 5px;
                width: 100%;
            }
            .css-1lvpjll {
                height: 100%;
                top: 0px;
            }

            .css-1lbk8wf {
                margin-bottom: 70px;
                padding: 0px 10px 0px 348px;
                width: 100%;
            }
            .css-g9r8dt,
            .css-is4lk1 {
                align-self: start;
                bottom: 0px;
                margin-left: 348px;
                width: calc(100% - 555px);
            }    
            .css-b9bzmp {
                padding: 0px 10px 0px 28%;
                width: 100%;
            }
        }
    }
    if (avatarsize=="avatarcustomsize") {
        @media screen and (min-width: 900px) {
            /* Custom avatar */
            .css-13tht1l,
            .css-g2goff {
                border-radius: 20px;
                height: avatarcustomsize;
                left: 0.6%;
                max-width: avatarcustomsize;
                padding: 0px;
                transition: 0.3s linear;
                width: avatarcustomsize;
            }

            /* Put chat and textarea more on right*/
            .css-735j5d {
                padding: 0px 0px 20px 5px;
                width: 100%;
            }
            .css-1lvpjll {
                height: 100%;
                top: 0px;
            }

            .css-1lbk8wf {
                margin-bottom: 70px;
                padding-bottom: 0px;
                padding-left: calc(avatarcustomsize + 28px);
                padding-right: 10px;
                padding-top: 0px;
                width: 100%;
            }
            .css-g9r8dt,
            .css-is4lk1 {
                align-self: start;
                bottom: 0px;
                margin-left: 348px;
                width: calc(100% - 555px);
            }    
            .css-b9bzmp {
                padding: 0px 10px 0px 28%;
                width: 100%;
            }
        }
    }
    
    if (avatarsize=="avatarhidden") {
        .css-13tht1l,
        .css-g2goff {
            display: none;
            height: 0px;
            width: 0px;
        }
        .css-735j5d {
            padding: 0px 0px 20px 5px;
            width: 100%;
        }
        .css-1lvpjll {
            height: 100%;
            top: 0px;
        }
        .css-1lbk8wf {
            margin-bottom: 70px;
            padding: 0px 10px 0px 10px;
            width: 100%;
        }
        .css-g9r8dt,
        .css-is4lk1 {
            align-self: start;
            bottom: 0px;
            margin-left: 540px;
            width: calc(100% - 555px);
        }
    }
je ne comprend pas pourquoi les valeurs entrées pour avatarcustomposition et avatarcustomsize ne sont pas prises en compte alors que celle pour bubblestext fonctionne très bien.

merci d'avance
Modifié par Breat (30 Jan 2024 - 13:52)
Administrateur
Bonjour,

je n'ai jamais utilisé les variables de personnalisation de Stylus mais comme je compte distribuer mes styles, que les utilisateurs puissent personnaliser les couleurs que j'impose c'est une bonne idée Smiley good
Dukou le sujet m'intéresse et j'ai testé ta 2e question :

a/ tu n'utilises pas ces variables dans les styles, est-ce que tu as oublié une partie du code ?
b/ chezmoiçamarche avec le code ci-dessous.
Stylus Firefox se plaignait à l'enregistrement qu'il manquait @name, namespace et version.

/* ==UserStyle==
@preprocessor    stylus
@name Test de variables Stylus
@namespace  https://forum.alsacreations.com
 
@version 0.0.2
@var text       avatarcustomposition    "Avatar custom position"                12vh
@var text       avatarcustomsize        "Avatar custom size"                    512px
@var text       bubblestext             "Bubbles font size"                     20px
==/UserStyle== */


if bubblestext {
  body {
    background: pink;
  }
} 
if avatarcustomposition {
  body::before {
    content: "::before";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 1rem;
    background: darkred;
    color: white;
  }
}
if avatarcustomsize {
  body::after {
    content: "::after";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 1rem;
    background: darkblue;
    color: white;
  }
}
Felipe a écrit :
tu n'utilises pas ces variables dans les styles, est-ce que tu as oublié une partie du code ?.
j'ai du oublier quelque chose oui mais je ne vois pas quoi car avatarcustomposition et avatarcustomsize sont bien présent dans le css lui même à la différence avec toi que je l'utilise après un select.
@var select     avatarsize              "Avatar size" {
    "Large": "avatarlarge",
    "Small": "avatarsmall",
    "Hidden": "avatarhidden",
    "Custom": "avatarcustomsize"
}
@var text       avatarcustomsize        "Avatar custom size"                    512px
quand on choisis Custom ça va prendre la valeur du @var text avatarcustomsize.
j'ai fait comme ça pour changer le fond de la page et ça fonctionne très bien c'est pourquoi je comprend pas :
@var select     bgchoice                "Background choice" {
    "Cat": "catbg",
    "None": "nobg",
    "Custom": "custombg"
}
@var text       custombgurl             "Background URL"                        "URL between quotes"

/* Background */
    if (bgchoice=="heartbg") {
        .css-1lvpjll {
            background: url(https://exemple.com/cat-pattern.png) var(--chakra-colors-secondaryBlack) fixed 100%;
        }
    }    
    if (bgchoice=="nobg") {
        /* No background */
        .css-1lvpjll {
            background: var(--chakra-colors-secondaryBlack) fixed 100%;
        }
    }    
    if (bgchoice=="custombg") {
        /* No background */
        .css-1lvpjll {
            background: url(custombgurl) var(--chakra-colors-secondaryBlack) fixed 100%;
        }
    }

mais effectivement en mettant dans le reste du css comme si j'utilisait pas de select ça fonctionne donc ça me va Smiley smile merci bien.

Felipe a écrit :
Stylus Firefox se plaignait à l'enregistrement qu'il manquait @name, namespace et version.
oui j'ai pas mis tout monde code (1078 lignes) sinon ça aurait été trop lourd.

si quelqu'un à une solution pour la 1ère question, ça m'arrangerait car là c'est un peu bordélique :
upload/1706623872-79710-stylus.jpg
Modifié par Breat (30 Jan 2024 - 15:52)
autre problème que je rencontre:

j'ai essayé les 2 solutions présentent ici https://sabe.io/blog/css-set-img-src mais sans succès donc si quelqu'un peut m'aider ça serait cool.

mon idée étant d'ajouter une personnalisation visuelle en remplaçant cette image par une autre du choix de l'utilisateur, une fonction beaucoup demandée.
<div class="css-13tht1l">
     <img alt="avatar" src="https://exemple.com/image.png" loading="eager" class="no-invert css-1bwrjj6" style="position: absolute; top: 0px; left: 0px; z-index: 1;">
</div>
maintenant voici ce que j'ai fait qui ne fonctionne pas Smiley smile 
/* ==UserStyle==
@preprocessor    stylus

@var checkbox   avatarchoice                "Avatar choice"                         1
@var text       avatarchoiceurl             "Avatar choice URL"                     "URL between quotes"
==/UserStyle== */

/* Avatar choice */
    if avatarchoice {
        img[alt="avatar"] {
            background-image: url("avatarchoiceurl");
        }
    }
ou
/* ==UserStyle==
@preprocessor    stylus

@var checkbox   avatarchoice                "Avatar choice"                         1
@var text       avatarchoiceurl             "Avatar choice URL"                     "URL between quotes"
==/UserStyle== */

/* Avatar choice */
    if avatarchoice {
        .css-1bwrjj6 {
            background: url(avatarchoiceurl);
        }
    }
    }
et la même chose avec content au lieu de background-image mais à chaque fois sans succès.

dans le dernier cas cela fonctionne mais la nouvelle image est visible uniquement quelques secondes avant d'être remplacée par celle d'origine.

l'url dans src de type (https://firebasestorage.googleapis.com/v0/b/......) chaque à chaque utilisateur et à chaque image, je ne peux donc pas me baser dessus pour la sélection.

quelqu'un aurait une solution ?

- edit -
bon en fait j'ai trouvé une solution pour ça en bidouillant xD
Modifié par Breat (01 Feb 2024 - 18:44)
Prévenir un modérateur
Répondre au sujet
Aller à