AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Modifier un thème phpbb

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
larme d'ange
Convoi d'Anges heureux


Masculin Nombre de messages : 1191
Age : 36
Date d'inscription : 14/09/2005

MessageSujet: Modifier un thème phpbb   Mer 21 Sep - 14:17

Pour créer un template, il faut d'abord connaitre les bases.
Aussi, mieux vaut commencer par modifier un thème, et découvrir le principe de fonctionnement d'un template.

Pour vous facilter le travaille, nous travaillerons sur subSilver.
Une fois que vous aurez réalisé 3 ou 4 templates sur la base de subSilver, vous pourrez alors vous attaquer à de plus grosse modif' comme déplacer les liens de navigations afin de les placer sur la droite de votre forum dans un menu, positionner le profil dans un post de façon horizontal et non vertical, etc...


Enorme merci à caro1978 pour une grande partie de ce tutos
--------------------------------------

Pour créer un nouveau thème, il est preferable de travailler en local.
Commencez par créer un clone du fichier subSilver.

-Renommez le fichier (subTest)
-Renommez subSilver.css (subTest.css)
-Renommez subSilver.cfg (subTest.cfg)

Vous êtes libre de choisir le nom que vous souhaiter, mais gardez cette constante.

Vous êtes pret pour attaquer votre thème.

--------------------------------------

La plus grande partie des modifications se fera dans overall_header.tpl


Chaque fois qu'il est indiqué l'ajout d'une image, il vous faudra bien sur l'avoir créée et ajouté dans le dossier images de votre thème (subTest/images/).


-Pour modifier l'arrière fond (partie bleue pale chez subSilver)

trouver:
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};


Remplacer par:
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-image: url(templates/NOM-DU-THEME/images/1.gif);
background-color: {T_BODY_BGCOLOR};



Pour modifier le fond de premier plan (couleur blanche chez subSilver)

trouver:
/* This is the border line & background colour round the entire page */
bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }



remplacer par:
/* This is the border line & background colour round the entire page */
bodyline { background-image: url(templates/NOM-DU-THEME/images/2.gif); border: 1px {T_TH_COLOR1} solid; }


ET

trouver:
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(templates/subSilver/images/{T_TH_CLASS3});
background-repeat: repeat-y;



remplacer par:
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(templates/NOM-DU-THEME/images/2.gif);
background-repeat: repeat-y;



Pour modifier le fond des cellules des forums, de la news, des blocs sur le portail
sans modifier le cellpic approprié
vous pouvez modifier le code suivant (ce n'est pas obligatoire, et le cellpic ne sera plus pris en compte!)

trouver:
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/subSilver/images/{T_TH_CLASS2});
}


remplacer par:
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/NOM-DU-THEME/images/1.gif);



Pour modifier le fond des cellules des rubriques sans passer par les cellpic


trouver:
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}


remplacer par:
background-image: url(templates/NOM-DU-THEME/images/3.jpg);
background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}



trouver:
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}


remplacer par:
background-color:url(templates/NOM-DU-THEME/images/3.jpg);; border: {T_TH_COLOR3}; border-style: solid;
}



Pour mettre une image dans le fond de la case pour répondre
(attention il faudra une image vraiment contrastée avec la couleur de texte pour que cela reste lisible!)


trouver
input.post, textarea.post, select {
background-color : {T_TD_COLOR2};
}



remplacer par:
input.post, textarea.post, select {
background-color :{T_TD_COLOR2};
background-image: url(templates/NOM-DU-THEME/images/4.gif);
}



--------------------------------------

Sauvegarder votre fichier overall_header,
ensuite vous allez dans le panneau admin pour ajouter votre nouveau thème.


C'est FINI! Pour overall... mais on a encore un peu de boulot
en effet il faut soit modifier le contenu du fichier css, pour les données de couleurs,
soit passer directement par le panneau admin
gestion du theme,
et modifier les couleurs pour etre en harmonie avec vos images de fond.


Dernière édition par le Dim 16 Oct - 11:10, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lda-creation.conceptbb.com
larme d'ange
Convoi d'Anges heureux


Masculin Nombre de messages : 1191
Age : 36
Date d'inscription : 14/09/2005

MessageSujet: Re: Modifier un thème phpbb   Mer 21 Sep - 19:19

Il faut maintenant modifier les icones, aussi bien ceux du menu des liens(faq; rechercher...) que les images de message (nouveau message, pas de nouveau...)



Il suffit de changer la majorité des images.
Remplacer dans votre thème les images en renommant les nouvelles images à l'identique.

Si vous changez les images avec d'autres dimensions, il faudra réajuster les dimensions.
Sinon vos images seront déformées.


Pour le menu des liens allez dans le fichier overall_header de votre thème

trouvez:

Code:
< img src="templates/NOM-DU-THEME/images/icon_mini_faq.gif" width="12" height="13"


