logo
jeux gratuit

142 personnes sur le forum


dossier Forum >dossier Matériel, drivers, réseaux, virus >dossierAide pour l'interface d'un blog.

repondre

page : 1

pseudo

sujet : Aide pour l'interface d'un blog.

scalya
avatar de scalya

icone posté le 26-11-2005 02:16:39  modifier Citer  supprimer  - ( envoyer un message privé à scalya site perso profil ) alert message

Voilà, je suis allé sur Zeblog, pour en créer un, mais je ne sais pas du tout comment faire pour changer moi même l'interface. J'aimerais faire simple pour commencer, juste changer les couleurs.
Quelqu'un peut m'apprendre?

Voici celui de départ :
http://img390.imageshack.us/img390/8379/sanstitre1db.jpg


Voici la page avec les codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>
<%TitreFenetre%>
</title> <style type="text/css">
/* ~~~~~~~~~~~ STYLES GENERAUX (grosses modifications déconseillées) ~~~~~~~~~~~ */
a:link, a:visited {
text-decoration: none;
color: #0066CC;
}
a:hover {
color: #FF6234;
}


body {
background-image:url("http://www.zeblog.com/blog/images/templates/bg.jpg");
font-size:11px;
font-family:arial;
margin: 0;
padding: 0;
}

#centre {
margin-right:10px;
margin-left: 155px;
width:auto;
position:relative;
text-align:left;
margin-top:5px;
}

.fenetre {
margin-top:5px;
border:1px solid #C4C4C4;
background:#FFFFFF;
-moz-border-radius: 6px;
}

#conteneur {
width:780px;
margin:0 auto;
}


#middle {
border:1px solid #C4C4C4;
background:#FFFFFF;
-moz-border-radius: 6px;
margin:0 auto;
}

.pied {
clear:both;
text-align:center;
margin-bottom:5px;
}

.footer {
text-align:center;
clear:both;
padding:7px;
margin-bottom:5px;
}

img.avatar {
float: left;
padding-right: 6px;
}

p.avatar {
margin: 0 0 10px 0;a
font-size:11px;
}


/* ~~~~~~~~~~~ BILLETS ~~~~~~~~~~~ */

h2 {
letter-spacing:1px;
font-size:12px;
border-bottom:1px solid #99CC00;
color:#FF9900;
text-align:left;
margin-left:2px;
margin-top:8px;
margin-bottom:5px;
}

div.billet { /* Contenu billet */
text-align:justify;
margin-right:8px;
}

div.billet-header { /* Header billet (auteur, date, catégorie) */
margin-top:0px;
margin-bottom:3px;
font-size:10px;
color:#808080;
}

div.billet-pied { /* Pied billet (commentaires, trackbacks) */
margin-top:6px;
margin-bottom:10px;
margin-right:8px;
color:#808080;
text-align:right;
}

/* ~~~~~~~~~~~ MENU ~~~~~~~~~~~ */

#gauche {
width:140px;
float:left;
padding:0px;
margin-top:-8px;
text-align:left;
}

.menugauche {
list-style: none;
padding: 0;
margin-top: 0px;
margin-left: 10px;
margin-bottom:11px;
}

.menugauche li {
margin: 0;
padding: 0;
padding-bottom:3px;
font-family:verdana;
font-size:9px;
}


p {margin: 0 0 10px 0;}

/* ~~~~~~~~~~~ HEADER ~~~~~~~~~~~ */

#url {
color:#FFCDA0;
color: #1275D8;
letter-spacing:1px;
font-size:13px;
}
h1 {
letter-spacing:3px;
font-family: Arial;
font-size: 15px;
color:#FF9900;
font-variant: small-caps;
/* border-bottom:1px solid #99CC00; */
margin-top:10px;
margin-bottom:10px
}

#fenetre {
margin-top:5px;
margin-bottom:5px;
border:1px solid #C4C4C4;
-moz-border-radius: 6px;
padding-left:5px;
background:#FFFFFF;
}

/* PAGES */

#archives {
text-align:justify;
}
#trackbacks {
margin-top:5px;
margin-bottom:10px;
text-align:left;
}
#commentaires {
margin-top:5px;
margin-bottom:30px;
text-align:left;
}

div.commentaire-header { /* Header billet (auteur, date, catégorie) */
margin-bottom:5px;
font-size:11px;
color:#808080;
}

div.commentaire { /* Contenu billet */
text-align:justify;
margin-bottom:15px;
background : #FEFEFE;
padding:9px;
padding-top:15px;
padding-bottom:15px;
border:1px solid #F1F1F1;
color:#555555
}

</style>
<link rel="alternate" type="application/rss+xml" title="RSS Billets" href="<%IndexURL%>rss.php" />
<link rel="alternate" type="application/xml" title="RSS Commentaires" href="<%IndexURL%>rsscom.php" />
</head>
<body>

<div id="conteneur">
<div id="fenetre">
<a href="<%IndexURL%>"><h1><span style="color:#99CC00">»</span> <%Titre%> <span id="url">(<%IndexURL%>)</span></h1></a>

<div id="gauche">
<h2><%Pseudo%></h2>
<div>
<p class="avatar">
<%Avatar%>
<%Description%>
</p>
<div style="clear:both; height:1px"></div>
</div>


<h2>Blog</h2>
<ul class="menugauche">
<li><a href="<%IndexURL%>">Accueil</a></li>
<li><a href="<%ArchiveURL%>">Archives</a></li>
<Email>
<li><a href="mailto: <%Email%>">Contact</a></li>
</IfMail>
</ul>

<Categories>
<h2>Catégories</h2>
<ul class="menugauche">
<CategoriesList>
<li><%NomCategorie%></li>
</CategoriesList>
</ul>
</Categories>


<h2>Derniers billets</h2>
<ul class="menugauche">
<DerniersBillets>
<li class="derniersbillets"><%DernierBilletTitre%></li>
</DerniersBillets>
</ul>

<Pages>
<h2>Pages</h2>
<ul class="menugauche pages">
<li><PagePrecedente>Page précédente</PagePrecedente></li>
<li><PageSuivante>Page suivante</PageSuivante></li>
<li>Page actuelle : <%PageActuelle%></li>
<li>Pages au total : <%TotalPages%></li>
</ul>
</Pages>

<Compteurs>
<h2>Compteurs</h2>
<ul class="menugauche">
<li><%CompteurConnectes%></li>
<li><%CompteurVisiteursJour%></li>
<li><%CompteurVisiteursSemaine%></li>
<li><%CompteurVisites%></li>
</ul>
</Compteurs>

<h2>Liens</h2>
<ul class="menugauche">
<Link><li><a href="<%LinkURL%>" target="_blank"><%LinkTitre%></a></li></Link>

</ul>



<h2>Fils RSS</h2>
<ul class="menugauche">
<li><a href="<%RSSURL%>">Fil RSS Billets</a> </li>
<li><a href="<%IndexURL%>rsscom.php">Fil RSS Commentaires</a> </li>
</ul>

</div>
<div id="centre">
<ArchivePage>
<h2>Archives du mois</h2>
<div id="archives">
<%ArchiveInfo%>
</div>
</ArchivePage>
<AccueilPage>
<Billet>
<a href="<%BilletURL%>"><h2><%BilletTitre%></h2></a>
<div class="billet-header">Par <%BilletAuteur%> :: <%BilletDate%> à <%BilletHeure%> <Categories>:: <%BilletCategorie%></Categories></div>

<div class="billet">
<%BilletContenu%>
</div>
<div class="billet-pied">
<Commentaires>
<a href="<%BilletURL%>"><%BilletCommentairesCompteur%></a>
</Commentaires>
<Trackbacks>
:: <a href="<%BilletTrackbackURL%>"><%BilletTrackbackCompteur%></a>
</Trackbacks>
</div>
</Billet>
</AccueilPage>


<BilletPage>
<Billet>
<a href="<%BilletURL%>"><h2><%BilletTitre%></h2></a>
<div class="billet-header">Par <%BilletAuteur%> :: <%BilletDate%> à <%BilletHeure%> <Categories>:: <%BilletCategorie%></Categories></div>
<div class="billet">
<%BilletContenu%>
</div>
<Trackbacks>
<h2 style="margin-top:10px;">Trackbacks</h2>
<div id="trackbacks">
Pour faire un trackback sur ce billet : <%BilletTrackbackURL%></div>

<Trackback>
<div class="commentaire-header">
Le <%TrackbackDate%> à <%TrackbackHeure%>, de <%TrackbackTitre%> <span style="font-size:9px;"><TrackbackDelete>Supprimer</TrackbackDelete></span>
</div>
<div class="commentaire">
<h3 style="margin-top:0px; margin-bottom:10px"><a href="<%TrackbackURL%>"><%TrackbackBlog%></a></h3>
<%TrackbackContenu%>
</div>
</Trackback>
</Trackbacks>

<Commentaires>
<h2>Commentaires</h2>
<div id="commentaires">
<Commentaires>
<Comment>
<div class="commentaire-header"> Le <%CommentDate%> à <%CommentHeure%>, par <%CommentAuteur%> <span style="font-size:9px; color:#D3D3D3;"><CommentEdit>éditer</CommentEdit><CommentDelete>supprimer</CommentDelete></span>
</div>
<div class="commentaire">
<%CommentBody%>
</div>
</Comment>
</div>

<h2>Ajouter un commentaire</h2>
<div id="commentaires">
<%CommentPost%>
</div>
</Commentaires>
</Billet>
</BilletPage>


</div>

<div class="pied">
Copyright © 2005 <a href="<%IndexURL%>"><%Titre%></a> - Blog créé avec <a target="_blank" href="http://www.zeblog.com">ZeBlog</a>
</div>
</div>
</div>
</body>
</html>


Voilà se que j'aimerais :
http://img326.imageshack.us/img326/4391/sans3xs.jpg

Et si possible une de c'est deux couleurs en arrière plan :
http://img326.imageshack.us/img326/2690/couleurs5lv.jpg
Peut on m'être une photo en arrière plan?

Je vous remerci d'avance.

Si vous voulez, vous pouvez juste m'ètre les caractères à changer d'une couleur différente.
 :coucou: 

--- message édité par scalya à 26/11/2005 02:20:16 ---

___________________
le temps passe, les souvenirs rèstes ...

Rip
icone posté le 26-11-2005 08:52:27  modifier Citer supprimer - ( envoyer un message privé à Rip site perso profil ) alert message

 :coucou: 

bien voila :

je ne sais pas mais pour moi je ne voi pas les couleurs que tu voudrait mais je peut te dire que dans le css

il y a plusieurs classe, ici sur ce que tu à mi on les voit assez bien, ce n'est pas compliquer elle sont séparer pas une ligne.

http://www.forum-p2p.com/forum/html/emoticons/icon_arrow.gif
ensuite la premiere ligne indique le nom de la setction:
ex:
[citation]
.fenetre {
margin-top:5px;
border:1px solid #C4C4C4;
background:#FFFFFF;
-moz-border-radius: 6px;
[/citation]

dans cette classe, qui se nomme la classe fenetre et qui concerne donc les fenetre,

  • tu change la couleur de fond en face de:

    • background:

    ici la couleur est blanche je crois.

  • la couleur et l'epaisseur de la bordure en face de:

    • border:
    -1px signifie la largeur de la bordur
    -#C4C4C4 signifie la couleur de la bordure.

    cela c'est bien seulement pour les fenêtre mais tu pouras retrouver ces fonction dans d'autre classe.

    http://www.forum-p2p.com/forum/html/emoticons/icon_arrow.gif [citation]Voici la page avec les codes:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
    lang="fr">
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
    <%TitreFenetre%>
    </title> <style type="text/css">
    /* ~~~~~~~~~~~ STYLES GENERAUX (grosses modifications déconseillées) ~~~~~~~~~~~ */
    a:link, a:visited {
    text-decoration: none;
    color: #0066CC;
    }
    a:hover {
    color: #FF6234;
    }
    [/citation]
    maintenant ca c'est le debut de ton code.

  • <title>
    • <%TitreFenetre%>
    </title> <style type="text/css">

    entre c'est borne tu mais le titre, sachant que <%TitreFenetre%>
    ne se vera pas.

    exemple:

    <title>
    <%TitreFenetre%>ma page web
    </title> <style type="text/css">

  • color: #0066CC;
    • }
    a:hover {
    color: #FF6234;
    }
    ici tu peut changer deux autre couleur, en fait je te conseille de tester a chaque fois et d'aller voir ta pâge pour voir ce qu'elle donne un fois que tu à changer la couleur.


    background-image: url("l'url de ton image de fond");

    tu peut rajouter sa dans certaine classe pour mettre une image de fond


    et voila un début pour t'expliquer le css

     :jap: 

    il faut aussi que tu cherches toute seule en faisant des test et tu regarde ce que sa à changé

    bonne chance redemande des precisoin si tu veu changer autre chose,

    Ps: pour les couleurs tu voit bien sue ce sont pas des noms mais plutot des truc du genre: #ff000c

    une chose a savoir tu met toujours # avant la couleur

    et pour trouver le code qui corespond à ta couleur,

    http://www.medsyn.fr/perso/g.perrin/webmaster/astuces/16.htm

    voila un exemple, mais tu peut encore plus les personaliser, en cherchant des site sur ces couleur ou tu choisi la couleur et il te donne le code

    ;)

    --- message édité par Rip à 26/11/2005 09:08:57 ---

    ___________________
    [img]http://img10.xooimage.com/files/i/m/imageforum-838fc.jpg[/img]

    scalya
    avatar de scalya

    icone posté le 26-11-2005 11:44:42  modifier Citer supprimer - ( envoyer un message privé à scalya site perso profil ) alert message

     :bravo:  merci beaucoup, je testerais tous ça cette après-midi ou ce soir.
    Si j'ai d'autre questions, je viendrais. ;)

    ___________________
    le temps passe, les souvenirs rèstes ...

    page : 1  


    dossier Forum
       dossier Matériel, drivers, réseaux, virus
           dossierAide pour l'interface d'un blog.

    repondre

    créer un nouveau sujet    

    Message relatif au message actuel

    Forum-mp3.com ©copyright 2001-2013   

    page générée en 0.484 s
    il y a 9 requetes