Petite personnalisation :)

Bonjour :)
J'espère ne pas m'être trompé de catégorie. J'aurais besoin d'une petite personnalisation de ce code là : https://www.never-utopia.com/t53351-cadre-de-validation-information-camera-obscuria

J'aimerais que l'image en haut a gauche soit supprimé et avoir trois variantes : une variante verte, une variante orange et une variante rouge.


Voilà :)

Je vous remercie :)

Cordialement,
LudaWeb01

Hello :)

Même s'il s'agit d'un libre service, n'hésite pas à poster le code (^-^)

Pour enlever l'image, c'est cette partie là :

Code:

<div style="position: absolute; width: 102px; height: 102px; text-align: center; top: -35px; left: -55px; "><img src="http://nsa34.casimages.com/img/2013/11/15/131115042702263487.png" class="icone" style="width: 60px; "></div>

Et tu peux aussi retirer cette zone là qui n'a plus d'utilité une fois l’icône enlevée :)

Code:

.icone{margin: auto; display: inline-block; border-radius: 50px 50px 50px 50px;border-top: 2px solid #3B1F2D; border-bottom: 2px solid #3B1F2D; transition: 2s; }.icone:hover{transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); }

Pour la suite de la personnalisation, petite question, où comptes tu utiliser ce code ? Sur ton propre forum comme message de validation ou autre part ?

Sur mon nouveau forum en tant que message de validation oui :)

Si c'est pour utiliser dans ton forum, on peut prendre le CSS qui se trouve entre les balises style et les mettre dans le CSS du forum !

C'est à dire que tu enlèves dans ton message :

Code:

<style>.fond {margin-left: auto; margin-right : auto; width: 550px; background-color: #3B1F2D; background-image: url(http://img11.hostingpics.net/pics/507602PATTERNDEUX.png); background-repeat: repeat; border-top:10px solid #3B1F2D; border-bottom: 10px solid #3B1F2D; border-left: 1px solid #3B1F2D; border-right: 1px solid #3B1F2D; border-radius: 0px 0px 10px 10px;  box-shadow: 0px 0px 0px #3B1F2D;}.head {width: 550px; border-bottom: 10px solid #3B1F2D}.titre{transition: 2s ease; display: inline; color: #F6ECDB; font-family: 'Berkshire Swash', cursive; font-size: 35px; position: relative; top: -15px}.titre:hover{color: #3A1F2D} .soustitre{font-family: 'Playball', cursive; color: #3A1F2D; margin-left: auto; margin-right: auto; width: 550px; text-align: center; font-size: 25px; margin-bottom: -5px; transition: 2s ease;} .soustitre:hover{color: #F6ECDB} .bloc{background-color: #644A52; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; margin-right: auto; margin-left: auto; width: 500px; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px} .mef1,.mef2,.mef3,.mef4,.mef5,.mef6,.mef7 {color: #C8C6C4;text-shadow: 0px 0px 2px #C8C6C4; transition: 1s;}.mef1:hover {color: #CD3259;text-shadow: 0px 0px 2px #CD3259; }.mef2:hover {color: #E88124;text-shadow: 0px 0px 2px #E88124; }.mef3:hover {color: #EACF15;text-shadow: 0px 0px 2px #EACF15; }.mef4:hover {color: #78CC1C;text-shadow: 0px 0px 2px #78CC1C; }.mef5:hover {color: #35A0B7;text-shadow: 0px 0px 2px #35A0B7; }.mef6:hover {color: #2031C8;text-shadow: 0px 0px 2px #2031C8; }.mef7:hover {color: #C626BA;text-shadow: 0px 0px 2px #C626BA; }.icone{margin: auto; display: inline-block; border-radius: 50px 50px 50px 50px;border-top: 2px solid #3B1F2D; border-bottom: 2px solid #3B1F2D; transition: 2s; }.icone:hover{transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); }.bulle span{position: absolute; top: auto; left: auto; width: 300px ; height: auto; display: none; background-color: #644A52; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px; }.bulle:hover span{display: block}</style>

Et tu rajoutes dans le CSS du forum :

Code:

/* ---- DEBUT CADRES DE VALIDATION NEVER UTOPIA ----*/

.fond {
    margin: auto;
    width: 550px;
    background-color: #3B1F2D;
    background-image: url(http://img11.hostingpics.net/pics/507602PATTERNDEUX.png);
    background-repeat: repeat;
    border-top: 10px solid #3B1F2D;
    border-bottom: 10px solid #3B1F2D;
    border-left: 1px solid #3B1F2D;
    border-right: 1px solid #3B1F2D;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 0px #3B1F2D;
}


.soustitre {
    font-family: 'Playball', cursive;
    color: #3A1F2D;
    margin: auto;
    width: 550px;
    text-align: center;
    font-size: 25px;
    margin-bottom: -5px;
    transition: 2s ease;
}

.soustitre:hover {
    color: #F6ECDB;
}

.bloc {
    background-color: #644A52;
    border-left: 2px solid #3B1F2D;
    border-right: 2px solid #3B1F2D;
    margin: auto;
    width: 500px;
    padding: 5px;
    text-align: justify;
    color: #A19D99;
    font-family: "times new roman";
    font-size: 12px;
}

.mef1,.mef2,.mef3,.mef4,.mef5,.mef6,.mef7 {
    color: #C8C6C4;
    text-shadow: 0px 0px 2px #C8C6C4;
    transition: 1s;
}

.mef1:hover {
    color: #CD3259;
    text-shadow: 0px 0px 2px #CD3259;
}

.mef2:hover {
    color: #E88124;
    text-shadow: 0px 0px 2px #E88124;
}

.mef3:hover {
    color: #EACF15;
    text-shadow: 0px 0px 2px #EACF15;
}

.mef4:hover {
    color: #78CC1C;
    text-shadow: 0px 0px 2px #78CC1C;
}

.mef5:hover {
    color: #35A0B7;
    text-shadow: 0px 0px 2px #35A0B7;
}

.mef6:hover {
    color: #2031C8;
    text-shadow: 0px 0px 2px #2031C8;
}

.mef7:hover {
    color: #C626BA;
    text-shadow: 0px 0px 2px #C626BA;
}

/* ---- DEBUT CADRES DE VALIDATION NEVER UTOPIA ----*/

Maintenant, tu peux supprimer de ton message cette ligne là :

Code:

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash|Playball&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Est ce que tu comptes garder la même police pour les titres ?

Si oui, dans ton template overall-header, on va repérer ceci :

Code:

{CSS}

Et juste en dessous on met la ligne pour appeler la police :

Code:

<link href='http://fonts.googleapis.com/css?family=Playball&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Si non, tu as juste à personnaliser le CSS pour le titre. Il se trouve ici :

Code:

.soustitre {
    font-family: 'Playball', cursive;
    color: #3A1F2D;
    margin: auto;
    width: 550px;
    text-align: center;
    font-size: 25px;
    margin-bottom: -5px;
    transition: 2s ease;
}

C'est la ligne avec font-family qu'il faudra modifier.

Toutes ces modifications nous permettent d'avoir une meilleure base. Pour tes messages de validation, plus besoin de tout poster, seul le html restant suffit ! :)

Maintenant pour les versions avec différentes couleurs, comme tu peux le voir il y a une image de fond → https://2img.net/r/hpimg11/pics/507602PATTERNDEUX.png

Est ce que tu souhaites la colorer toi même dans différentes teinte ou pas ?

Merci
Alors pour répondre a ta question :
1/ Non je souhaite garder la même police
2/ Je ne comprend pas ce que tu veut dire (Je suis peut-être bête j'sais pas ^^)

En fait tu as dit :

J'aimerais que l'image en haut a gauche soit supprimé et avoir trois variantes : une variante verte, une variante orange et une variante rouge.

Tu parles de quoi comme variante du coup ? Juste changer les couleurs des bordures ?
En effet, actuellement il y a une image de fond violette, ça va faire bizarre une image violette avec des bordures vertes, non ?

Ayant (beaucoup) de problème de réseau ces temps-ci, je viens de constater qu'il y'a une image

Et si on enlève l'image et que l'on met les couleurs de fond en nuances ? Je ne sais pas si tu vois ce que je veut dire...

On peut totalement enlever l'image juste jouer avec les couleurs

L'image de fond se trouve dans le CSS de .fond à cet endroit là (tu peux donc retirer la ligne) :

Code:

background-image: url(http://img11.hostingpics.net/pics/507602PATTERNDEUX.png);

Au passage, dans le HTML tu as ceci :

Code:

<a style="color: #3B1F2D; font-size: 10px" href="http://www.never-utopia.com">© Narja - Never-Utopia</a>

Tu peux le remplacer par ça :

Code:

<a class="credit-narja" href="http://www.never-utopia.com">© Narja - Never-Utopia</a>

Et ajouter au CSS :

Code:

.credit-narja {
    color: #3B1F2D;
    font-size: 10px
}

Le but étant d'enlever du HTML toutes les couleurs déjà mises, afin de pouvoir plutôt les styliser dans le CSS.

avoir trois variantes : une variante verte, une variante orange et une variante rouge.

Tu veux garder la version violette actuelle aussi ou pas ?

Hello! ^^
Est-ce toujours d'actualité? As-tu vu la dernière réponse de Nihil?

Pas de nouvelles, j'archive!