Ajout de CSS dans fiche de présentation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout de CSS dans fiche de présentation

Message par Mermaid le Mer 1 Avr 2015 - 17:17

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é.

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 I love you


Dernière édition par Mermaid le Mer 8 Avr 2015 - 21:06, édité 1 fois

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de CSS dans fiche de présentation

Message par Neptunia le Mer 1 Avr 2015 - 17:50

Bonjour ^^


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;}
à titre d'exemple le début de la première partie.

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>
Vous rajoutez une classe à la div, et tout le CSS sera à sortir de la div pour l'inclure à la feuille css

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;
}

Neptunia
+ Hyperactif +

Féminin
Messages : 11002
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de CSS dans fiche de présentation

Message par Mermaid le Mer 1 Avr 2015 - 18:02

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 scratch

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de CSS dans fiche de présentation

Message par Neptunia le Mer 1 Avr 2015 - 20:12

C'est pourtant précisément ce qu'il y a de plus simple.

Pour l'opacité !
<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>
Il suffit de virer les balises en rouge et de déplacer ce qui reste dans la feuille css c'est à dire cela
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;
}

Neptunia
+ Hyperactif +

Féminin
Messages : 11002
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de CSS dans fiche de présentation

Message par Mermaid le Mer 8 Avr 2015 - 21:06

Merci beaucoup I love you

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum