personnaliser le style css action tab

Plus d'informations
il y a 1 an 2 jours - il y a 1 an 2 jours #2031 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
Dernière édition: il y a 1 an 2 jours par Jeff71.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 2 jours #2032 par lomart
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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 1 jour - il y a 1 an 1 jour #2033 par Jeff71
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
Dernière édition: il y a 1 an 1 jour par Jeff71.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 1 jour #2034 par lomart
Bonsoir,

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 CSS, c'est le dernier qui parle qui a raison. Un peu comme dans la vie :whistle:
Si UP ajoute une règle après cassiopeia, elle sera prioritaire. On voit l'empilement des règles dans l'inspecteur

En bidouillant , j'ai modifier le fichier /plugins/content/up/actions/tab/tab.css

Mauvaise idée, à la prochaine mise à jour de up, elle sera effacée.
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]
#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
Les utilisateur(s) suivant ont remercié: Jeff71

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 1 jour #2035 par Jeff71
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

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.

Plus d'informations
il y a 1 an 1 jour #2036 par lomart
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
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.

Propulsé par Kunena