Articles|Commentaires

dKret : personnaliser un template

Vu 498 fois Voici un petit tuto suite à une demande particulière de FredT78 sur le blog de Lise qui souhaitait personnaliser le template No sidebar page pour que les pages contenant des galeries NextGen Gallery apparaissent sur un fond noir. J'ai tâtonné un petit peu au départ car le rendu n'était pas "propre", puis j'ai trouvé une solution qui pourra être appliquée @ tous les templates. Lors de l'édition de page avec le thème dKret, vous avez le choix entre plusieurs modèles. Vous pouvez choisir celui que vous voulez en cliquant sur un des templates de la liste déroulante lors de la rédaction de votre page. Je vais expliquer le principe à partir du modèle No sidebar page, sans barre latérale en Français ;) .

Créer le template

Créez une copie du template que vous souhaitez modifier et que vous renommerez à votre convenance. Renommez la copie du fichier dkret-template-nosidebar.php en dkret-template-nosidebar-noir.php par exemple. Editez le fichier dkret-template-nosidebar-noir.php pour y modifier le nom du template. Le nom choisi sera celui qui s'affichera dans la liste déroulante de modèle de page. [css]/* Template Name: No Sidebar Page noir */[/css]

Ajouter la classe fondnoir à la balise container

Ajoutez la classe fondnoir à la balise container dans votre template. C'est l'ajout de cette classe qui permet de modifier le fond de notre template uniquement. Je choisis la balise containercar c'est celle qui contient tous les éléments entre le header et le footer. [php]
[/php] Editez ensuite le fichier de style de votre scheme (Fluidelity.css si vous ne l'avez pas renommé). Ajoutez la classe fondnoir à la balise container. Spécifiez ensuite la couleur noir en fond. [css]/********* FONDNOIR *********/ #container.fondnoir { background:#000; // fond noir }[/css]

Ajouter la classe widecolumn-fondnoir à la balise content

Ajoutez maintenant la classe widecolumn-fondnoir à la balise content de votre template. [php]
[/php] Spécifiez ensuite la couleur blanche pour la police principale, toujours dans le fichier de style de votre scheme (Fluidelity.css). [css]#content.widecolumn-fondnoir { margin: 25px 0 0; color: #FFF; // couleur de la police }[/css]

Couleur de police de la prévisualisation des commentaires

Il reste pour finir à adapter la couleur de police de la prévisualisation des commentaires. Ayant adopté une police blanche qui ne ressort pas dans le champ de prévisualisation, il faut en choisir une plus foncée. Pour cela vous devez dans un premier temps ajouter une balise div et un id previewnoir dans votre template. Je vous montre ou j'ai choisi de la placer. [php]

4 commentaires

Ecrire un commentaire»
  1. Yin-Yin
    Publié le Jeudi 7 août 2008 à 20:46:52 | Permalien
    1

    De rien c’était avec plaisir… ;)

    Tu es toujours le bienvenu ici et sur Le blog de Lise également.

    Voilou @ peluche…

  2. FredT78
    Publié le Jeudi 7 août 2008 à 19:30:17 | Permalien
    2

    Salut Yin-Yin,

    Ca y est, ça marche gràce à l’exemple que tu m’as envoyé !

    On peut voir ce que ça donne ici :
    http://airfred.ovh.org/index.php/photos/fete-foraine/

    Merci et encore bravo !

  3. Υιπ-Υιπ
    Publié le Vendredi 1 août 2008 à 1:35:31 | Permalien
    3

    Hello FredT78!

    //attention yin tu as oublié le = et //Ici tu avais mis une parenthèse

    Merci j’ai réparé les erreurs :) .

    J’ai bien écrit, à la fin de mon dkret-template-nosidebar_noir.php

    Attention il n’y a que des classes à ajouter! Relis bien le tuto, tu n’as rien à ajouter.
    Je rajoute le contenu complet du template modifié à la fin du tuto pour que tu puisse voir les modifications.
    Si tu n’y arrives toujours pas tu peux m’envoyer par le formulaire de contact accessible du menu une archive avec ton template modifié et ta feuille de style Fluidelity.css afin que je vois ce qui cloche…
    Voilou @ peluche…

  4. FredT78
    Publié le Jeudi 31 juillet 2008 à 22:47:33 | Permalien
    4

    Salut Yin-yin,

    j’ai dû cafouiller qq part, car cela ne marche pas chez moi. Vois-tu un truc qui ne va pas ci-dessous ?

    J’ai bien écrit, à la fin de mon dkret-template-nosidebar_noir.php :
    //attention yin tu as oublié le =

    et à la fin de mon Fluidelity.css :
    /********* FONDNOIR *********/
    #container.fondnoir {
    background: #000; // fond noir
    }

    #content.widecolumn-fondnoir {
    margin: 25px 0 0;
    color: #FFF; // couleur de la police
    }

    #previewnoir {
    color: #474747;
    } //Ici tu avais mis une parenthèse

Ecrire un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée. Les champs obligatoires sont indiqués par un astérisque *.

*
*
*
:@ :-[ (B) (^) (P) (@) (O) (D) :-S ;-( (C) (&) :-$ (E) (~) (K) (I) (L) (8) :-O (T) (G) (F) :-( (H) :-) (*) :-D (N) (Y) :-P (U) (W) ;-)

Powered by WP Hashcash

[/php] Vous pouvez alors spécifier la couleur de cette police dans votre feuille de style. Elle n'affectera que le formulaire des commentaires. [css]#previewnoir { color:#474747; }[/css]

Aperçu

Voici l'apparence que donnent ces quelques modifications sur une de mes pages. Pour avoir un aperçu sur mon ancien blog suivez le lien: exemple

Contenu du template modifié

[php]

Vu 0 fois

  • Statistiques & infos

    • Votre O.S. :
    • Votre Navigateur :
    • Votre IP : 38.103.63.60

    • Visites aujourd'hui : 22
    • Total des visites : 1627
    • Pages affichées aujourd'hui : 31
    • Total des pages affichées : 7745
[/php]

Autres templates

Cette méthode est parfaitement applicable aux autres templates de dKret. Il suffit juste de comprendre la structure de wordpress et de connaître un tout petit peut les langages html et css. Une fois que vous avez bien ciblé ce que vous désirez et avec un peu d'astuce vous verrez que dkret est facilement personnalisable :) .

Voilou @ peluche...