Ductile Focus - Ductile FocusDémonstration du thème Ductile Focus, pour Dotclear 2.42023-06-07T18:17:47+02:00Dotclear/Dotaddict Teamurn:md5:e874a04a3e0b2ff226e8880fa1915054DotclearPersonnalisations : mini-galeries au sein du billeturn:md5:149ed6e649ab192d0005fd31f09052f02011-08-10T08:36:00+02:002011-08-10T08:36:00+02:00KozlikaDuctile Focus <h3>Mettre en place une galerie au sein d’un billet</h3>
<p>Des styles sont prévus pour afficher un ensemble d’images au sein d’un billet sous forme de mini-galerie comme sur les captures ci-dessous. Le titre du lien apparaît sous la photo s’il existe (il est inséré automatiquement si vous utilisez la syntaxe wiki).</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/minigalerie_small.png" title="minigalerie_small.png"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.minigalerie_small_s.jpg" alt="minigalerie_small.png" title="minigalerie_small.png, août 2011" /></a>
<a href="https://ductile.dotaddict.org/public/illustrations_tutos/minigalerie_thumbnail.png" title="minigalerie_thumbnail.png"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.minigalerie_thumbnail_s.jpg" alt="minigalerie_thumbnail.png" title="minigalerie_thumbnail.png, août 2011" /></a>
<a href="https://ductile.dotaddict.org/public/illustrations_tutos/minigalerie_medium.png" title="minigalerie_medium.png"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.minigalerie_medium_s.jpg" alt="minigalerie_medium.png" title="minigalerie_medium.png, août 2011" /></a></p>
<p>À voir en live <a href="https://ductile.dotaddict.org/focus/post/2010/04/19/Des-plantations">ici pour une galerie avec des formats thumbnail</a> ou bien <a href="https://ductile.dotaddict.org/focus/post/2011/03/08/Les-photos-promises">là pour des formats small</a> ou <a href="https://ductile.dotaddict.org/focus/post/2010/08/07/Un-été-au-Guilvinec">là pour des formats medium</a>.</p>
<p>Insérer toutes les miniatures (avec lien vers le grand format) en plaçant une miniature par paragraphe (en syntaxe wiki, cela veut dire qu’il faut sauter une ligne entre deux liens-images). Puis placer le tout dans une boîte (div) avec la classe commune <code>expo</code> plus une classe spécifique selon le format de miniature que vous avez choisi (<code>expo_t</code> pour les thumbnails, <code>expo_s</code> pour les small, <code>expo_m</code> pour les medium).</p>
<p>Si vous rédigez votre billet en wiki, il faut placer avant la première photo le code suivant :</p>
<pre class="brush: html">///html
<div class="expo expo_s">
///</pre>
<p>et une ligne vide et faire suivre la dernière image, après une ligne vide, par le code suivant :</p>
<pre class="brush: html">///html
</div>
///</pre>
<p><code>expo_s</code> est évidemment à adapter à la taille des miniatures utilisées.</p>
<h4>Cadeau bonusse</h4>
<p>Si vous souhaitez utiliser ces styles ailleurs que sur ductile Focus, ajoutez ces lignes dans votre feuille de style :</p>
<pre class="brush: css">/*
mini-galeries
*/
.expo {
text-align: center;
line-height: 1.2;
}
.expo p {
border: 1px solid #ccc;
background: #f2f2f0;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.expo_m p {
padding: 12px 8px 32px;
font-size: .875em;
margin: 1em;
}
.expo_s p {
padding-top: 8px;
width: 260px;
height: 280px;
margin: 6px 4px;
font-size: .875em;
}
.expo_t p {
padding-top: 6px;
width: 116px;
height: 132px;
margin: 6px 4px;
font-size: .75em;
}
.expo p img {
display: inline-block;
margin: auto;
border: none;
padding: 0;
border: 1px solid #fff;
}
.expo a {
text-decoration: none;
color: #000;
}
.expo a:after {
content : attr(title);
display: block;
position: absolute;
padding: 3px 0;
left: 0;
bottom: 0;
width: 100%;
background-color: #e3e3df;
}
.expo p a:hover, .expo p a:focus {
color: #ab164d;
}</pre>https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-mini-galeries-dans-le-billet#comment-formhttps://ductile.dotaddict.org/focus/feed/atom/comments/153Personnalisations : le logourn:md5:e94aa81418242708f64c6a1b2a45af562011-08-10T08:33:00+02:002011-08-10T08:33:00+02:00KozlikaDuctile Focus <h3>Personnaliser le header - 1. Le logo</h3>
<p>Le logo en haut à gauche de tous les thèmes Ductile<sup>[<a href="https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-le-logo#pnote-152-1" id="rev-pnote-152-1">1</a>]</sup> est appelé dans le fichier <code>ductile/tpl/_top.html</code> à la ligne suivante :</p>
<pre class="brush: html"><p id="logo" class="nosmall"><a href="{{tpl:BlogURL}}"><img src="{{tpl:BlogThemeURL}}/img/logo.png" alt="{{tpl:lang Home}}" /></a></p></pre>
<p>Ductile et ses variations permettent de choisir un logo personnel différent de celui proposé par défaut. Le plus simple (en attendant que le configurateur le permette depuis l’interface d’administration) est de remplacer le fichier logo.png se trouvant actuellement dans le répertoire <code>ductile/img/</code> (ou <code>ductileFocus/img</code>, etc.) par l’image de votre logo et de le nommer à l’identique. Si votre image n’est pas plus haute que l’actuelle, vous en aurez fini là, par ce simple remplacement.</p>
<p>Mais vous voudrez peut-être introduire un logo plus haut et en ce cas il y aura quelques modifications à placer dans la feuille de style pour une présentation élégante. Voici un exemple de logo de 150px de large sur 130px de haut et le résultat que nous souhaitons obtenir. Comme vous le voyez, le logo occupe alors toute la hauteur du <em>header</em> et le reste vient se placer à sa droite :</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/logo_150-130.png" alt="logo_150-130.png" style="display:block; margin:0 auto;" title="logo_150-130.png, août 2011" /></p>
<h4>Étape 1</h4>
<p>Nous commençons donc par placer le nouveau logo. Sans changer les CSS, ça donne ça :</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_avant_css_m.jpg" alt="logo_avant_css.png" style="display:block; margin:0 auto;" title="logo_avant_css.png, août 2011" /></p>
<p>Pas terrible hein ? On va donc intervenir sur le fichier <code>style.css</code>, section <em>4 Haut de page</em> et sur le fichier <code>mediaqueries.css</code>, section <em>Autres (plus de 480px)</em><sup>[<a href="https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-le-logo#pnote-152-2" id="rev-pnote-152-2">2</a>]</sup>.</p>
<h4>Étape 2</h4>
<p>Dans <code>style.css</code>, on supprime la règle <code>.supranav { clear: both; }</code> et c’est déjà beaucoup mieux, mais le décalage du menu est assez disgrâcieux :</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_apres-1_m.jpg" alt="logo_apres-1.png" style="display:block; margin:0 auto;" title="logo_apres-1.png, août 2011" /></p>
<p>Or le menu n’est en réalité pas vraiment décalé, c’est simplement que les items ont une marge intérieure (padding) gauche, ce qu’on voit bien au survol, quand l’item de menu se voit doté d’un fond gris ; le décalage n’est alors que de quelques pixels :</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_apres-2_m.jpg" alt="logo_apres-2.png" style="display:block; margin:0 auto;" title="logo_apres-2.png, août 2011" /></p>
<h4>Étape 3</h4>
<p>On va donc changer un peu l’organisation dans l’espace de façon que le menu « au repos » soit aligné sur le titre. Ça se passe maintenant dans le fichier <code>mediaqueries.css</code>. Tout d’abord, on repère cette règle :</p>
<pre class="brush: css">.supranav {
margin: 36px 0 0;
border-bottom: 1px solid #ccc;
padding: 0 0 0 4px;
}</pre>
<p>Et on remplace la dernière ligne par <code>padding: 0;</code>. Voilà pour les 4 pixels de décalage à gauche sur l’ensemble du bloc de menu. Les items ont eux aussi un décalage de 4 pixels à gauche, que nous corrigeons ici, en supprimant tout simplement la dernière ligne <code>padding-left: 4px;</code> :</p>
<pre class="brush: css">.supranav li {
display: inline;
padding: 8px 0;
padding-left: 4px;
}</pre>
<h4>Étape 4, premier essai</h4>
<p>Il ne reste plus qu’à s’occuper du décalage sur le lien lui-même (celui qui prend le fond gris au survol). Ça se passe dans ce bloc de règles-là, à la ligne définissant le <em>padding</em> (dans l’ordre : en haut, à droite, en bas, à gauche) :</p>
<pre class="brush: css">.supranav li a {
display: inline-block;
vertical-align: top;
padding: 8px 32px 8px 28px;
border-right: 1px solid #ccc;
min-height: 2.5em;
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
-o-border-radius: 0 0 0 4px;
-ms-border-radius: 0 0 0 4px;
-khtml-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}</pre>
<p>Premier essai, on enlève le <em>padding</em> à gauche et on le remplace par un <em>margin</em> à droite, en remplaçant la ligne <code>padding: 8px 32px 8px 28px;</code> par les deux lignes suivantes :</p>
<pre class="brush: css">padding: 8px 32px 8px 0;
margin-right: 28px;</pre>
<p>Aaaaaaah, voilà ! Quoique… Si c’est impec au repos, ça n’est vraiment pas joli au survol n’est-ce pas ?</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_apres-3_m.jpg" alt="logo_apres-3.png" style="display:block; margin:0 auto;" title="logo_apres-3.png, août 2011" /></p>
<h4>Étape 4, second essai</h4>
<p>On renonce donc à cette méthode et l’on revient sur l’étape 4 pour se retrouver à la fin de l’étape 3. Finalement, à bien y réfléchir, il n’y a que le premier item qui nous cause du souci, pour les autres leur présentation ne posait pas de problèmes. On va donc ne supprimer le <em>padding</em> de gauche <strong>que</strong> sur le premier item. Or le plugin simpleMenu dote chaque item d’une classe portant le numéro d’ordre (en l’occurrence <code>li-1</code>) et marque même le premier item d’une classe supplémentaire <code>li-first</code>. Il va donc nous être facile de ne viser que celui-là en ajoutant sous le bloc de règle sus-cité un bloc supplémentaire ne concernant que ce premier item. Pour des raisons esthétiques (ça ne serait pas joli si le fond gris collait tout à fait au bord gauche des lettres) on en laisse quand même un tout petit au lieu de le remettre à zéro, puis on redécale le tout à gauche pour l’alignement (vous pouvez adapter cette valeur à votre guise, pour peu que vous mettiez la même sur les deux lignes) :</p>
<pre class="brush: css">.supranav li.li-first a {
padding-left: 4px;
margin-left: -4px;
}</pre>
<p>Hourra, on le tient cette fois ! Voyons ça :</p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_apres-4-1_m.jpg" alt="logo_apres-4-1.png" style="display:block; margin:0 auto;" title="logo_apres-4-1.png, août 2011" /></p>
<p><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.logo_apres-4-2_m.jpg" alt="logo_apres-4-2.png" style="display:block; margin:0 auto;" title="logo_apres-4-2.png, août 2011" /></p>
<p>Et maintenant c’est nickel, vous pouvez aller faire des pâtés de sable à la plage !</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-le-logo#rev-pnote-152-1" id="pnote-152-1">1</a>] Ce logo est supprimé de l’affichage sur les tout petits écrans tels deux des mobiles.</p>
<p>[<a href="https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-le-logo#rev-pnote-152-2" id="pnote-152-2">2</a>] Comme indiqué dans la note précédente, le logo n’apparaît que sur les résolutions supérieures à 480px, c’est donc là que j’ai placé les règles le concernant.</p></div>
https://ductile.dotaddict.org/focus/post/2011/08/10/Personnalisations-%3A-le-logo#comment-formhttps://ductile.dotaddict.org/focus/feed/atom/comments/152Plugins à marierurn:md5:6634fd453844550687e0c51e5afad4b22011-08-10T07:37:00+02:002011-08-10T07:39:44+02:00KozlikaDuctile Focus <p>Les thèmes Ductile ne nécessitent aucun plugin supplémentaire pour fonctionner. Certains cependant nous semblent apporter des améliorations fonctionnelles ou esthétiques précieuses. Ils sont tous actifs sur le blog de démo de Ductile Focus (sur Ductile Blog aussi, à l’exception de Breadcrumb) :</p>
<ul>
<li><a href="http://plugins.dotaddict.org/dc2/details/contactMe">contactMe</a> : ajoute un formulaire de contact (préstylé dans les Ductiles).</li>
<li><a href="http://plugins.dotaddict.org/dc2/details/breadcrumb">breadcrumb</a> : affiche sous le header le chemin complet depuis la racine du blog jusqu’à la page affichée (aka Vous êtes ici) ; à noter : la balise à insérer est déjà présente dans les fichiers du thème Ductile Focus, vous n’aurez pas besoin de vous en occuper, simplement installer le plugin ;</li>
<li><a href="http://plugins.dotaddict.org/dc2/details/colorbox">colorBox</a> pour afficher les images joliment au clic dessus et naviguer de l’une à l’autre ;</li>
<li><a href="http://plugins.dotaddict.org/dc2/details/typo">typo</a> pour le traitement typographique des billets (guillemets, apostrophes, etc.) ;</li>
<li><a href="http://plugins.dotaddict.org/dc2/details/commentsWikibar">commentsWikibar</a> pour offrir à vos visiteurs des boutons de présentation pour le champ de saisie d’un commentaire ;</li>
<li><a href="http://plugins.dotaddict.org/dc2/details/includesubcats">includeSubcat</a> pour afficher les billets des sous-catégories sur les pages de la catégorie mère.</li>
</ul>
<p>Je n’ai pas évoqué simpleMenu car il fera très très probablement partie de la distribution de dotclear 2.4, mais si ça n’était pas le cas, pensez à le télécharger. Sa version la plus récente est offerte en pièce jointe de <a href="http://ductile.dotaddict.org/post/2011/07/24/Jour-9-The-End">ce billet du Ductile blog</a>.</p>https://ductile.dotaddict.org/focus/post/2011/08/10/Plugins-%C3%A0-marier#comment-formhttps://ductile.dotaddict.org/focus/feed/atom/comments/154Introduction à Ductile Focusurn:md5:20e027ab215e3c7b62af574b099178842011-08-06T16:29:00+02:002011-08-07T09:23:05+02:00KozlikaDuctile Focus <p><a href="https://ductile.dotaddict.org/public/ductile_focus/focus-logo.png" title="logo.png"><img src="https://ductile.dotaddict.org/public/ductile_focus/focus-logo.png" alt="logo.png" style="float:left; margin: 0 1em 1em 0;" title="lLogo pour Ductile Focus, août 2011" /></a>
Voici donc <a href="https://ductile.dotaddict.org/focus/">Ductile focus</a>, une variation de <a href="https://ductile.dotaddict.org/">Ductile Blog</a> permettant la mise en valeur de contenus mixtes textes/images, avec son logo (a priori tous les logos des variations seront eux-mêmes des variations du logo de base, lui même utilisant la feuille emblème de <a href="http://dotclear.org">Dotclear</a>).</p>
<p>Pour celui-ci j’ai fini le design et Franck va s’occuper du configurateur, qui offrira divers paramétrages.</p>
<p><strong>Stickers et insertion de SimpleMenu :</strong></p>
<p>Idem que pour le Ductile de base.</p>
<p><strong>Personnalisation du logo :</strong></p>
<p>Le proprio du blog pourra désigner son propre logo, soit depuis son ordinateur, soit en le choisissant dans le gestionnaire de médias. Il est vivement conseillé de choisir une image d’une hauteur inférieure à 80px (ou d’utiliser le format thumbnail produit par Dotclear). Si le logo est plus haut, il faudra modifier la CSS, voire la structure, en conséquence. Un tutoriel – valable d’ailleurs pour toutes les variations de Ductile – vous y aidera.</p>
<p><strong>Avatar pour chaque auteur :</strong></p>
<p>Téléchargé depuis son disque dur, renseigné avec les infos de son gravatar ou puisé dans le gestionnaire de médias, ce gravatar s’affichera en icône de post de la Une si le billet ne contient pas d’image.</p>
<p><strong>Couleurs et typo :</strong></p>
<p>Personnalisation (comme dans le Ductile de base) de certaines fontes, couleurs, tailles, etc…</p>
<p><strong>Catégorie photo :</strong></p>
<p>L’administrateur du blog pourra désigner la catégorie des images/photos et préciser si ses éventuelles sous-catégories doivent être incluses ou non. Les billets de cette catégorie seront présentés avec des images de taille « small » en format <em>short</em> (autrement dit dans les modes de présentation en liste) et sans extrait de texte.</p>
<p><strong>Bloc des focus :</strong></p>
<p>En première page de l’accueil, on trouve trois blocs de mise en valeur :</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_diverses/ductileFocus_haut.png" title="ductileFocus_haut.png"><img src="https://ductile.dotaddict.org/public/illustrations_diverses/.ductileFocus_haut_m.jpg" alt="ductileFocus_haut.png" style="display:block; margin:0 auto;" title="ductileFocus_haut.png, août 2011" /></a></p>
<p>Dans le bloc « A la une », trois cas sont distingués :</p>
<ul>
<li>le billet contient une image et appartient à la catégorie des images : l’image est affichée au format medium, le bloc n’affiche pas d’extrait de texte ;</li>
<li>le billet n’appartient pas à la catégorie images mais en contient une : l’image est affichée au format small, le bloc affiche également un extrait réduit aux 600 premiers caractères ;</li>
<li>le billet n’appartient pas à la catégorie images et ne contient aucune image : l’icône-gravatar de l’auteur est affiché, ainsi qu’un extrait réduit aux 600 premiers caractères du billet.</li>
</ul>
<p>De gauche à droite, le configurateur permettra :</p>
<ul>
<li>de définir quel billet le plus récent s’affiche à la une : par défaut il s’agit du dernier billet publié, le configurateur permet de le restreindre à une catégorie précise et/ou selon son statut « sélectionné » ou non ;</li>
<li>dans le bloc « focus textes » s’affichent les six derniers billets sélectionnés, toutes catégories confondues (hors celle des images) par défaut ; le configurateur permettra de les restreindre à une seule catégorie et/ou le statut sélectionné ou non ;</li>
<li>dans le bloc « focus images » s’affiche la première image des quinze derniers billets de la catégorie définie comme étant celle des images, possibilité de restreindre au statut sélectionné.</li>
</ul>
<p><strong>Footer :</strong></p>
<p><a href="https://ductile.dotaddict.org/public/ductile_focus/ductileFocus_bas.png" title="ductileFocus_bas.png"><img src="https://ductile.dotaddict.org/public/ductile_focus/.ductileFocus_bas_m.jpg" alt="ductileFocus_bas.png" style="display:block; margin:0 auto;" title="ductileFocus_bas.png, août 2011" /></a></p>
<p>Là c’est en suspens : ça va dépendre de si notre proposition d’ajout d’une troisième zone de widgets dans la page d’administration des widgets de présentation est acceptée par notre chef bien-aimé de Dotclear. Si oui, ce sont les widgets de cette troisième zone qui viendront s’y glisser.</p>
<p><strong>Important :</strong> Ne laissez pas de commentaires ici, ça n’est que le blog de démo. Il a été alimenté par le blog de démo de Jean-Michel et mon blog consacré à ma maison bretonne.</p>https://ductile.dotaddict.org/focus/post/2011/08/06/Introduction-%C3%A0-Ductile-Focus#comment-formhttps://ductile.dotaddict.org/focus/feed/atom/comments/38