Personnaliser une table en CSS

Personnaliser une table en CSS [Réglé]

MickaelFR Membre non connecté

Booster Fusée

Le 06/01/2018 à 16h13

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Bonjour.

J'avoue avoir quelques difficultés pour personnaliser une table (liste des membres).

En effet, lorsque je sélectionne ce morceaux dans table.css pour le mettre dans le user.css (voir ci-dessous), j'ai un duplicata sur plusieurs modules !

Code CSS :

table {
    margin: 0px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;
}

J'aurai donc souhaité, que sur certaines table, ce soit unique :

Code CSS :

 
   table {
    margin: 0px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;background-color:#ecf0f1;
    padding:10px;
    border:1px solid #366393;
    border-radius:4px;
    box-shadow:0px 2px 4px #ddd;
}

J'ai souhaité créer un ID, mais en faite sur la liste des membres, on peut pas personnaliser la table par CSS .. On à juste ceci dans le fichier : UserUsersListController.tpl :

Code HTML :

<section id="module-user-users-list">
    <header>
        <h1>{@users}</h1>
    </header>
    <br /><br /><br /><br />
    <div class="content">
        # IF C_ARE_GROUPS #
        <div class="user-group-select">
            # INCLUDE SELECT_GROUP #
        </div>
        # ENDIF #
        # INCLUDE table #
    </div>
    <footer></footer>
</section>

Du coup, ça complique encore plus la personnalisation ..

C'est pas spécialement important, mais je tenais à mettre tout de la même façon.

Arrive la solution, de mettre carrément tout le code directement sur le table.css, mais dans ce cas présent, comment personnaliser les autres modules, dont je ne veux pas de personnalisation? Cela revient au même, ou presque.

Merci pour votre savoir

planet-truck.fr - mickaelfr.eu

babsolune Membre non connecté

Administrateur

Le 06/01/2018 à 19h03

#160469

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :

il faut que tu utilises les id ou les classes spécifiques aux modules que tu veux modifier

au lieu de

Code CSS :

table {
    margin: 0px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;background-color:#ecf0f1;
    padding:10px;
    border:1px solid #366393;
    border-radius:4px;
    box-shadow:0px 2px 4px #ddd;
}

si tu utilises l'id module-user-users-list dans le user.css

Code CSS :

#module-user-users-list table {
    margin: 0px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;background-color:#ecf0f1;
    padding:10px;
    border:1px solid #366393;
    border-radius:4px;
    box-shadow:0px 2px 4px #ddd;
}

ça va influer sur les 2 tables groupes et user

tu peux encapsuler la table user uniquement dans une div avec une classe

Code CSS :

<div class="user-list">
            # INCLUDE table #
        </div>

et ainsi déclarer des css spécifiques uniquement pour la table user

Code CSS :

.user-list table {
    margin: 0px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;background-color:#ecf0f1;
    padding:10px;
    border:1px solid #366393;
    border-radius:4px;
    box-shadow:0px 2px 4px #ddd;
}

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

MickaelFR Membre non connecté

Booster Fusée

Le 06/01/2018 à 19h09

#160470

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Bonjour et merci pour les explications

Tu n'aurai pas fais une faute sur cette ligne? :

Code CSS :

#module-user-users-list table {

Car il y a un S à userS .. Puis dans la class, il n'y ai pas. C'est juste pour voir si j'ai bien compris

En te remerciant.

planet-truck.fr - mickaelfr.eu

babsolune Membre non connecté

Administrateur

Le 06/01/2018 à 21h23

#160472

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :

je n'en ai pas mis en effet, mais dans la mesure où c'est une création, peu importe. Tu peux en rajouter un si tu veux du moment que tu écris la même chose dans le fichier css ET dans le fichier tpl

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

MickaelFR Membre non connecté

Booster Fusée

Le 06/01/2018 à 21h28

#160473

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

D'accord, merci

planet-truck.fr - mickaelfr.eu

Support Général

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie