Ajout de CSS dans fiche de présentation
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Ajout de CSS dans fiche de présentation
Bonjour.
Pour faire simple, j'aimerais pouvoir changer les couleurs des fiches sur mon forum par CSS, plutôt que devoir tout changer à même les fiches, à chaque nouvelle version. Je sais que c'est possible, on m'a déjà expliquée comment, mais je n'y arrive tout simplement pas, alors si quelqu'un pouvait me donner un peu de son temps pour aider, ça serait tellement apprécié.
Merci d'avance
Pour faire simple, j'aimerais pouvoir changer les couleurs des fiches sur mon forum par CSS, plutôt que devoir tout changer à même les fiches, à chaque nouvelle version. Je sais que c'est possible, on m'a déjà expliquée comment, mais je n'y arrive tout simplement pas, alors si quelqu'un pouvait me donner un peu de son temps pour aider, ça serait tellement apprécié.
- première partie:
- Code:
<center><style type="text/css" >.op {opacity:0.7;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;} .op:hover {opacity:1;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;}</style>
<style type="text/css" >.histoire1{width:395px;height:auto;padding:5px;font-family:arial;text-align:justify;line-height:12px;font-size:11px;border-top: 2px solid #122523;} .histoire1:hover{width:395px;height:auto;padding:5px;font-family:arial;text-align:justify;line-height:12px;font-size:11px;border-top: 3px solid #122523;}
</style>
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'><div style="color:#122523;font-family: 'Petit Formal Script', cursive; font-size: 24px;width:395px;margin-bottom:-18px;">Prénom prénom nom</div>
<div style="text-align:center;font-size:12px; font-family:ms mincho;font-weight:normal;letter-spacing:2px;text-transform:uppercase;width:395px;margin-bottom:-17px;line-height:9px;">PETITE PHRASE OU CITATION</div>
<img src="http://image.noelshack.com/fichiers/2013/44/1383056716-022.png" width="190px"; img style="border: 1px solid #122523; padding: 2px;" class="op" > <img src="http://image.noelshack.com/fichiers/2013/44/1383056716-022.png" width="190px"; img style="border: 1px solid #122523; padding: 2px;" class="op" ></center>
<center><div class="histoire1"><div style="font-size:px; text-transform: ;">
[justify][b]Prénoms :[/b] ici [color=#122523]›[/color] [b]Nom :[/b] ici [color=#122523]›[/color] [b]Âge :[/b] ici [color=#122523]›[/color] [b]Date de naissance :[/b] ici [color=#122523]›[/color] [b]Métier :[/b] ici [color=#122523]›[/color] [b]Ville d'origine :[/b] ici [color=#122523]›[/color] [b]Statut social :[/b] ici [color=#122523]›[/color] [b]Orientation sexuelle :[/b] ici [color=#122523]›[/color] [b]Race :[/b] ici [color=#122523]›[/color] [b]Camp :[/b] ici [color=#122523]›[/color] [b]Célébrité :[/b] ici.[/justify]
</div>
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'><div style="color:#122523;font-family: 'Petit Formal Script', cursive; font-size: 15px;width:395px;margin-bottom:-18px;">who i am.</div><br>
<img src="http://www.hapshack.com/images/aLsOn.png" style="margin-right: 3px; margin-bottom: 1px; border: px solid #122523; padding: 3px;"" width="50" align="left">Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé. Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé. Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé. Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé. Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé. Décrire ici la personnalité de votre personnage, ce qu'il aime ou n'aime pas, ses tics et manies... Un minimum de 10 lignes est demandé.
<br><link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'><div style="color:#122523;font-family: 'Petit Formal Script', cursive; font-size: 15px;width:395px;margin-bottom:-18px;">behind the screen.</div><br>
<div style="text-align: justify;">[b]Prénom ou pseudo :[/b] ici [color=#122523]›[/color] [b]Âge :[/b] ici [color=#122523]›[/color] [b]Pays :[/b] ici [color=#122523]›[/color] [b]Où as-tu découvert le forum :[/b] ici [color=#122523]›[/color] [b]Accepte un doublon d'avatar ou non :[/b] ici [color=#122523]›[/color] [b]Fréquence de connexion :[/b] ici [color=#122523]›[/color] [b]Un dernier mot :[/b] ici.</div></div></center><br>
- deuxième partie:
- Code:
<center><style type="text/css" >.op {opacity:0.7;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;} .op:hover {opacity:1;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;}</style>
<style type="text/css" >.histoire1{width:395px;height:auto;padding:5px;font-family:arial;text-align:justify;line-height:12px;font-size:11px;border-top: 2px solid #122523;} .histoire1:hover{width:395px;height:auto;padding:5px;font-family:arial;text-align:justify;line-height:12px;font-size:11px;border-top: 3px solid #122523;}
</style>
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'><div style="color:#122523;font-family: 'Petit Formal Script', cursive; font-size: 24px;width:395px;margin-bottom:-18px;">Once Upon a Time</div>
<div style="text-align:center;font-size:12px; font-family:ms mincho;font-weight:normal;letter-spacing:2px;text-transform:uppercase;width:395px;margin-bottom:-17px;line-height:9px;">ENCORE UNE PETITE PHRASE OU CITATION</div>
<img src="http://25.media.tumblr.com/tumblr_mbtc6ryx6K1rd501xo1_500.gif" width="380px"; img style="border: 1px solid #122523; padding: 2px;" class="op" ></center>
<center><div class="histoire1">
Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez ! Écrire ici votre histoire en un minimum de 30 lignes. Vous pouvez y aller seulement la forme désirée → journal intime, histoire, rp, par points importants, c'est comme vous voulez !</div></div></center><br>
Merci d'avance
Dernière édition par Mermaid le Mer 8 Avr 2015 - 21:06, édité 1 fois
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajout de CSS dans fiche de présentation
Bonjour ^^
Il suffit de transférer dans votre feuille CSS le contenu des balises style (sans les balises elles-même)
Un autre exemple avec cette div
Par exemple :
Il suffit de transférer dans votre feuille CSS le contenu des balises style (sans les balises elles-même)
- Code:
.op {opacity:0.7;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;} .op:hover {opacity:1;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;}
Un autre exemple avec cette div
- Code:
<div style="color:#122523;font-family: 'Petit Formal Script', cursive; font-size: 24px;width:395px;margin-bottom:-18px;">Prénom prénom nom</div>
Par exemple :
- Code:
<div class="prenom_nom">Prénom prénom nom</div>
- Code:
.prenom_nom {
color: #122523;
font-family: 'Petit Formal Script', cursive;
font-size: 24px;
width:395px;
margin-bottom:-18px;
}
Re: Ajout de CSS dans fiche de présentation
Merci pour la réponse, ça fonctionne très bien pour le prénom prénom nom, mais je suis perdue quand j'essaie de faire de même pour l'opacité ou encore pour le cadre des photos
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajout de CSS dans fiche de présentation
C'est pourtant précisément ce qu'il y a de plus simple.
Pour l'opacité !
Et si on veut un code plus digeste (pour nos yeux), on rajoute un saut de ligne après chaque ;
Au passage il me semble que dans le cas de propriétés "préfixées" il est nécessaire de mettre la ligne générique après le bloc de lignes dépendantes du navigateur
Ce qui donnerait ceci :
Pour l'opacité !
Il suffit de virer les balises en rouge et de déplacer ce qui reste dans la feuille css c'est à dire cela<style type="text/css" >.op {opacity:0.7;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;} .op:hover {opacity:1;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;}</style>
- Code:
.op {opacity:0.7;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;} .op:hover {opacity:1;transition: 1s;-moz-transition: 1s;-o-transition: 1s;-htm-transition: 1s;-webkit-transition: 1s;}
Et si on veut un code plus digeste (pour nos yeux), on rajoute un saut de ligne après chaque ;
- Code:
.op {
opacity:0.7;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.op:hover {
opacity:1;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
Au passage il me semble que dans le cas de propriétés "préfixées" il est nécessaire de mettre la ligne générique après le bloc de lignes dépendantes du navigateur
Ce qui donnerait ceci :
- Code:
.op {
opacity:0.7;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.op:hover {
opacity:1;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
Re: Ajout de CSS dans fiche de présentation
Merci beaucoup
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Sujets similaires
» Ajout d'un image dans la fiche de présentation
» Code manquant dans une fiche de présentation
» Systhème d'onglets dans fiche de présentation.
» Récupération d'un lien menant a la fiche de présentation dans le profil personnalisé
» Fiche de presentation
» Code manquant dans une fiche de présentation
» Systhème d'onglets dans fiche de présentation.
» Récupération d'un lien menant a la fiche de présentation dans le profil personnalisé
» Fiche de presentation
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum