Ce blog est libéré des NOFOLLOW !

dKret : personnaliser un template

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]<div id= »container » class= »fondnoir »>[/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]<div id= »content » class= »widecolumn-fondnoir »>[/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]<div id= »previewnoir »><?php comments_template(); ?></div>[/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] /*
Template Name: No Sidebar Page noir
Info: Use it for Pages that need the full width but don’t need a sidebar!
Theme: dkret3
Author: J. Kretzschmar
Author URI: http://diekretzschmars.de/
*/
?>

« .__(‘Pages: ‘, ‘dkret’), « 

\n », ‘number’); ?>

Tagged: ‘, ‘dkret’), « , « , « \n\t\t\t\t\t|\n ») ?>
‘, ») ?>

[/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…

Bookmark and Share
  1. 31/07/2008 à 22:47 | #1

    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

  2. 01/08/2008 à 01:35 | #2

    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…

  3. 07/08/2008 à 19:30 | #3

    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 !

  4. 07/08/2008 à 20:46 | #4

    De rien c’était avec plaisir… ;)

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

    Voilou @ peluche…

  5. 07/12/2008 à 18:59 | #5

    Salut yin-yin,

    Je me remets à l’amélioration de mon blog et je cherche, pour les pages à fond noir (galeries photos), à changer les couleurs de la zone commentaires (sinon, on ne voit rien.
    Je reviens donc sur cette page de ton blog. Apparemment, tu as le même problème ? On ne voit pas bien la zone commentaires sur cette page.
    Peux-tu m’aider ?
    Merci,

    Fred

  6. 08/12/2008 à 22:41 | #6

    En fait, je voudrais savoir comment changer la couleur des textes suivants de la zone de commentaires de la page :
    « Laisser un commentaire »
    « Votre adresse mail ne sera jamais rendue publique ni utilisée. Les champs obligatoires sont indiqués par un astérisque *. »
    « Nom * »
    etc…
    Car j’utilise Dkret3 et avec une page à fond noir, ces textes s’inscrivent en vert foncé et sont illisibles.

    Merci d’avance

  7. 10/12/2008 à 11:57 | #7

    Hello! Je regarde dans la journée ;)
    Je suis en arrêt maladie j’aurai du temps :)
    @ p’luche…

  8. 16/12/2008 à 23:31 | #8

    Hello Fab,

    Rien de grave, j’espère ?

    Bon courage,

    Fred

  9. 12/01/2009 à 10:39 | #9

    Bonjour!

    Au passage merci bien à tous les 2 (Yin Yin et Lise), vos 2 sites m’ont bien aidé pour mon blog…
    J’utilise donc dkret3 (et même plus spécifiquement je me suis largement inspiré du « sous-thème » de Lise) et j’aimerais mettre en place la modif suivante : pour une page en particulier (‘Qui?’), je voudrais que l’image de l’entête soit différente de celles des autres pages.

    J’ai trouvé la fonction ‘findrandompicture’ dans functions.php que j’ai dupliquée et modifiée en ‘finwhopicture’ de manière à aller chercher les images dans un autre répertoire que ‘headers’.
    J’ai vu que cette fonction était appelée dans la fonction dkret_inline_css que j’ai du coup aussi dupliquée et modifiée pour qu’elle appelle ma nouvelle fonction ‘finwhopicture’.
    Mais ensuite je suis un peu perdu, je m’attendais à voir cette fonction (dkret_inline_css) appelée depuis page.php et je me disais qu’il m’aurait suffi de créer un template ‘qui.php’ image de page.php en ne changeant que l’appel de la fonction (j’aurais également associé ce template à la page pour laquelle je veux un entête particulier) mais je ne trouve pas à quel endroit on fait appel à dkret_inline_css. Peut-être que je me plante et que ce n’est pas du tout comme ça qu’il faut faire?

    En tout cas si tu peux m’aider ce serait bien cool et ça me retirerait une épingle du pied!

    J’espère que j’ai été assez clair…

    Bonne journée

  10. 17/12/2008 à 18:28 | #10

    Un p’tit coup de fatigue après 180km de vélo + Un trail de 69km de nuit (que je n’ai pas pu finir d’ailleur…).
    Je m’occupe de ta requête ce soir ou 2m1.
    @ p’luche…

  1. Pas encore de trackbacks
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:
Laisser ces deux champs tels quels :
SEO Powered by Platinum SEO from Techblissonline