SOS CSS

Hello everybody, suite au post de Troni (et oui je suis encore plus flemard que Thyler) qui se plaint de ne pas reussir a faire sa CSS je me suis decide a mettre qq rapides conseils en ligne.
Un fichier css ce n'est rien d'autre qu'un fichier texte avec une extension .css
Je vous joins la mienne afin que vous puissiez la modifier selon vos desirs grace a wordpad ou texte edit ou n'importe quel logiciel d'edition de texte. Pour faire simple, au niveau de la ligne background-image: url vous changer l'adresse url de mon image de fond en y mettant l'url de la votre. Attention, le site MH ouvre les profils dans des fenêtres de 750 pixels de large pour 550 de haut et le top serait de modifier la taille de votre image et de la remettre en ligne (par exemple grace au forum comme je l'ai fait pour ouille). Ensuite a chaque fois que vous avez un code couleur du type #FFCC00 ou autre, vous pouvez le changer (en vous référençant au code de MH qd vous creer votre profil).
Une fois celle-ci a votre gout, il vous suffit de l'uploader sur MH sans oublier de changer l'extension .txt en .css
Vous remarquerez que dans ma css il n'y a pas d'image pour mon avatar, celle ci est incorporee via le processus normal Options -> Blason -> Url
Je met pour les plus curieux d'entre vous un lien qui explique bcp plus en detail comment se creer sa propre css de A a Z:
http://mountypedia.mountyhall.com/Outils/AideEnCSS?from=Outils.AideEnCss
Voila voila, et j'espere donc que cela engendrera encore plein de nouveau profils.
Ah oui un dernier truc, je me disais que tous les DdM on pourrait tous avoir une meme image d'arriere plan avec ensuite chacun son avatar, cela donnerait de la cohesion a la guilde. Reste a trouver le fond d'ecran et a savoir si vous seriez partant.
Bon we tout le monde, ma css vient en dessous:

a:hover { text-decoration: none; color: #000000; }
a:link { }
a:active { }


body {
font-style: normal;
line-height: normal;
font-weight: normal;
color: #FFCC00;
background-image: url('https://2img.net/h/i28.photobucket.com/albums/c218/mcdermott1/halloween/skull.jpg');
background-attachment: fixed;
}


td {
font-size: 15px;
}


.mh_links { color: #AA0000; text-decoration: none; font-weight: bold}


.mh_titre1 { font-size: 36px; font-style: normal; line-height: normal; font-weight: bold; background:transparent;}
.mh_titre2 { font-size: 24px; font-style: normal; line-height: normal; font-weight: bold; background:transparent;}
.mh_titre3 { font-size: 16px; font-style: normal; line-height: normal; font-weight: bold; background:transparent;}
.mh_titre4 { font-size: 14px; font-style: normal; line-height: normal; font-weight: bold; background:transparent;}


.mh_form_submit {
font-family: verdana, arial;
font-size: 11px;
background-color: transparent;
color: #A11111;
border: outset 1px #A11111;
}


.mh_monstres { color: #FF9900; text-decoration: none; font-weight: bold }
.mh_trolls_0 { color: #FF6600; text-decoration: none; font-weight: bold }
.mh_trolls_1 { color: #FF6600; text-decoration: none; font-weight: bold }


.mh_textbox {
border: 1px solid #FFCC00;
font-size: 12px;
background-color: transparent;
padding: 1px;
color: #FFCC00;
}
.mh_textareabox {
border: 1px solid #1E2A63;
font-size: 12px;
background-color: #FFFFEE;
padding: 4px;
}
.mh_selectbox {
font-size: 12px;
background-color: #FFFFEE;

padding: 1px;
}

yes thanks Tryxxx

super cool merci

ajouter a sa css: img[width="300"], .mh_titre1, .mh_titre3 { display:none;}
Il faut donc incorporer le blason direct dans l'image de fond...
C'est assez clair?

Je vous poste un message de Cain (80000) ( il a super profil !!!!). Peut-etre que ça en aidera certains à comprendre
Je trouve son message interessant car je savais pas du tout que ça se faisait comme cela à la base



Salut,

Pour savoir comment accéder aux éléments il n'y a qu'une seule manière :
regarder le code source (HTML) de la page !

- Clic droit sur la page d'événements (ou un autre troll que le tien
intervient) > Code source de la page, ou plus pratique
- installer le plugin firefox "Firebug" (si tu utilises ce navigateur),
Clic droit > Inspecter un élément > Inspecter (lien en haut à gauche) et là
tu vas chercher l'élément que tu veux "inspecter" ou naviguer dans le
code source à partir de la fenêtre.

Tu découvriras alors cette ligne par exemple (en page 2 de tes events) :



class="mh_trolls_1">tronillec ( 97363 ) a frappé (avec une
compétence)

class="mh_trolls_1">gurmulduk ( 94087 ) grâce à un coup critique.

La propriété CSS ".mh_trolls1" que tu utilises fait référence à tout
élément présent dans la page dont la classe vaut "mh_trolls1" :
tronillec
gurmulduk

Donc : pas de classe "mh_trolls2" et plus problématique, pas de
distinction entre ton troll et les autres...

Bon courage,
Caïn.

Pour faire plein de modif' : ya tout ce que vous voulez, il suffit d'essayer

http://fr.selfhtml.org/navigation/css.htm#marges

Merci pour les liens, j'ai commencé à m'en servir pour la CSS de la guilde, c'est un peu different, moins libre, mais bon...

merci pour toute ces infos.

maintenant va aussi falloir que je m'y colle réellement

Père Dodu j'en peux pluuuuuuuuuuuuuuus !
mon profil est tout pourri depuis des mois et j'arrive pas a savoir pourquoi.
Mes deux gros soucis : mon background qui apparait pas et la taille de ma police qui est énorme.
je vous copie colle ma CSS, voir si vous y voyez une faute.

Citation :

body {
border: 1px solid #000;
width: 732px;
margin: 0 auto;
background-image: url 'https://2img.net/r/ihimizer/img262/2452/karstiqueawashington.jpg');
background-attachment: fixed;
background-color: #000000;
background-repeat: no-repeat;
background-position: center;
}
body {
font-family: boopee, papyrus, verdana, arial;
font-size: 1.5em;
}
h1 {
color: #800000;
text-align: center;
font-family: baveuse, verdana, arial
}
h1:after {

content:" le Destructeur";
display:block;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: bold;
background:transparent;
color:#856565;
}

ul#pjLinks {
list-style-type: none;
padding-left: 0;
text-align: center;
}
ul#pjLinks li {
display: inline;
padding: 10px;
}
ul#pjLinks a {
text-decoration: none;
font-weight: bold;
color: #9E0E40;
}

ul#pjLinks a:hover {
color: #ED7F10;
}
#formView {
border: 2px solid #000;
position: fixed;
top: 0;
right: 0;
padding: 10px;
text-align: center;
width: 130px;
}

