- Messages : 21
- Remerciements reçus 0
personnaliser le style css action tab
- Jeff71
- Auteur du sujet
- Hors Ligne
- Membre junior
Moins
Plus d'informations
il y a 1 an 2 jours - il y a 1 an 2 jours #2031
par Jeff71
personnaliser le style css action tab a été créé par Jeff71
Bonsoir,
Je souhaite change la couleur du texte du tag actif
La régle Css concernée me semble
.tab_wrapper .content_wrapper .accordian_header.active {
color: #069;
border-bottom: 1px solid #aaa;
background: #fff;
}
J'utilise le template cassiopeia (J5)
J'ai tenté de coller dans le user.css de cassipeia
.tab_wrapper .content_wrapper .accordian_header.active {
color: red;
border-bottom: 1px solid #aaa;
background: #fff;
}
mais cela ne marche pas en regardant de plus prêt la doc ,c'est le CSS de up que je dois modifier si j'ai bien compris
Par contre je n'ai pas compris à quel endroit et dans quel fichier je dois mettre cette nouvelle règle
Merci de l'aide et bon WE
JF
Je souhaite change la couleur du texte du tag actif
La régle Css concernée me semble
.tab_wrapper .content_wrapper .accordian_header.active {
color: #069;
border-bottom: 1px solid #aaa;
background: #fff;
}
J'utilise le template cassiopeia (J5)
J'ai tenté de coller dans le user.css de cassipeia
.tab_wrapper .content_wrapper .accordian_header.active {
color: red;
border-bottom: 1px solid #aaa;
background: #fff;
}
mais cela ne marche pas en regardant de plus prêt la doc ,c'est le CSS de up que je dois modifier si j'ai bien compris
Par contre je n'ai pas compris à quel endroit et dans quel fichier je dois mettre cette nouvelle règle
Merci de l'aide et bon WE
JF
Dernière édition: il y a 1 an 2 jours par Jeff71.
Connexion ou Créer un compte pour participer à la conversation.
- lomart
- Hors Ligne
- Administrateur
il y a 1 an 2 jours #2032
par lomart
Réponse de lomart sur le sujet personnaliser le style css action tab
Bonjour Jeff
Sans url vers le problème, c'est difficile de répondre.
Il faut ajouter/modifier une règle CSS avec l'inspecteur de code pour déterminer le bon code
Sans url vers le problème, c'est difficile de répondre.
Il faut ajouter/modifier une règle CSS avec l'inspecteur de code pour déterminer le bon code
Connexion ou Créer un compte pour participer à la conversation.
- Jeff71
- Auteur du sujet
- Hors Ligne
- Membre junior
Moins
Plus d'informations
- Messages : 21
- Remerciements reçus 0
il y a 1 an 1 jour - il y a 1 an 1 jour #2033
par Jeff71
Réponse de Jeff71 sur le sujet personnaliser le style css action tab
Bonsoir,
Sans url vers le problème, c'est difficile de répondre. ==> pour l'instant je suis en locale
Il faut ajouter/modifier une règle CSS avec l'inspecteur de code pour déterminer le bon code ==> je pense avoir identifier la règle à modifier grace à l'inspecteur (je suis prudent car je ne suis pas mega à l'aise avec l'inspecteur mais j'ai réussi par avant à faire qq mofif de style avec succes)
Par contre la modification portant sur un style défini par l'action UP , j'ai tenté d'écrire comme j'avais l'habitude la modif dans le fichier user.css du template cassiopeia.
Mais étant donné que celà porte sur un style UP , j'ai cru comprendre qu'il ne faut pas faire la modif sur le fichier template cassiopeia user.css mais dans un autre fichier dédié au style de UP.
Est ce que j'ai bien compris? Si oui quel fichier je dois modifier ou créer ?
En bidouillant , j'ai modifier le fichier /plugins/content/up/actions/tab/tab.css
J'ai changer .tab_wrapper>ul li.active{border-color:#069;color:red}
et ca marche comme je le désire
Par contre je pense pas que cela est la bonne méthode de modifier directement ce fichier.
Quelle est la méthode adaptée ?
Merci et bon weekend
Sans url vers le problème, c'est difficile de répondre. ==> pour l'instant je suis en locale
Il faut ajouter/modifier une règle CSS avec l'inspecteur de code pour déterminer le bon code ==> je pense avoir identifier la règle à modifier grace à l'inspecteur (je suis prudent car je ne suis pas mega à l'aise avec l'inspecteur mais j'ai réussi par avant à faire qq mofif de style avec succes)
Par contre la modification portant sur un style défini par l'action UP , j'ai tenté d'écrire comme j'avais l'habitude la modif dans le fichier user.css du template cassiopeia.
Mais étant donné que celà porte sur un style UP , j'ai cru comprendre qu'il ne faut pas faire la modif sur le fichier template cassiopeia user.css mais dans un autre fichier dédié au style de UP.
Est ce que j'ai bien compris? Si oui quel fichier je dois modifier ou créer ?
En bidouillant , j'ai modifier le fichier /plugins/content/up/actions/tab/tab.css
J'ai changer .tab_wrapper>ul li.active{border-color:#069;color:red}
et ca marche comme je le désire
Par contre je pense pas que cela est la bonne méthode de modifier directement ce fichier.
Quelle est la méthode adaptée ?
Merci et bon weekend
Dernière édition: il y a 1 an 1 jour par Jeff71.
Connexion ou Créer un compte pour participer à la conversation.
- lomart
- Hors Ligne
- Administrateur
il y a 1 an 1 jour #2034
par lomart
Réponse de lomart sur le sujet personnaliser le style css action tab
Bonsoir,
Si UP ajoute une règle après cassiopeia, elle sera prioritaire. On voit l'empilement des règles dans l'inspecteur
2 solutions :
1/ faire une copie du fichier tab.css avec les modifs dans le sous-dossier custom de l'action.
2/ ma préférée, car visuelle, ajouter une option css-head avec la règle
#id permet de limiter la portée de la modification à cette instance de l'action
Une bible à imprimer pour toujours l'avoir sous le coude : up.lomart.fr/infos/memo-redacteur
Bonne soirée
En CSS, c'est le dernier qui parle qui a raison. Un peu comme dans la vie :whistle:Mais étant donné que celà porte sur un style UP , j'ai cru comprendre qu'il ne faut pas faire la modif sur le fichier template cassiopeia user.css mais dans un autre fichier dédié au style de UP.
Est ce que j'ai bien compris? Si oui quel fichier je dois modifier ou créer ?
Si UP ajoute une règle après cassiopeia, elle sera prioritaire. On voit l'empilement des règles dans l'inspecteur
Mauvaise idée, à la prochaine mise à jour de up, elle sera effacée.En bidouillant , j'ai modifier le fichier /plugins/content/up/actions/tab/tab.css
2 solutions :
1/ faire une copie du fichier tab.css avec les modifs dans le sous-dossier custom de l'action.
2/ ma préférée, car visuelle, ajouter une option css-head avec la règle
Code:
#id .tab_wrapper>ul li.active[border-color:#069;color:red]
Une bible à imprimer pour toujours l'avoir sous le coude : up.lomart.fr/infos/memo-redacteur
Bonne soirée
Les utilisateur(s) suivant ont remercié: Jeff71
Connexion ou Créer un compte pour participer à la conversation.
- Jeff71
- Auteur du sujet
- Hors Ligne
- Membre junior
Moins
Plus d'informations
- Messages : 21
- Remerciements reçus 0
il y a 1 an 1 jour #2035
par Jeff71
Réponse de Jeff71 sur le sujet personnaliser le style css action tab
Merci Loic,
Je savais que taper directement dans le fichier origine CSS n'était pas une bonne idée.
Je n'avais pas trouvé l'information de créer un répertoire custom et de recopier dans ce répertoire fichier CSS
Merci pour le support et la réactivité
En copiant le fichier user.css modifié dans le répertoire custom tout est OK
En voulant aller plus loin, j'ai qq question
Ne faut t il pas plutôt partir du fichier SCSS ? J'ai vu qu'il est plus visible (tabulation)
J'ai essayé de faire la manip
1/ copier le fichier scss dans le repertoire custom et je l'ai modifié
2/J'ai lancé une compilation avec l'action {up upscsscompiler | info | force }
3/ j'ai un message d'erreur
danger
[up-12-1 upscsscompiler] Erreur compilation SCSS : tab/custom/tab.scss
`../../assets/custom/variables` file not found for @import: line: 3, column: 1
1/ est ce que j'applique le bon mode opératoire? (en partant du fichier scss)
2/ pourquoi cette erreur ?
Désolé pour cette série de question, je suis en plein apprentissage.
Pour info en copie screen fichier dans le répertoire /plugins/content/up/assets/custom
Bonne journée
Je savais que taper directement dans le fichier origine CSS n'était pas une bonne idée.
Je n'avais pas trouvé l'information de créer un répertoire custom et de recopier dans ce répertoire fichier CSS
Merci pour le support et la réactivité
En copiant le fichier user.css modifié dans le répertoire custom tout est OK
En voulant aller plus loin, j'ai qq question
Ne faut t il pas plutôt partir du fichier SCSS ? J'ai vu qu'il est plus visible (tabulation)
J'ai essayé de faire la manip
1/ copier le fichier scss dans le repertoire custom et je l'ai modifié
2/J'ai lancé une compilation avec l'action {up upscsscompiler | info | force }
3/ j'ai un message d'erreur
danger
[up-12-1 upscsscompiler] Erreur compilation SCSS : tab/custom/tab.scss
`../../assets/custom/variables` file not found for @import: line: 3, column: 1
1/ est ce que j'applique le bon mode opératoire? (en partant du fichier scss)
2/ pourquoi cette erreur ?
Désolé pour cette série de question, je suis en plein apprentissage.
Pour info en copie screen fichier dans le répertoire /plugins/content/up/assets/custom
La pièce jointe errorcompil.png est absente ou indisponible
Bonne journée
Pièces jointes :
Connexion ou Créer un compte pour participer à la conversation.
- lomart
- Hors Ligne
- Administrateur
il y a 1 an 1 jour #2036
par lomart
Réponse de lomart sur le sujet personnaliser le style css action tab
Bonjour,
La meilleure méthode est l'option css-head directement dans le shortcode. Elle présente 2 avantages :
1 - elle génère un code css inline qui est en principe prioritaire
2 - si on revient plusieurs mois après sur l'action, on sait immédiatement qu'une règle est appliquée. tout est visible dans le shortcode
Utiliser du scss n'est pas utile pour une petite modif. Son intérêt est quand on a des mediaqueries ou des règles en cascade pour faciliter la lecture.
Pour l'erreur, c'est simplement qu'il faut modifier le chemin comme indiquer au début du fichier tab.scss
Bon apprentissage
La meilleure méthode est l'option css-head directement dans le shortcode. Elle présente 2 avantages :
1 - elle génère un code css inline qui est en principe prioritaire
2 - si on revient plusieurs mois après sur l'action, on sait immédiatement qu'une règle est appliquée. tout est visible dans le shortcode
Utiliser du scss n'est pas utile pour une petite modif. Son intérêt est quand on a des mediaqueries ou des règles en cascade pour faciliter la lecture.
Pour l'erreur, c'est simplement qu'il faut modifier le chemin comme indiquer au début du fichier tab.scss
Code:
// référence aux préférences générales de UP
// si version dans sous-dossier 'custom', ajouter '../' au début du chemin
@import "../../assets/custom/variables";
@import "../../assets/scss/variables";
Bon apprentissage
Les utilisateur(s) suivant ont remercié: Jeff71
Connexion ou Créer un compte pour participer à la conversation.