Changer la couleur de "bloc coloré pleine largeur"

[cbo]

Bonjour à toute l'équipe, concepteurs et forumeurs!

Je connais vraiment peu de chose du CSS, et voilà ce que j'ai écrit (après sauvegarde  ) dans l'éditeur CSS, pour modifier la couleur (bleue de base) du "bloc coloré pleine largeur" :

/* fullwidthcolorbox */
/*
.blockFullWidth colorbox-0 {
    background-color: rgba(207,218,122,1);
}

*/

Je n'ai pas obtenu de changement de couleur.

Quelle est la procédure à suivre?

Autre question :

Comme je souhaite utiliser plusieurs blocs à suivre sur la même page, j'aimerai bien leur donner des couleurs différentes.
Dois-je changer quelque chose dans le code HTML aussi? Comme par exemple renommer colorbox-0 en colorbox1, pour pouvoir ensuite modifier la couleur dans l'éditeur CSS?

Merci de votre retour d'info,

Claire

[Lionel]

Je n'ai pas obtenu de changement de couleur.

Quelle est la procédure à suivre?

C'est la class CSS .colorbox-0 qu'il faut modifier, et tu as omis le point qui identifie cette class, ses valeurs par défaut sont :

Code Sélectionner Étendre

.colorbox-0 {
color: #F7F6CF;
background-color: #5784BA;
display: block;
}
.colorbox-0 a {
color: #FFBF66;
}
.colorbox-0 h2, .colorbox-0 h3{
color: #F4CFDF;
}

je souhaite utiliser plusieurs blocs à suivre sur la même page, j'aimerai bien leur donner des couleurs différentes

Les pseudo-classes :nth-child() permettent de le faire, mais sont un peu délicates à manipuler pour quelqu'un qui connait vraiment peu de chose du CSS
Sinon, oui, renommer colorbox-0 en colorbox1 revient à créer une nouvelle class CSS, que tu n'es pas obligée de nommer colorbox

[Lionel]

Exemple :

Code Sélectionner Étendre

.colorbox-0 {
    background-color: rgba(207,218,122,1);
}

.truc {
    background-color: red;
}

.chose {
    background-color: green;
}
Ajout des class CSS en mode code source :

You cannot view this attachment.

Résultat :
You cannot view this attachment.

[cbo]

Bonsoir Lionel,

Merci de ta réponse, j'ai recopié le code dans l'éditeur CSS (en modifiant qq couleurs)et toujours aucun changement :

*/

/* fullwidthcolorbox */
/*
.colorbox-0 {
    color: #040400;
    background-color: #cfda7a;
    display: block;
}
.colorbox-0 a {
    color: #584f40;
}
.colorbox-0 h2, .colorbox-0 h3{
    color: #F4CFDF;
}

*/

Qu'est-ce que j'oublie?

[Lionel]

Bonsoir Claire,

Ton code est encadré par /* */ il est donc commenté, et non interprétable

[cbo]

Bonjour Lionel,

J'ai compris l'utilité des /* */ , merci, cela fonctionne bien à présent!

Bonne semaine,
Claire

[Tôt]

Bonjour CBO,

Autre possibilité...

Si vous souhaitez créer des grilles symétriques avec Tiny dans Delta et y ajouter une couleur de fond, il vous suffit d'abord de sélectionner le nombre de colonnes désiré. Ensuite, accédez au code source afin d'y appliquer les modifications suivantes.

**Exemple d'origine – grille Delta symétrique 6-6 :**

Code Sélectionner Étendre

<div class="row">
    <div class="col6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
    </div>
    <div class="col6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
    </div>
</div>
<p>Conserver jusqu'à la fin de la mise en page pour faciliter les insertions.</p>

Modification à appliquer

Remplacez simplement :

Code Sélectionner Étendre

<div class="col6">

par :

Code Sélectionner Étendre

<div class="col6" style="background-color: #ff9900;">

Vous pouvez bien entendu remplacer le code couleur par celui de votre choix.

Code couleur : LIEN

 Le script Delta offre un très large éventail de possibilités.

Cordialement,