#IDPJ label {
display: none;
}

#IDPJ input {
width: 50px;
text-align: center;
}

form#formView .submit {
margin-top: 10px;
}

form#formView .submit input {
background-color: #FDF1B8;
}
h2 {
display: none;
}

#profil {
margin-top: 20px;
padding: 20px;
line-height: 20px;
}
dt {
float: left;
font-weight: bold;
margin-top: -1px;
}

dd {
color: #DB1702;
text-indent: 10px;
}
dt.blason {
display: none;
}

dd.blason {
display: none;
}
dd.numero span#envoiMessage {
display: block;
}

dd.numero span#envoiMessage a {
text-decoration: none;
color: #9E0E40;
}

dd.numero span#envoiMessage a:hover {
color: #ED7F10;
}
.email {
display: none;
}
dd.guilde a {
text-decoration: none;
color: #9E0E40;
font-weight: bold;
}

dd.guilde a:hover {
color: #ED7F10;
}

dt.guilde, dt.mouches, dt.meurtres, dt.deces, dt.equipement, dt.trolligion {
margin-top: 0px;
}
dt.distinctions, dt.maladie, dt.equipement, dt.possessions, dt.trolligion {
float: none;
padding-left: 2px;
}

dd.distinctions ul, dd.maladie ul, dd.trolligion ul {
list-style-type: none;
padding: 2px 0;
}

dd.equipement ul, dd.possessions ul {
padding: 2px 0;
}

dd.equipement li span.magie {
color: #9E0E40;
font-weight: bold;
}

dd.possessions a {
text-decoration: none;
color: #DB1702;
}

dd.possessions a:hover {
color: #ED7F10;
}

.numero, .race, .creation, .niveau, .guilde, .mouches, .meurtres, .deces {
padding: 2px;
}
#disclaimer {
font-size: x-small;
font-weight: normal;
text-align: center;
}

#description {
padding: 20px;
}
#styleSwitcher {
border: 2px solid #000;
position: fixed;
top: 80px;
right: 0;
padding: 10px;
text-align: center;
width: 130px;
}

#styleSwitcher a {
text-decoration: none;
color: #DB1702;
}

#styleSwitcher a:hover {
color: #ED7F10;
}

Ben déjà pour le background, t'as oublié une paranthèse après url à cette ligne :

background-image: url 'https://2img.net/r/ihimizer/img262/2452/karstiqueawashington.jpg');

Bon, j'ai vu que t'as modifier l'image de ton background, donc t'as fais l'erreur qu'on a vu en remettant l'adresse. Qu'est ce que tu as modifier d'autre ?

ça marchait tres bien, puios ça marchait plus...

je tenterais demain matin pour voir, puis je t'appellerai tout de suite apres

