Adaptation d'un code

Bonjour à tous !
étant en train de construire mon forum, j'ai voulu tenter de réaliser certaines choses par moi-même grâce aux tutos et LS présents sur le forum et j'ai réussi à arriver à un résultat qui me plait ! Seulement s'il y a des choses que j'ai réussi à trifouiller, il y en a en revanches d'autres qui sont totalement hors de ma portée, donc j'aurais besoin d'un petit coup de main pour terminer.

J'ai donc utiliser ce codage de catégorie proposés par Halloween : https://www.never-utopia.com/t49429-structure-epuree-discrete-et-bleue-ciel

Le concept de la bande bleue puis du ''corps'' blanc me plaisant beaucoup, j'ai donc décidé de le décliner sur tout mon forum pour rester harmonieuse, mais si j'ai réussi à le faire pour mon qeel (et que j'ai posé mon soucis de PA ailleurs), je ne sais en revanche pas comment faire pour que cette bande bleue + corps blanc s'applique partout :
- sur la barre de navigation
- dans l'affichage des sujets en eux-mêmes
- dans l'affichage des mp en eux-mêmes
- dans la liste des sujets et des mps
- etc ...

Bref, j'aimerais bien pouvoir afficher ce concept partout mais je ne sais pas du tout comment faire, donc je préfère me tourner vers quelqu'un d'autre ^^

Je vous mets ici le lien de mon forum et la code couleur exact que j'ai moi-même utilisé mais si jamais il manque des éléments, n'hésitez pas !
Merci beaucoup ^^

Le code couleur : #3C627D
Mon forum : http://terraformars.forumactif.org/

(et désolée pour la non-utilisation de votre codage de base pour la demande mais je trouvais que c'était plus facilement explicable comme je l'ai fait ^^")

Up ^^

Hello! ^^
Je ne comprends pas du tout ce que tu veux... est-ce que tu pourrais nous faire des captures d'écran, des schémas, etc. de ce que tu veux? Parce que là comme ça, je ne comprends pas ton soucis x)

Hello,

en fait en utilisant le LS de Halloween, j'obtiens des catégories qui ressemblent à ça :



Et j'adore cette bande bleue avec l'écriture blanche, donc j'aurais voulu pouvoir la réutiliser partout, et ce pour tous mes ''titres''. Par exemple comme sur NU, ''demandes autres'' ''poster une réponse'' ''boite de réception :: message'' ...
En modifiant le codage et les couleurs du forum en lui-même, j'ai réussi à obtenir un résultat assez proche :



Mais je ne sais pas s'il est possible d'avoir un rendu absolument identique à celui des catégories ?
(à la limite maintenant que j'ai réussi à modifier ça, j'ai envie de dire que c'est secondaire vu que c'est déjà très proche de ce que je voulais obtenir)

Par contre au niveau de la barre de navigation, là j'ai vraiment un soucis :



Le rendu de la barre est radicalement différent de celui des titres de catégories, surtout parce que ma barre n'est pas ''complète'' mais divisée en bloc, mais aussi parce que l'écriture ne rend pas du tout pareil même s'il s'agit de la bonne police. De plus, malgré le tuto que j'ai suivi indiquant que la balise ''absolute'' devait positionner ma barre au dessus du header, ce n'est pas le cas vu qu'elle passe par dessus :/

Donc voilà, en espérant être compréhensible ^^

Hello,

Je ne sais pas trop si on a le droit de répondre à seulement une partie d'une demande, mais pour ta barre, actuellement ton CSS se met sur les liens (a.mainmenu) mais il faut le mettre sur la barre autour (.navig)

De plus, malgré le tuto que j'ai suivi indiquant que la balise ''absolute'' devait positionner ma barre au dessus du header, ce n'est pas le cas vu qu'elle passe par dessus :/

Comment ça ?

EDIT : Ah je crois que j'ai compris, en gros tu voudrais ceci un peu pour la barre de nav ?


Une petite screen en mettant la barre de navigation à côté d'un titre pour pouvoir comparer, ça donnerait ceci :

Hello,

oui, c'est exactement ce rendu que je souhaiterais obtenir ^^
Et voici mon CSS :

Code:

body
{
background-color: #D3E4EC;
background-image: url(http://host.image.files.free.fr/host/4c4d1d1d61697back_01.png);
background-position: top center;
background-repeat: repeat-x;
}

a
{
outline: none;
}

a:link
{
text-decoration: none !important;
}

a:hover
{
text-decoration: underline overline !important;
}

.bodylinewidth
{
width: 900px;
}


#i_logo
{
margin-top: -18px;
}

.navig {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

a.mainmenu
{
background: #3C627D;
padding: 3px;
font-size: 15px;
font-family: arial;
color: #ffffff;
text-align: center;
text-decoration: none !important;
}



.forumline
{
max-width: 890px;
margin: auto;
background-image: url(http://host.image.files.free.fr/host/4c4d2752ed261fond-forumline.jpg);
background-position: top;
background-repeat: repeat-x;
background-color: #3C627D;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 5px;

margin-bottom: 10px;
}

table
{
max-width: 890px;
margin: auto;
}



.thHead
{
border: none !important;
}

.thCornerL, .thCornerR, .thTop
{
border: none !important;
}

.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
border-top: 1px solid #73a2c3 !important;
}

.catLeft, .catRight
{
border: none! important;
}

th
{
color: #fffff;
font-variant: small-caps;
letter-spacing: 1px;
text-shadow: 1px 1px 2px #4b6b81;
}

.catHead
{
border: none !important;
}

.catBottom
{
border: none !important;
}

.cattitle
{
margin-left: 20px;
font-variant: small-caps;
}

a.forumlink
{
letter-spacing: 2px;
font-variant: small-caps;
}

a.forumlink:hover
{
text-decoration: none !important;
}


.code
{
border: 2px inset #8dbcdd;
padding: 5px;
background-color: #d3e4ec;
color: #507c9b;
}

.quote
{
border-radius: 6px;
-moz-border-radius: 6px;
padding: 5px;
background-color: #d3e4ec;
-moz-box-shadow: 3px 3px 3px #7597af;
box-shadow: 3px 3px 3px #7597af;
color: #011B2E;
}

.spoiler_closed
{
background-color: #d3e4ec;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #8dbcdd;
}

.spoiler_content
{
background-color: #d3e4ec;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #8dbcdd;
color: #011B2E;
padding: 4px;
}

.postbody
{
text-align: justify;
padding: 3px;
font-size: 11px;
line-height: 16px;
}






#page-footer
{
background-image: url(http://host.image.files.free.fr/host/4c4d25f59c2c1footer_02.png);
background-repeat: no-repeat;
background-position: top center;
width: 980px;
height: 120px;
margin-bottom: -18px;
}

#page-footer a
{
font-size: 10px;
text-decoration: none !important;}

      /* --------------------------------- CATEGORIES --------------------------------- */

        /**** POSITIONNEMENT IMAGES New, no new, lock ****/
        .img_new {
          position: relative;
          left: 12.8em;
          top: -8em;
        }

        /**** STATISTIQUES ****/
        /* Ronds bleus */
        .stats {
          background-color: #3C627D;
          color: white;
          width: 60px;
          height: 60px;
          border-radius: 100px;
          position: relative;
          top: -5.8em;
          left: 5em;
        }

        /* Contenu des ronds */
        .stats_1 {
          position: relative;
          top: 0.7em;
        }

               
        /**** ILLUSTRATIONS DES FORUM ****/
        .imgforum {
          position: relative;
          display: block;
          left: 0.1em;
          top: -4.1em;
        }

        /**** FONDS GENERAUX ****/
        /* Contenu de l'ensembre des forum */
        .categorie {
          width: 400px;
          height: 70px;
          padding: 10px;
        }

        /* Fond titre catégorie */
        .cate_titre {
          position: relative;
        margin: auto;
          top: -4em;
        }

        /* Mise en forme nom de catégorie */
        h2 {
          font-size: 18px;
          font-family: arial;
          color: #ffffff;
          text-align: center;
        }

        /**** MISE EN FORME DES FORUM ****/
        /* Mise en forme du texte des titres de forum */
        .forumlink {
          color: #3C627D!important;
          font-family: arial;
          font-size: 15px !important;
          font-weight: none !important;
          text-transform : uppercase;
          position: relative;
          top: -3.1em;
          left: 3.5em;
          z-index: 1;
          text-shadow:1px 1px 2px white;
          display: block;
        }

        .forumlink:hover {
          color: #0C2F47 !important;
          text-decoration: none !important;
        }

        .forumlink a {
          font-size: 16px;
        }

        /**** MISE EN FORME DESCRIPTION ****/               
        .description {
          font-size: 11px;
          text-align: justify;
          color: #888285;
          position: relative;
          top: -12em;
          left: 4.5em;
          padding: 15px;
        }

        /**** DERNIERS MESSAGES ****/
        .last_mess {
          position: relative;
          left: 8.5em;
          top: -7.8em;
          color: #808080;
          font-size: 11px;
          text-align: center;
          width: 120px;
        }

        .last_mess a {
          color: black !important;
          text-decoration: none !important;
        }

        .last_mess a:hover {
          color: #CAC9C7 !important;
          text-decoration : none !important;
        }
/* Faux centrage des categories */
.categorie {
    margin-left: 40px;
}


        /*--------------------------------- FIN CATEGORIES --------------------------------- */

        /**=====================================================
                      Ombrelle bleu | Par Batty
        =====================================================**/
       

.contexte{
  width: 630px;
  height: 150px;
  background-color:#5F8097;
  color: #ffffff;
  font-size: 12px;
  text-align: justify;
  overflow: auto;
  margin:5px;
  padding: 5px;
}

.blocliens{
  width: 150px;
  height: 150px;
  background-color:#3C627D;
  color: #ffffff;
  font-size: 12px;
  text-align: justify;
  margin:5px;
  padding: 5px;
}

.liens{
  background-color:#ffffff;
  color: #55969d;
  border-radius: 10px;
  font-size: 12px;
  padding: 2px;
  margin:5px;
  text-align: center;
}

.liens:hover{
  background-color:#8fb1b5;
  color: #ffffff;
}

a{
  text-decoration:none;
  }

.new{
  width: 300px;
  height: 125px;
  background-color:#3C627D;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  margin:5px;
  padding: 5px;
}

.staff{
  width: 300px;
  height: 125px;
  background-color:#5F8097;
  color: #ffffff;
  font-size: 12px;
  margin:5px;
  padding: 5px;
}

.contenustaff{
  display: inline-block;
  position:relative;
  width: 116px;
  height: 36px;
  background-color: #3f7274;
  color: #ffffff;
  overflow: hidden;
  padding: 2px;
  margin:5px 12px;
  text-align:center;
}

.contenustaff img {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 3s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
  }

.contenustaff:hover img {
  transform: translateX(-120px);
  -moz-transform: translateX(-120px);
  -o-transform: translateX(-120px);
  -webkit-transform: translateX(-120px);
}

.topsites{
  width: 150px;
  height: 125px;
  background-color:#3C627D;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  margin:5px;
  padding: 5px;
}

.partenaire{
  width: 800px;
  height: 55px;
  background-color:#3C627D;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  margin:5px;
  padding: 5px;
  overflow: auto;
}

.soustitre{
  font-family:Swis721 LtEx BT;
  font-variant: small-caps;
  font-size: 18px;
  text-align:center;
  color: #ffffff;
  text-shadow: 1px 1px 5px black;
}

.pseudo{
  font-family:Swis721 LtEx BT;
  font-variant: small-caps;
  font-size: 16px;
  text-align:center;
  color: #ffffff;
  text-shadow: 1px 1px 5px black;
}
       
.copy{
  text-align:right;
  color:#3f7274;
  font-size:12px;
}

    /* DEBUT DU QEEL */
    .cadre_qeel{
    width: 800px;
    margin: 50px auto 10px auto;
    background: #fffff
    padding: -20px 5px 5px 5px;
    font-size: 12px;
    }
    .qeel_titre, a.qeel_titre, a.qeel_titre:active, a.qeel_titre:visited{
    position: relative;
    top: -15px;
    font-family: 'Georgia';
    font-size: 25px;
    text-align: center;
    text-decoration: none !important;
    color: #398235;
    text-shadow: 1px 1px 1px #000;
    }
    a.qeel_titre:hover{
    text-decoration: none !important;
    color: #c9de96;
    text-shadow: 1px 1px 1px #000;
    transition: 350ms color linear, 350ms text-shadow linear;
    }
    .infos_qeel{
    position: relative;
    float: left;
    width: 350px;
    height: auto;
    padding: 10px 5px 10px 10px;
    text-align: left;
    }
    .membres_liste{
    position: relative;
    float: right;
    width: 350px;
    height: 50px;
    overflow-y: auto;
    padding: 10px 5px 10px 10px;
    border-left: 2px solid #3C627D
    text-align: left;
    }
    /* Code les groupes */
    .groupes_qeel{
    width: 650px;
    height: 30px;
    margin: -30px auto -15px auto;
    padding: 10px;
    }
    .groupe1, .groupe2, .groupe3, .groupe4, .groupe5, .groupe6, .groupe7 {
    display: inline;
    font-weight: bold;
    font-family: 'Patrick Hand SC';
    text-align: center;
    font-size: 20px;
    text-shadow: 0px 0px 2px #000;
    }
    .groupe1 {
    color: #000000 !important;
    margin-right: 20px;
    }
    .groupe2 {
    color: #007A99 !important;
    margin-right: 20px;
    }
    .groupe3 {
    color: #990000 !important;
    margin-right: 20px;
    }
    .groupe4 {
    color: #440066 !important;
    margin-right: 20px;
    }
 
    /* FIN DU QEEL */



Hello,

Premier petit changement, on va modifier :

Code:

body
{
background-color: #D3E4EC;
background-image: url(http://host.image.files.free.fr/host/4c4d1d1d61697back_01.png);
background-position: top center;
background-repeat: repeat-x;
}

Pour avoir :

Code:

body
{
background-color: #D3E4EC;
background-image: url(http://host.image.files.free.fr/host/4c4d1d1d61697back_01.png);
background-position: top center;
background-repeat: repeat-x;
margin: 0;
}

---

Ensuite il faut enlever cette partie là:

Code:

#i_logo
{
margin-top: -18px;
}

---

Et pour styliser la barre de navigation il faut trouver :

Code:

.navig {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

a.mainmenu
{
background: #3C627D;
padding: 3px;
font-size: 15px;
font-family: arial;
color: #ffffff;
text-align: center;
text-decoration: none !important;
}

On va la remplacer par ceci :

Code:

/* Barre de navigation */
.navig {
    background: #3c627d;
    font-weight: 700;
    line-height: 50px; /* hauteur de la barre */
}


/* Liens de navigation */
.navig a.mainmenu {
    color: #fff;
    font-family: arial;
    font-size: 18px;
    text-decoration: none !important;
}

Dis moi si c'est bien le rendu que tu cherchais

C'est exactement ça que je voulais, je suis bluffée !
Un énorme merci pour ton aide, je suis aux anges maintenant

Bonsoir,

Si la demande est complétée, n'oublies pas de mettre l'icône "terminé" pour qu'on puisse archiver le sujet

Hello,

elle ne l'est pas, j'avais en effet posé d'autres questions dans mon premier post et j'attends toujours de voir si ce que je voulais est possible ou pas ^^

Hello :)

Pour chacune des modifications restantes, pourrais tu faire une screen de l'élément à modifier (en l'entourant si tu as le courage XD) et en expliquant comment tu aimerais l'afficher s'il te plait ?

Hello,

yep bien sûr !
Je vais comparer avec ici, comme ça se sera plus clair ^^

Donc sur NU, les ''titres'' des sujets et des mps apparaissent comme ça :





J'aimerais donc savoir s'il est possible de faire pareil chez moi et de changer mon affichage par défaut par ces fameuses bandes bleues ^^

(mon affichage par défaut étant celui-ci :


Et voilà ^^

Rendu visuel :



Code :

Code:

h1.cattitle {
    display: block;
    color: white;
    font-family: arial;
    font-size: 18px;
    font-variant: normal;
    line-height: 50px;
}

Par contre, cela va aussi impacter les titres ici : https://i.imgur.com/XdPPWP2.png
Si ça te pose problème dis le moi

Ca risque de faire un peu massif mais je vais tester et diminuer la taille de police au pire.
Un énorme merci à toi :)

Edit : j'ai mis en place et le rendu est absolument nikel !
Encore un grand grand merci à toi pour toute l'aide que tu m'as apportée