| | Faire de beaux titres (messages) |  |
|
|
 Flicka 
{ Membre }
 Messages : 46
 | Ce code est pour toutes sortes de choses. Que ce sois dans la structure ou dans un simple message.
Tu peux utiliser ce que je t'es donner pour faire un beau titre.
Vu que je commence à peine le CSS, je ne peux pas t'en dire plus. | | |
|
| | |
Johian
{ Membre actif }
Messages : 778
| Saya, peux tu me donner ta feuille de style CSS, et EXACTEMENT ce que tu écris, pour voir ?
Ce tuto permet de faire des titres dans les messages à la base (du moins, je l'ai conçu dans cette optique-ci), si tu t'en sers pour autre chose il se peut qu'il y ait quelques problèmes... (Par exemple, si jamais tu as dis dans le code "text-align: center;", si jamais tu mets le code entre balise SPAN ça ne marchera pas, il faut mettre DIV.
Bref, passe moi ton CSS et explique ce que tu fais exactement, voir si je peux t'aider ^^" | | |
|
| | |
Invité Invité
| :S Ça ne marche pas Chez Moi : - Code:
-
<div class="titre">Logo sur l'Index</div> - Code:
-
.titre {
font-family: impact, serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
font-size: 100%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
text-transform: uppercase; /* Soyons fou, écrivons le titre en majuscules ! ^^ */
background-image: URL("http://i81.servimg.com/u/f81/11/01/00/53/fond_b10.jpg"); /* Et pourquoi ne pas mettre une petite image ? ça décore, ça fait sympa... xD */
color: #CA0000; /* Couleur de la police ^^ */
text-align: center; /* C'est la classe si le titre est centré, mais on peut l'aligner à droite (right) ou à gauche (left). */
border-left: 2px solid #FF0000; /* ça, c'est pour faire les petites barres sur le côté du titre... Pour les faire plus large, il suffit de mettre 3px, 4px ou plus à la place de "1px" */
border-right: 2px solid #FF0000;
} Où est le Problème ? :S | | |
|
| | |
Johian
{ Membre actif }
Messages : 778
| Euh... Je ne comprends pas, regarde ici, j'ai installé ton code sur mon forum de test, et il marche chez moi ._.
Donc euh... Je ne vois pas. "Logo sur l'index", t'as essayé de le mettre où ? | | |
|
| | |
Invité Invité
| Oui, j'ai essayé de mettre Logo sur l'Index .
Je ne suis pas le Fondateur du forum donc peut-être que ça a un rapport avec ça :S | | |
|
| | |
Invité Invité
| Ah ! Aussi : j'ai pas mis le Point :S | | |
|
| | |
Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Moi aussi j'ai une question \o/ J'ai prit le même même code que Flicka dans mon CSS et j'ai testé pour la structure et tout ce qui me donne ceci:  Tout marche bien jusqu'à présent, mais j'aimerais que ça fasse ceci: - Spoiler:
Est-ce que quelqu'un sait comment o.o? | | |
|
| | |
Shiva
{ Membre }
Messages : 66
| Dans le Panneau d'admin Général/Catégorie de forum. Tu dois mettre ceci dans la partie nom du forum - Code:
-
<DIV style="BACKGROUND-COLOR: ta couleur; TEXT-ALIGN: center"align=center><SIZE=ta taille px><color=couleur d'écriture>-Ton text</i></color></DIV> | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Merci ça marche...
Mais y'a pas moyen de le faire en passant par le CSS? Parce que là sur mon forum ça s'affiche, mais c'est marqué *** Error in the name of your category | *** dans mon panneau d'admin et pour retrouver quel forum est lequel ça va pas ._. | | |
|
| | |
Shiva
{ Membre }
Messages : 66
| De ce côté là, je pourrais pas t'aidée.
Il faut attendre les pros du CSS. ^^" | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Bon j,ai vu que j'avais mit un truc de trop dans mon code, là je vois bien le titre sur le panneau d'admin
N'empêche que ça serait plus rapide par CSS pour changer les couleurs, mais bon x) si c'est possible j'attends patiemment les pro codeurs, sinon alors je ferais la méthode longue x)
Merci Shiva au fait =D | | |
|
| | |
Johian
{ Membre actif }
Messages : 778
| Oui y'a un truc en trop dans son code HTML, mais thoriquement ça marche aussi... Mais ce n'est ni très rapide ni très... Rapide ! xD Pour faire ce rendu de titre en CSS : - Code:
-
.carotte {
color: #6a5868;
border-left: 4px solid #6a5868;
background-color: #252327;
font-variant: small-caps;
padding-left: 2px;
}
A mettre dans tes titres : - Code:
-
<div class="carotte">» Ton titre</div> Mais si tu n'as pas envie de faire cela manuellement, je te revoie à ce sujet, pour apprendre comment passer par les templates (et ainsi changer tous les titres d'un coup.). C'est expliqué dans le premier message d'Orange. | | |
|
| | |
Padsky
{ Membre }
Messages : 83
| - Flicka a écrit:
En faisant des codes toutes la journées, j'ai voulu essayer de résoudre des demandes. Et je viens de faire exactement (Enfin presque) le titre demander par Padsky  . Il manque juste la police en Gras.
Je me suis tout de même servis du code de Johian comme base.
A mettre dans la Fiche de CSS
- Code:
-
.title {
font-family: Georgia;
background-color: #969696;
border-right: 5px solid #969696;
border-left: 5px solid #969696;
color: #000000;
-moz-border-radius:10px;
}
.title:hover {
background-color: #ffffff;
color: #000000;
border-right: 5px solid #969696;
border-left: 5px solid #969696;
border-bottom: 1px dotted #000000;
border-top: 1px solid #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
-moz-border-radius:10px;
}
Dans le message
- Code:
-
<span class="title">Ton Titre</span> Ça fonctionne ! Merci beaucoup ! | | |
|
| | |
Invité Invité
| - Haricoow a écrit:
- :S Ça ne marche pas Chez Moi :
- Code:
-
Logo sur l'Index
- Code:
-
.titre {
font-family: impact, serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
font-size: 100%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
text-transform: uppercase; /* Soyons fou, écrivons le titre en majuscules ! ^^ */
background-image: URL("http://i81.servimg.com/u/f81/11/01/00/53/fond_b10.jpg"); /* Et pourquoi ne pas mettre une petite image ? ça décore, ça fait sympa... xD */
color: #CA0000; /* Couleur de la police ^^ */
text-align: center; /* C'est la classe si le titre est centré, mais on peut l'aligner à droite (right) ou à gauche (left). */
border-left: 2px solid #FF0000; /* ça, c'est pour faire les petites barres sur le côté du titre... Pour les faire plus large, il suffit de mettre 3px, 4px ou plus à la place de "1px" */
border-right: 2px solid #FF0000;
}
Où est le Problème ? :S | | |
|
| | |
Invité Invité
| As tu essayer la solution de Flicka ?
Juste au dessus de ton intervention. | | |
|
| | |
Invité Invité
| Oui, mais ça ne fonctionne pas :S | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| - Johian de M. a écrit:
- Oui y'a un truc en trop dans son code HTML, mais thoriquement ça marche aussi... Mais ce n'est ni très rapide ni très... Rapide ! xD
Pour faire ce rendu de titre en CSS :
- Code:
-
.carotte {
color: #6a5868;
border-left: 4px solid #6a5868;
background-color: #252327;
font-variant: small-caps;
padding-left: 2px;
}
A mettre dans tes titres :
- Code:
-
<div class="carotte">» Ton titre</div>
Mais si tu n'as pas envie de faire cela manuellement, je te revoie à ce sujet, pour apprendre comment passer par les templates (et ainsi changer tous les titres d'un coup.). C'est expliqué dans le premier message d'Orange. Merci Johian moi ça marche super bien =D | | |
|
| | |
Saya
{ Membre }
Messages : 126
| Désolée du retard de réponse ^^' je vais tout relire avant de passer mon code car je crois savoir ou je me suis trompée en fait =) | | |
|
| | |
Imari
{ Membre hyper-actif }
Messages : 1538
| Moi j'ai juste une question ^^
Comment on fait pour rétrécir la largeur du cadre ? =3 | | |
|
| | |
Invité Invité
| Bonsoir,
Tout d'abord un grand merci à Johian de M. pour ce magnifique tutoriel qui m'a permis de mieux comprendre le CSS et qui me semble tout d'un coup plus simple. J'ai essayé ton code mais j'aurai une petite question, j'aimerai savoir quel code il faudrait ajouter afin qu'il y ai une surbrillance d'une couleur différente lorsque l'ont survole le titre du sujet avant de cliquer dessus ?
Ah et ce qui est génial avec ce tutoriel c'est qu'on peut l'appliquer pas seulement qu'aux titres lorsqu'on l'a compris ^^.
Merci d'avance,
Sky' | | |
|
| | |
Johian
{ Membre actif }
Messages : 778
| Coucou, Alors c'est simple, lorsque tu veux des effets en plus lorsque l'on passe le curseur dessus, il faut faire comme ceci : - Code:
-
.titre:hover {
Les propriétés
} Donc pour modifier la couleur au survol, tu peux faire comme ça: - Code:
-
.titre:hover {
color: #COULEUR; /* pour la couleur du texte */
background-color: #COULEUR; /* pour la couleur du fond */
} | | |
|
| | |
Invité Invité
| Merci Johian de M. je testerai demain par contre j'ai une question du fait que c'est une autre class si j'ai bien compris, je devrais appeler deux classes différentes ? Je m'explique avec un "schéma" je devrais répéter ceci deux fois ? - Code:
-
<div class="titre">Votre Titre</div> Enfin non, c'est une question bête il me semle puisque la class a le même nom dans les deux code. Je teste ça demain et si j'ai une question je n'hésiterai pas si tu me permet ^^. Merci encore pour tes éclaircissements | | |
|
| | |
Johian
{ Membre actif }
Messages : 778
| On est là pour répondre aux questions ^^
Pour ton titre, il te suffit de le mettre une seule fois, puisque le code que j'ai passé lui dit "je veux que mon titre soit comme cela, et qu'il soit comme ceci quand mon curseur passe dessus", donc au final y'a qu'une seule fois le titre et qu'une seule fois la class '_' | | |
|
| | |
Imari
{ Membre hyper-actif }
Messages : 1538
| Et comment on raccourcit les titres ? *mode boulet* | | |
|
| | |
Invité Invité
| - Johian de M. a écrit:
- On est là pour répondre aux questions ^^
Pour ton titre, il te suffit de le mettre une seule fois, puisque le code que j'ai passé lui dit "je veux que mon titre soit comme cela, et qu'il soit comme ceci quand mon curseur passe dessus", donc au final y'a qu'une seule fois le titre et qu'une seule fois la class '_' Oh Merci Johian ! Tu sais qu'avec tes explications j'ai réussis à comprendre d'autres petites choses sur le CSS ! Génial, merci énormément j'espère progresser rapidement =) On peut nommer chaque class comme on le souhaite donc moi j'en avais pas besoin pour mes titres mais mes catégories et sous forums et je trouve le système de class très bien choisit et expliquer ici. bonne journée, SKy' | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Faire de beaux titres (messages) | |
|