edit
la parenthese manquait pasque j'ai voulu allégé mon texte pour que ce soit lisible (j'ai plein d'annotation sur ma css).
Elle est sur ma css d'origine donc c'est pas ça.
Ou plutot c'était pas ça !
pasque maintenant ma css, toutes mes css (j'en ai trois différentes en fait) refonctionnent a nouveau. alors que je les avaient toutes testées et qu'elles me donnaient toujours un ecran noir....

en clair, j'ai rien compris.

Tu t'en sors Karstique ?

Pour la taille du texte, c'est ceci qu'il faut modifier : font-size: 1.5em; (dans "body") et met une valeur en "px" ! Perso moi, c'est 14 px

pour les curieux et bidoulleurs , voici la mienne :


img[src*="greenball.gif"] {
background-image:url(https://2img.net/h/i14.photobucket.com/albums/a339/acidfreak71/Psychedelic%20Avatars/Abstract.gif);
background-position:center center;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
height:20px;
padding-left:18px;
width:0;
}

li{
list-style-image: url(http://www.eada.qc.ca/enfants-adultes/famille_dysfonctionnelle/anonyme/image/point_vert.gif);
}

img[src*="orange.gif"] {
background-image:url(https://2img.net/h/i14.photobucket.com/albums/a339/acidfreak71/Psychedelic%20Avatars/Abstract.gif);
background-position:center center;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
height:20px;
padding-left:18px;
width:0;
}

img[width="300"] {
background-image:url(https://2img.net/h/i603.photobucket.com/albums/tt117/kelin_2009/DarkDemon-2-1-1-2.gif?t=1269900038);
height:360px;
opacity:0.8;
padding-left:236px;
width:0;
}

img[width="300"]:hover {
background-image:url(https://2img.net/h/i603.photobucket.com/albums/tt117/kelin_2009/NCDarkDemon-2-1-1.gif?t=1269900064);
background-position:center center;
height:360px;
opacity:1;
padding-left:236px;
width:0;
}


a:hover {
color:#FF9900;
text-decoration:none;
}


body {
background:#000000 url(https://2img.net/h/i603.photobucket.com/albums/tt117/kelin_2009/warham11-4.jpg?t=1267291862) repeat fixed center center;
color:#FFFFFF;
font-family:papyrus;
font-size:14px;
font-style:normal;
font-weight:bolder;
line-height:normal;
}


.mh_titre3 {
display:none;
}
td {
font-size:14px;
font-weight:bold;
}

.mh_tdtitre {
color:#66CC33;}

.mh_tdtitre:first-letter {
background:transparent none repeat scroll 0 0;
color:#FFFFFF;
font-family:algerian;
font-size:24px;
font-weight:normal;
}
.mh_tdborder {
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
background-color:#000000;
border:1px solid #66FF33;
opacity:0.80;
text-align:justify;
}
.mh_links {
color:#4B4B4B;
font-size:14px;
font-weight:bold;
text-decoration:none;
}


.mh_titre1 {
background:transparent url(https://2img.net/h/i603.photobucket.com/albums/tt117/kelin_2009/poseidontitre-2.jpg?t=1271454170) no-repeat scroll center center;
height:110px;
color:transparent;
font-size:0;
font-style:normal;
line-height:normal;
}
.mh_titre2 {
background:transparent none repeat scroll 0 0;
font-size:24px;
font-style:normal;
font-weight:bold;
line-height:normal;
}
.mh_titre4 {
background:transparent none repeat scroll 0 0;
font-size:14px;
font-style:normal;
font-weight:bold;
line-height:normal;
}

.mh_monstres {
color:#FF9900;
font-weight:bold;
text-decoration:none;
}
.mh_monstres:hover {
color:#4B4B4B;
text-decoration:none;
}
.mh_trolls_1 {
color:#66CC33;
font-weight:bold;
text-decoration:none;
}
.mh_trolls_1:hover {
color:#4B4B4B;
text-decoration:none;
}
img[width="37"] {
background-image:url(https://2img.net/h/i603.photobucket.com/albums/tt117/kelin_2009/45100.gif?t=1260395285);
background-position:center center;
height:37px;
padding-left:37px;
width:0;
}
.mh_textbox {
background:url(http://www.casafree.com/modules/xcgal/albums/userpics/34416/vert.jpg) center center;
background-color:#000000;
border:1px solid #000000;
color:#FF9900;
font-family:papyrus;
font-size:12px;
font-weight:bolder;
padding:1px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}

.mh_form_submit {
background-color:#000000;
background-image :url(https://2img.net/h/i14.photobucket.com/albums/a339/acidfreak71/Psychedelic%20Avatars/Abstract.gif);
border:1px outset #FFFFFF;
color:#009900;
font-family:papyrus;
font-size:11px;
font-weight:bold;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}
.mh_textareabox {
background-color:#FF6600;
border:1px solid #66CC33;
color:#66CC33;
font-family:papyrus;
font-size:12px;
padding:4px;
}
.mh_selectbox {
background-color:#000000;
border:1px outset #FFFFFF;
color:#009900;
font-family:papyrus;
font-size:12px;
padding:1px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}

aaaaaaaaaaaaaaah voilà c'est beaucoup mieux

merci les kids et les belettes