Ajout de CSS dans fiche de présentation

2 participants

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 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:

deuxième partie:

Merci d'avance I love you


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

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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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

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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 Mer 8 Avr 2015 - 21:06

Merci beaucoup I love you
Mermaid

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

- Sujets similaires

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