Remplacez les valeurs 12 et 13, par les valeurs de vos nouvelles images.
Faites de même avec les autres valeurs des autres images, pour profil , groupes etc...



Pour les images de messages:


Commencez par index_body.tpl:


trouvez:
(ceci correspond aux icones de message sur l'index)


Code:
<td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>

et modifiez les valeurs 46, 25 par les dimensions de vos images



Ensuite ouvrez viewforum_body.tpl:
(ceci correspond aux icones de message dans un forum)


Code:
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20"><img src="{topicrow.TOPIC_FOLDER_IMG}" width="19" height="18" alt="{topicrow.L_TOPIC_FOLDER_ALT}" title="{topicrow.L_TOPIC_FOLDER_ALT}" /></td>

Modifiez les valeurs 19, 18 aux dimensions de vos images



Toujours dans viewforum_body.tpl
(ceci correspond à la description des icones de message en pied de page)


trouvez:

Code:
<td width="20" align="left"><img src="{FOLDER_NEW_IMG}" alt="{L_NEW_POSTS}" width="[color=red]19" height="[/color]18" /></td>
<td class="gensmall">{L_NEW_POSTS}</td>
<td>&nbsp;&nbsp;</td>
<td width="20" align="center"><img src="{FOLDER_IMG}" alt="{L_NO_NEW_POSTS}" width="19" height="18" /></td>
<td class="gensmall">{L_NO_NEW_POSTS}</td>
<td>&nbsp;&nbsp;</td>

etc...jusqu'à:

Code:
<td class="gensmall"><img src="{FOLDER_LOCKED_IMG}" alt="{L_NO_NEW_POSTS_LOCKED}" width="19" height="18" /></td>
<td class="gensmall">{L_NO_NEW_POSTS_LOCKED}</td>

Et modifiez aussi les valeurs 19, 18 aux dimensions de vos nouveaux mini icones
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lda-creation.conceptbb.com
larme d'ange
Convoi d'Anges heureux


Masculin Nombre de messages : 1191
Age : 36
Date d'inscription : 14/09/2005

MessageSujet: Re: Modifier un thème phpbb   Sam 1 Oct - 11:18

Vous aurez aussi bien entendu besoin de modifier les couleurs des différentes partie de votre thème.

Pour cela il existe plusieurs solutions comme modifier le CSS.
Mais le plus simple reste encore de faire vos modification via le panneau d"administration.

Si vous modifiez les couleurs dans le panneau d'amin, vous devrez penser à exporter vos couleurs ( administration des thèmes/ exporter), ceux au cas où vous souhaitiez supprimer ce thème par la suite, ou encore l'installer sur un autre forum.
Ceci sauvegardera vos couleurs sur le fichier "theme.cfg".


Voici qqs infos pour pouvoir modifier les codes du theme, VIA l'admin.

Couleur de Fond:
Couleur du Texte:
Couleur du Lien:

Couleur du Lien Visité: Permet de voir quels sujets a été lu, grâce à la couleur différente

Couleur du Lien Actif: Quand un lien renvoi a une autre page, nom des rubriques, des sujets, mais aussi des liens présentez sous la forme [url=http://l'adresse] cliquez ici[url] , mais aussi des pseudos

Couleur du Lien survolé: Permet de voir les liens 'cliquables'




Table Rangée Couleur 1: Couleur de la première colonne sur l'index (là où il a le nom des rubriques)
couleur également du fond, du premier message d'un sujet.
Fond du tableau 'qui est en ligne.'

Table Rangée Couleur 2: Couleur des colonnes sous Sujets, messages, Derniers sujets
couleur aussi du deuxième message dans un sujet.
Couleur de l'ascenseur sur la page.

Table Rangée Couleur 3: Couleur des colonnes sous Auteurs et Derniers messages, dans les rubriques.
Couleur aussi des fines lignes entres 2 réponses, dans un sujet



Table Rangée Class 1: vide
Table Rangée Class 2: vide
Table Rangée Class 3: vide



Table En-tête Couleur 1: Bord autour de la page entière (bord externe)
Table En-tête Couleur 2: Bord des catégoriesTable En-tête Couleur 3: Bord à l'intérieur des cases tires des rubriques (très fin)



Table En-tête Class 1: cellpic1.gif Cellule des catégories

Table En-tête Class 2: cellpic3.gif C'est l'image qui servira pour les cellules supérieures
Au dessus de l'index ; là où il y a Forum, Sujets, Messages, Derniers messages

Table En-tête Class 3: cellpic2.jpg (attention a l'extension) Cellule en DESSOUS de sujets,messages,derniers sujets
c'est la partie dégradé de subSilver



Table Cellule Couleur 1: Couleur de fond lorsque l'on cite qqun

Table Cellule Couleur 2: Pour changer les parties blanches, fond de la news défilante
fond des cases de choix et ligne de séparation entre les rubriques(forums)

Table Cellule Couleur 3: Couleur des petits cadres



Table Cellule Class 1: row1 Fond pour les titres des sujets
Table Cellule Class 2: row 2
Table Cellule Class 3: vide



Nom de la Police 1: il est préférable de ne pas modifier les noms des polices
Nom de la Police 2: pour etre sur que tous les membres
Nom de la Police 3: aient ces polices là



Taille Police 1: peut etre modifié mais pas très beau...
Taille Police 2:
Taille Police 3:


Couleur Police 1: Couleur du texte lorsque l'on cite qqun
Couleur Police 2: Couleur du texte quand on utilise la fonction code
Couleur Police 3: Couleur des textes dans les cellules supérieures (Forum,Sujets,Messages,Derniers messages)


Span Class 1: vide
Span Class 2: vide
Span Class 3: vide
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lda-creation.conceptbb.com
caro
Invité



MessageSujet: Re: Modifier un thème phpbb   Jeu 24 Nov - 21:46

Tuto express

Je viens d'ajouter un bout de tuto , si ce n'est pas utile tu peux le supprimer sans souci Wink

Voilà les fêtes de fin d'année qui arrivent, on a envie de changer sa déco pour faire plus festif ... le souci majeur que l'on rencontre soit :

* vous avez une prémod
* vous avez ajouté des mods vous même
en plus d'une version de base ou prémoddée

Pour changer votre thème subsilver pour une courte période par exemple:
*une semaine à la noel
*une semaine pour halloween
*une semaine pour paques etc

on a pas forcément le temps, le courage ou la place d'ajouter un autre thème et de l'adapter.


Vous avez trouvé un thème qui vous plait?

En qqs minutes voici comment changer votre déco.

Avant tout! sauvegarder une copie du fichier images de subSilver, et de l'overall_header et du fichier theme_info.cfgdans un coin bien chaud à l'abri de tout effacement maladroit.
Pour pouvoir revenir au thème de départ, après la période de fête.

Ensuite :


  • Remplacer le fichier images de subSilver par le fichier images du thème que vous avez trouvé et qui vous plait

  • Ouvrir le overall_header :

    Chercher :
    Code:
    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
       background-color: {T_BODY_BGCOLOR};

    Remplacer par :
    Code:
    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
          background-image: url(templates/subSilver/images/1.gif)


    Chercher:
    Code:
    /* This is the border line & background colour round the entire page */
    .bodyline   { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

    Remplacer par:
    Code:
    /* This is the border line & background colour round the entire page */
    .bodyline { background-image: url(templates/subSilver/images/ffeuille.gif); border: 1px {T_TH_COLOR1} solid; }


    Chercher:
    Code:
    </head>
    <body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    AJOUTER après:
    Code:
    <body background="templates/subSilver/images/1.gif" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

  • Placer ce nouveau overall_header sur votre ftp


    Vous n'avez que 2 images a ajouter dans le dossier images du thème.
    VOUS DEVEZ LE NOMMER COMME INDIQUE, si vous changé le nom dans le code, pensez a changer le nom de vos images.

  • Ajouter les 2 images de fonds:
    *1.gif sera l'image d'arrière plan, souvent la plus colorée
    *feuille.gif sera l'image qui remplace le blanc actuel de premier fond de subSilver


    Au cours du temps, si vous n'ajoutez pas de mods en plus entre 2 fetes, vous pourrez vous resservir de l'overall modifié!
    Ou mieux, vous pourrez simplement changer les images , pour avoir un thème qui change souvent sans trop d'effort (juste changer les images sur le ftp )


    dernier point:
  • Modifier les couleurs de textes etc

    +Pour une facilité et une rapidité , il suffit d'ouvrir le fichier theme_info.cfg du thème que vous 'copiez'.
    +Aller dans le panneau admin, gestion des thèmes
    +Editer subSilver et remplacer les valeurs de couleurs
    Elles sont présentées dans le meme ordre dans le fichier theme_info.cfg du thème choisi.

    Sauvegarder le tout.

    C'est fini
    Si la taille des folders vous pose un souci , suivez le tuto de dav bo pour mettre tout en ordre.

    La manipulation totale de modification, ne devrait pas vous prendre plus de 10 minutes en tout.


    On obtient ainsi rapidement un nouveau thème par exemple:
    le premier thème subAutomnia peut passer à celui de décembre subNeige en 10 minutes ...

    AVANT:


    APRES:

    etc...



C'est une version très écourtée de l'autre tuto que j'avais fait
Elle me semble plus rapide et moins compliquée.
C'est sur ce principe que je me base pour créer mes thèmes rapidement.

Bonne chance
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Modifier un thème phpbb   Aujourd'hui à 1:10

Revenir en haut Aller en bas
 
Modifier un thème phpbb
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Modifier le thème graphique de Firefox
» Modifier un thème
» Modifier un thème
» Impossible de modifier mon thème
» [Question] Thème phpBB original

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
lda création :: phpBB :: Tutoriaux-
Sauter vers: