corpoweeeb

Thème corporate, deux colonnes, slide, navigations multiples.

Author/Contributors?

• Author: brol
• Contributors:

Development

Bugs and features requests

• Open tickets : 0
• Create a new ticket

Repository

•  https://svn.dotclear.net/lab/themes/corpoweeeb
• browse sources

Recent Changes

[3380] by brol on 03/12/15 21:21:44

on supprime

[3379] by brol on 03/12/15 21:20:22

on supprime

[3036] by Moe on 05/15/11 00:12:24

CorpoWeeeb? 1.2.1: updated contribute.html

Documentation

Préambule

Les plugins suivants sont requis :  menu, List Images from enries et templateWidget.
A noter que les gravatars qui s'affichent dans les commentaires ne nécessitent pas l'installation d'un plugin (code inséré directement dans _public.php).

De plus, il est impératif de renseigner la description des catégories sous peine d'afficher un rectangle bleu si la catégorie ne possède aucune sous-catégorie.
Non seulement c'est une bonne pratique et fera du bien à votre référencement, mais en plus ça m'arrange ;-)

Ce thème n'étant pas compatible avec Internet Explorer 6, les utilisateurs de ce truc vieillissant et dépassé verront un horrible bandeau au début du blog les invitant à mettre à jour leur navigateur ou à en installer un autre.

Le thème

Titre du blog, un simple lien ou une image
Le fichier _top.html est prévu pour afficher un simple lien vers votre blog :

<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>

ou une image liée :

<h1><a href="{{tpl:BlogURL}}"><img src="{{tpl:BlogThemeURL}}/img/logo.png" alt="{{tpl:BlogName encode_html="1"}}" /></a></h1>

Choisir l'un ou l'autre en commentant/décommentant le code (le code pour l'image est, par défaut, commenté). Les codes de la css seront évidemment à adapter en fonction de la hauteur de votre image (attribut height de #title dans style.css). Concernant la description du blog, si vous affichez une image en titre, il sera nécessaire d'adapter le code css afin de repositionner l'affichage du texte de la description du blog.

Deux pages home
Afin de ne pas répéter le slide présent sur la page d'accueil lors de la navigation dans les éventuelles pages suivantes, j'ai pompé le code dans _public.php du thème International de David Yim.
Ainsi, la page d'accueil du blog est homepage.html, et la page gérant les pages suivantes est home.html.

• homepage.html contient le slide et la liste des billets en affichage conventionnel (voir plus bas) avec une restriction à une catégorie particulière <tpl:Entries category="Votre-categorie"> et aux 3 derniers billets <tpl:LoopPosition start="1" length="3"> permettant de passer outre le nombre de billets par page défini dans les paramètres du blog ,
• home.html contient la liste des billets en affichage single (voir plus bas).

Je laisse à dessein ces deux types d'affichage afin que vous puissiez avoir sous la main les différents codes d'affichage.

Le thème propose plusieurs types de navigation

• un menu reposant sur le plugin menu (menuH.css est calibré pour afficher le niveau 2 des sous-catégories sous forme horizontale ; menuV.css l'est pour plusieurs niveaux de sous-catégories sous forme verticale)
• un menu fixe situé en bas à droite de la page (inclus dans _footer.html)
• un dock au-dessus du footer listant sous forme d'images les 9 derniers billets (bug sous ie8, les titres des billets ne s'affichent pas au-dessus des images lors de leur survol)
• un menu dans le footer ne listant que les catégories de premier niveau et affichant au survol les 80 premiers caractères de leur description
• deux widgets dans la sidebar nécessitant le plugin templateWidget :
  

• catfav affiche les 4 derniers billets d'une catégorie préférée (première image du billet, titre du billet limité aux 30 premiers caractères, le nombre de commentaires si permis et le fil atom de la catégorie). Il faut bien entendu renseigner le nom urlisé de la catégorie et l'url du flux atom dans le fichier catfav.widget.html pour que ça fonctionne.
  
• selection affiche les 5 derniers billets sélectionnés (première image du billet, titre du billet limité aux 30 premiers caractères et le nombre de commentaires si permis). Fichier selection.widget.html

Un slide pouvant afficher des images et du texte
Le slide se décompose d'une partie image (4 par défaut mais vous pouvez en mettre plus ou moins en éditant le fichier _slide-1.html) en page d'accueil du blog (homepage.html) et d'une partie texte (masquée par défaut, pas trop le temps de me pencher sur cet aspect pour le moment).
Il se décline en deux affichages :

• images de 650px de large X 300px de haut fera appel au fichier slide650.css et se positionnera sous la barre de menu, la liste des billets sera en-dessous et la sidebar à leur droite
  
• images de 960px X 300px fera appel au fichier slide960.css et se positionnera sous la barre de menu, la liste des billets et la sidebar seront en-dessous. Pour obtenir cet affichage il sera nécessaire d'éditer les fichiers style.css (changer l'appel au slide650.css en slide960.css) et homepage.html afin de déplacer avant la balise <div id="main"> le code suivant :

  <div class="slide clearfix">
    {{tpl:include src="_slide-1.html"}}
  </div> <!-- End slide 1 -->

Vous ne pouvez pas panacher plusieurs types (650 et 960) de slides dans un même blog.
Vous ne pouvez pas mettre plus d'un slide par fichier dans le même contexte.
Par contre, vous pouvez effectuer une sélection sur les catégories afin d'afficher un slide 650 sur la catégorie dont l'url est Machin et un autre slide 650 dont l'url est Truc. Il vous faudra bien entendu dupliquer et renommer le fichier _slide-1.html.
Exemple avec le fichier category.html :

  <tpl:CategoryIf url="Machin">
  <div class="slide clearfix">
  {{tpl:include src="_slide-1.html"}}
  </div><!-- End slide machin -->
  </tpl:CategoryIf>

  <tpl:CategoryIf url="Truc">
  <div class="slide clearfix">
  {{tpl:include src="_slide-2.html"}}
  </div><!-- End slide truc-->
  </tpl:CategoryIf>

• la navigation dans le contexte billet seul se fait dans la catégorie et non sur la totalité du blog.

Trois types d'affichage des listes de billets

• affichage conventionnel : les billets se positionnent les uns au-dessous des autres,
• affichage single : les billets sont par couple de deux,
• affichage small : sous forme de liste très simplifiée (par exemple dans le fichier archive_month.html).

Cas particulier du widget texte
La sidebar a un fonctionnement normal excepté pour les widgets texte.
Ceux-ci n'ont pas, par défaut, de titre (<h2>) ni de contour...
Pour obtenir un widget texte avec titre et/ou contour il est nécessaire de :

• laisser vide le champ du titre du widget,
  
• englober votre code dans une <div class="wtext">...</div> dans le champ texte du widget, par exemple :

<div class="wtext">
<h2>Le titre de votre widget</h2>
<p>Votre texte</p>
<img src="lien/vers/votre/image" alt="" />
</div>

Footer
Sont intégrés divers tpl dans le footer (_footer.html) :

• {{tpl:BlogEditor}} : champ Nom de l'éditeur du blog, vous pouvez l'englober par du html (exemple : <a href=" http://votreurl.ext">nom de votre blog</a>),
  
• {{tpl:BlogCopyrightNotice}} : champ Note de copyright, idem,
  
• {{tpl:lang Designed by}} <a href=" http://www.weeeb.fr">Weeeb</a> : mes références d'auteur du thème, merci de le laisser,
  
• <a href="/pages/Mentions-legales">{{tpl:lang Legal mentions}}</a> : lien vers une page de Mentions légales que vous aurez à créer, ou alors vous supprimer le lien...

Astuces

• Positionnement du moteur de recherche dans la barre de menu

Dans post.html, déplacer le <div id="recherche">...</div> après le <tpl:SysIf has_tag="MenuFreshy">{{tpl:MenuFreshy level="0"}}</tpl:SysIf>.
Dans style.css, modifier les styles de #recherche et #search comme indiqué dans le fichier.

