Jump to content

Créer une class css uniquement pour un élément


Recommended Posts

Bonsoir,

 

Je viens vers vous car j'aimerais créer une class css pour un widget. J'utilise un thème payant que j'ai rendu full width pour tous le body mais cela me grossit certains blocs.

 

J'ai par exemple un bloc de 4 images horizontales que je fais en 400x400 px

bloc image.tiff

 

Les 4 blocs se redimensionne automatiquement en fonction de la résolution de l'écran utilisé (moi en 1920x1080) ainsi que les images, jusque là tous va bien, mais je me suis rendu que les images ne sont pas centrés dans les blocs qui font 450px de large (j'ai un padding de 15px à gauche et à droite sur chaque bloc, soit (450 x 4) + (30 x 4)=1920).

 

Je voudrais donc appliquer uniquement à ces images un display: inherit pour que les images se centre. Malheureusement ces blocs utilisent actuellement une class css partagés avec d'autres éléments...

 

J'ai au travers de mon widget la possibilité d'indiquer une class css propre à ce dernier mais comment faut il faire?

Link to comment
Share on other sites

Hello,

 

Ton widget doit avoir un id propre à lui, qui te permet de sélectionner la class uniquement pour ce widget, par exemple :

#blocktopmenu .taclass {
display: inherit;
}

Si ce n'est pas le cas, tu peux toujours déplacer le tpl du module en question dans ton thème :

 

/themes/tonthemes/modules/nomdumodule/fichier.tpl ou 

 

/themes/tonthemes/modules/nomdumodule/views/templates/hook/fichier.tpl

 

Et là tu pourras le modifier pour y ajouter une class spécifique sur les éléments que tu souhaites, en cas de mise à jour du module, tu ne perdra pas ta class CSS par contre il faut vérifier les nouveautés (s'il y en a) dans le fichier tpl du module, pour les reporter dans le fichier du thème.

 

Bien à toi,

Thymotep

Edited by Thymotep (see edit history)
  • Like 1
Link to comment
Share on other sites

Bonsoir,

 

J'ai bien trouvé le tpl du widget en question qui s'appelle ApImage.tpl. Dans le fichier css du module (enfin du groupe de mobule Ap) qui s'appelle style.css j'ai bien une classe

.group-widget .ApImage.block {
  margin: 0;
}

mais si je modifie ce dernier, ce sont tous les blocs images qui vont être impacter, mais si je veux uniquement appliquer ce display à une partie des blocs et non pas à tous les blocs du widget, est ce que je peux créer par exemple :

.group-widget .ApImage.block .item {
display: inherit;
}

Pour ensuite appeler la class ".group-widget .ApImage.block .item" directement depuis le bloc en question (cf image dessous) ?

 

CSS Class ApImage.tiff

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...