• Réduire la navigation dans le contexte billet seul à une catégorie particulière

Installer le plugin myPostCategoryIf.
Dans post.html, remplacer le code <div id="navlinks">...</div> par celui-ci en le renseignant avec le nom urlisé de votre catégorie :

  <tpl:MyPostCategoryIf url="Votre-categorie">
    <div id="navlinks">
      <p><tpl:EntryPrevious restrict_to_category="1"><a href="{{tpl:EntryURL}}"
      title="{{tpl:EntryTitle encode_html="1"}}" class="prev">&#171; {{tpl:EntryTitle encode_html="1"
      cut_string="70"}}</a></tpl:EntryPrevious>
      <tpl:EntryNext restrict_to_category="1"> <span>-</span> <a href="{{tpl:EntryURL}}"
      title="{{tpl:EntryTitle encode_html="1"}}" class="next">{{tpl:EntryTitle encode_html="1"
      cut_string="70"}} &#187;</a></tpl:EntryNext>
      </p>
    </div>
  </tpl:MyPostCategoryIf>

• Afficher les billets de toutes les catégories selon l'affichage single et une catégorie particulière selon l'affichage conventionnel

Ajoutez après la balise <tpl:Entries>, la condition excluant la catégorie à afficher selon le mode conventionnel. Vous devez obtenir ceci :

<!-- # -- liste des billets single -->
<tpl:Entries>
  <tpl:CategoryIf url="!Url-de-ma-categorie-particuliere">
    <div class="post single">

Le ! devant l'URL permet d'inverser le sens du test.

Puis on ferme le bloc par ceci :

<tpl:EntryIf odd="0"> <div style="clear:left;"> </div> </tpl:EntryIf>
<!-- # -- End liste des billets single -->
</tpl:CategoryIf>

A la suite, on ajoute le code pour l'affichage des billets de la catégorie particulière selon le mode d'affichage conventionnel, en prenant soin de renseigner son url. Vous devez obtenir ceci :

      <!-- # -- liste des billets conventionnel -->
      <tpl:CategoryIf url="Url-de-ma-categorie-particuliere">
        <div class="post">
          <div class="post-meta clearfix">
          <h2 class="post-title left"><a href="{{tpl:EntryURL}}"
          title="{{tpl:EntryTitle encode_html="1"}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>
          <p class="post-info right">
          <span class="infopost"><span>{{tpl:lang By}} {{tpl:EntryAuthorLink}}</span>
          {{tpl:EntryDate}}</span>
          </p>
          </div><!-- End post-meta -->

          <div class="post-box">
            <div class="post-content">
            <!-- # --BEHAVIOR-- publicEntryBeforeContent -->
            {{tpl:SysBehavior behavior="publicEntryBeforeContent"}}
            <div class="post-intro">

            <!-- # Entry with an excerpt -->
            <tpl:EntryIf extended="1">
            <div class="entryimages">
            {{tpl:EntryImages size="o" html_tag="div" link="none" legend="none" length="1"}}
            </div>
            <p>{{tpl:EntryExcerpt full="1" encode_html="1" remove_html="1" cut_string="350"}} [...]</p>
            </tpl:EntryIf>

            <!-- # Entry without excerpt -->
            <tpl:EntryIf extended="0">
            <div class="entryimages">
            {{tpl:EntryImages size="o" html_tag="div" link="none" legend="none" length="1"}}
            </div>
            <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="350"}} [...]</p>
            </tpl:EntryIf>
            
            </div><!-- End post-intro -->
            </div><!-- End post-content -->

            <!-- # --BEHAVIOR-- publicEntryAfterContent -->
            {{tpl:SysBehavior behavior="publicEntryAfterContent"}}

            <div class="post-footer clearfix">
              <div class="continue-reading">
              <a href="{{tpl:EntryURL}}"
              title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}">{{tpl:lang Continue reading}}</a>
              </div>
            </div><!-- End post-footer -->
          </div><!-- End post-box -->
        </div><!-- End post -->
      </tpl:CategoryIf>
      <!-- # -- End liste des billets conventionnel -->

Youpi.