nicolabricot’s blog - Mot-clé - DesignProcrastinateur à mes heures perdues.2023-11-13T15:57:02+01:00nicolabricoturn:md5:982ec27fb37a618ec1de008b70bb934fDotclearModifier et configurer son thème ownCloud, ou comment changer le titre, le pied de page et le sloganurn:md5:1f52a87b6815cc582d4504d47f39d3d12014-08-11T17:38:00+02:002016-11-24T15:52:01+01:00NicolasMémo interneAstuceCSSDesignHébergementWeb<p><a href="http://owncloud.net" rel="external">OwnCloud</a> c’est sympa pour héberger, gérer et partager ses données où l’on veut, voire s’affranchir du service <a href="https://dropbox.com">Dropbox</a> et de ses conditions d’utilisations un peu obscures.
<br />Et ça roxe du poney, même sur mon <a href="http://rbpi.org">Raspberry Pi</a> !</p>
<p class="center"><a href="https://nicolabricot.com/public/images/screen/owncloud_default_theme.png" title="Thème par défaut d'ownCloud"><img src="https://nicolabricot.com/public/images/screen/owncloud_default_theme.png" alt="Thème par défaut d'ownCloud" title="Thème par défaut d'ownCloud, août 2014" class="img" /></a></p>
<p>Si vous souhaitez par contre modifier un peu le thème, et en particulier le titre de la page ainsi que le pied de page <q>ownCloud - services web sous votre contrôle</q>, difficile de tomber sur la bonne documentation. Mais à force de chercher j’ai fini par trouver.</p>
<p class="center"><a href="https://nicolabricot.com/public/images/screen/owncloud_abricot_theme.png" title="Thème Abricot pour ownCloud"><img src="https://nicolabricot.com/public/images/screen/owncloud_abricot_theme.png" alt="Thème Abricot pour ownCloud" title="Thème Abricot pour ownCloud, août 2014" class="img" /></a></p> <h3>Changer le titre, pied de page & solgan d’ownCloud</h3>
<ol>
<li>La première chose à faire est de créer un dossier du nom du thème souhaité — disons que le nôtre s’appellera « abricot ». Il suffit de créer le dossier <code>abricot</code> dans <code>owncloud/themes</code>.</li>
<li>En ajoutant le fichier <code>defaults.php</code> avec le modèle suivant, vous serez capables de modifier, le titre, le slogan et le pied de page de votre thème : <pre>
<?php
/**
* (c) 2014 - Abricot theme (nicolabricot.com)
*/
class OC_Theme {
private $myEntity;
private $myName;
private $myTitle;
private $myBaseUrl;
private $mySlogan;
private $myLogoClaim;
function __construct() {
/* company name, used for footers and copyright notices */
$this->myEntity = "Abricot’s Cloud";
/* short name, used when referring to the software, footer in e-mail signature or sender */
$this->myName = "Cloud";
/* can be a longer name, for titles */
$this->myTitle = "Cloud &middot; Abricot";
$this->myBaseUrl = "https://cloud.example.com";
/* used in login footer */
$this->mySlogan = "Le nuage dans les étoiles";
$this->myLogoClaim = "";
}
public function getBaseUrl() {
return $this->myBaseUrl;
}
public function getTitle() {
return $this->myTitle;
}
public function getName() {
return $this->myName;
}
public function getEntity() {
return $this->myEntity;
}
public function getSlogan() {
return $this->mySlogan;
}
public function getLogoClaim() {
return $this->myLogoClaim;
}
public function getShortFooter() {
$footer = "<a href=\"". $this->getBaseUrl() . "\" target=\"_blank\">" . $this->getEntity() . "</a>" . ' &middot; ' . $this->getSlogan();
return $footer;
}
}
</pre>
Par défaut, j’ai réécrit seulement une partie des données membres. Vous pouvez consulter le <a href="https://github.com/owncloud/core/blob/v5.0.10/lib/defaults.php" rel="external">fichier original</a>. <br />Ensuite, à vous de remplir à votre convenance et selon l’affichage souhaité.</li>
<li>Enfin il faut modifier le fichier de configuration <code>owncloud/conf/config.php</code> et y ajouter la ligne
<pre>'theme' => 'abricot'</pre> pour spécifier le thème qui doit doit être chargé.
<br />OwnCloud est intelligent, s’il ne trouve pas les fichiers dont il a besoin, il prend les fichiers par défaut.</li>
</ol>
<p>Ce n’était pas si compliqué, une fois que l’on sait quoi modifier…</p>
<h3>Changer et adapter le thème d’ownCloud</h3>
<p>Si vous souhaitez maintenant modifier le thème (CSS, ce qui s’affiche et comment), il faut créer un dossier <code>core</code> dans votre thème. A l’intérieur du dossier <code>owncloud/themes/abricot/core</code>, créer :</p>
<ul>
<li>un dossier <code>css</code> avec un fichier CSS nommé <code>styles.css</code> pour ajouter votre CSS qui sera ajouté ;</li>
<li>un dossier <code>templates</code> qui contient les pages que vous souhaitez redéfinir — vous pouvez copier les fichiers par défaut présents dans <code>owncloud/core/templates</code> et les modifier pour les adapter à votre thème. </li>
</ul>
<p>Infos trouvées grâce à la discussion <q><cite><a href="http://forum.owncloud.org/viewtopic.php?t=13652" rel="external">Theme > Change Title and Footer name</a></cite></q> sur les forum d’ownCloud.</p>
<h3 id="owncloud-optimization">Petits conseils pour améliorer les performances</h3>
<p>Le Raspberry Pi reste une petite machine, donc autant optimiser le fonctionnement d’ownCloud. Mais ça s’applique aussi pour les serveurs plus puissants !</p>
<ul>
<li>Configurer votre serveur web et ownCloud pour y accéder en HTTPS (bon OK, ça consomme un peu plus)</li>
<li>Désactiver les modules inutiles ou dont vous ne vous servez pas (notamment le <q>First Run Wizard</q> ou la recherche)</li>
<li>Désactiver l’aide et le lien présent dans le menu : ajouter <code>'knowledgebaseenabled' => false</code> dans le fichier de configuration</li>
<li>En production, ne servir qu’un fichier CSS et JS au lieu des nombreux (évite des requêtes HTTP pour le client et votre serveur !) : ajouter <code>'asset-pipeline.enabled' => true</code> dans le fichier de configuration</li>
<li>Désactiver les aperçus : ajouter <code>'enable_previews' => false</code> dans le fichier de configuration</li>
<li>Ne conservez que les logs d’erreurs (niveau 4) — soit par l’interface d’administration, soit en ajoutant la ligne <code>'loglevel' => '4'</code> dans le fichier de configuration</li>
</ul>
<p>Voilà, j’espère que ça pourra vous servir.
<br />Et si vous êtes quelques utilisateurs, utiliser plutôt une base de données SQLite au lieu de MySQL, ça vous évite de devoir installer une instance SQL sur votre RBPi qui risque de beaucoup consommer ;-)</p>
<p class="edit">
<abbr title="Mise à jour">MàJ</abbr> du 29 oct. 2014 : Correction des balises <code><</code> et <code>&middot;</code> pour un rendu correct.
<br /><abbr title="Mise à jour">MàJ</abbr> du 28 janv. 2015 : Corrections orthographiques</p>Un petit favicon pour son siteurn:md5:a85e30a05255414faf6da0f0d1a172b32012-08-30T13:56:00+02:002014-11-04T12:49:11+01:00NicolasWebAstuceDesignMicrosoftTaffWeb <p>Pour ne pas devoir aller chercher quand j’en ai besoin la bonne syntaxe qu’Internet Explorer réussira à comprendre pour afficher un beau favicon, j’ai décidé de prendre les choses en main et de me faire un petit mémo ici.</p>
<p>Pour Internet Explorer (jusqu’à je ne sais pas quelle version), il faut un favicon au format ICO 16×16 — sinon il fera la tête et n’affichera rien — à appeler avec :</p>
<pre>
<link rel="shortcut icon" type="image/x-icon" href="https://nicolabricot.com/post/2012/favicon.ico" />
</pre>
<p>Pour les navigateurs récents, un favicon au format PNG 32×32 fera très bien l’affaire. Il faudra l’appeler avec :</p>
<pre>
<link rel="icon" type="image/png" href="https://nicolabricot.com/post/2012/favicon.png" />
</pre>
<p>Il est possible d’utiliser d’autres formats (GIF, JPG, …) pour ces navigateurs. Il faut alors penser à modifier le <code>type="image/xxx"</code> correspondant.</p>
<p>Et pour les appareils iOS, j’ai vu que l’on pouvait augmenter encore la taille du favicon, mais bon là je verrais quand j’en aurais <em>vraiment</em> besoin.</p>
<hr />
<p class="edit">Mise à jour de nov. 2014</p>
<p>L’eau a coulé sous les ponts depuis, et voici deux outils qui me sont utiles voire indispensables :</p>
<ul>
<li><a href="http://www.convertico.com/" rel="external" hreflang="en">convertico.com</a> qui permet de convertir une image au format ICO ;</li>
<li><a href="http://realfavicongenerator.net/" rel="external" hreflang="en">realfavicongenerator.net</a> qui est l’outil ultime pour, à partir d’une image assez grande, générer <strong>tous</strong> les différents formats et différentes tailles de favicon nécessaires (standard, Microsoft, iOS, …).</li>
</ul>Pour une prochaine refonte graphiqueurn:md5:d79e64e66f5fad9ee0008cfa0e717a822011-08-22T00:36:00+02:002015-10-27T23:30:51+01:00NicolasWebBlogDesignDotclearEvolution <p class="centre"><img alt="Paint par ArtCriminal sur Flickr.com" title="Paint par ArtCriminal sur Flickr.com, août 2011" class="photo" src="https://nicolabricot.com/public/images/flickr/paint-artcriminal.jpg" /></p><p>Quand j’aurais envie de refaire ou modifier le design, il faut que je pense à remplacer :</p><ul><li>“billets précédents” par “retourner dans le passé” ;</li><li>“billets suivants” par “revenir dans le présent” ;</li><li>“aucun commentaire” par “ajouter son grain de sel”.</li></ul><p>Photo : <a title="Paint de Art Criminal" href="http://www.flickr.com/photos/artcriminal/4558727704/in/photostream/">Art Criminal</a> sur Flickr.</p>De l’art de changer son designurn:md5:b1c1866776ee98c006e7847685d2884d2011-07-05T22:13:00+02:002020-04-06T17:26:54+02:00NicolasInformatiqueBlogDesignDotclear <p style="float:left; margin:0.75em 1em 0 0;"><a href="http://www.flickr.com/photos/zigazou76/4842567651/" title="Pots de peinture de zigazou76, sur Flickr"><img src="https://farm5.static.flickr.com/4089/4842567651_f1b3805979_m.jpg" alt="Pots de peinture" class="photo" /></a></p>
<p>Il y a quelques temps, j’ajoutais un nouveau design pour le blog. Il se voulait plus agréable à lire, plus convival, et plus léger. Je me suis inspiré de nombreux sites pour lesquels j’appréciais particulièrement leur design, ou certains éléments de leur design. Entre autres : <a href="http://5thirtyone.com/" title="5thirtyone" hreflang="en">5thirtyone</a> dont j’affectionne tout particulièrement la colonne de gauche contenant les informations sur chaque article.
</p>
<p>Mais voilà, je me suis rendu compte que le design ressemblait plus à des idées collées les unes aux autres, sans vraiment trop d’harmonie. Et que niveau accessibilité, ce n’était pas terrible non plus. Mettre la sidebar en bas comme le font certains blogs, nécessite plutôt d’afficher au plus un ou deux articles au-dessus.
<br />Et qu’au départ, je voulais un design léger, très simple (j’adore la <em>nudité</em> du <a href="http://blog.c-krylatov.com/" title="blog de Cyril Krylatov" hreflang="fr">blog</a> de Cyril Krylatov). Ce qui n’était plus le cas !</p>
<p>Et puis j’ai découvert la très <a href="http://ductile.dotaddict.org/post/2011/05/22/Mon-cher-Franck" title="Ductile Blog">intéressante initiative</a> de Kozlika et de Franck (c’est Kozlika qui parle) :</p>
<blockquote class="citation">
<p>Je voudrais réaliser un nouveau thème pour Dotclear. Je voudrais que celui-ci soit suffisamment robuste et présentable pour que nous puissions le joindre à la prochaine version.
</p>
<p>[…]</p>
<p>À ces prémisses s’ajouterait l’une de mes marottes : le chantier public en direct, ouvert aux commentaires. Tu connais mon goût pour l’exégèse et je frétille d’avance des discussions à n’en plus finir sur le choix d’une valeur de marge gauche d’une liste à 1.5 ou 1.66em.</p>
</blockquote>
<p>Je me suis donc inspiré des premières versions de ce nouveau design (en partiuclier les stickers), et j’ai essayé de ne pas ajouter des fioritures partout, tout comme des illustrations à tout bout de champ.</p>
<p>A la différence des autres thèmes que j’ai pu faire, dans lesquels je reprennais chaque template et je les modifiais à ma sauce, j’ai vraiment limité les modifications sur les fichiers. J’ai fait tout ce que j’ai pu en CSS, et j’ai gardé un certain nombre de comportement par défaut.
<br />J’entends par là les formulations comme : <q>Par Nicolas le lundi 4 mai 2011, 15:09 - Général</q>. Je n’y ai pas touché (même si j’aurais préféré quelque chose comme <q>Le lundi 4 mai 2011 – Général</q> (notez la différence entre les traits « d’union »<sup>[<a href="https://nicolabricot.com/post/2011/de-l-art-de-changer-son-design#pnote-050711-1" id="rev-pnote-050711-1">1</a>]</sup>)).</p>
<p> Je n’ai néanmois pas pu résister à modifier ces templates suivants :</p>
<ul>
<li><code>user_head.html</code> : pour ajouter un favicon et des commentaires conditionnels (c’est toujours un plaisir de prendre en compte les navigateurs obsolètes…),</li>
<li><code>_top.html</code> : pour avoir un haut de page avec description et les stickers,</li>
<li><code>post.html</code> et <code>page.html</code> : j’ai uniquement modifié les commentaires pour afficher les images Gravatar des commentateurs,</li>
<li><code>_footer.html</code> : là je me suis laissé un peu aller, entre les dernières photos de Flickr et mon dernier Tweet,
</li>
<li><code>404.html</code> : pour personnaliser la page d’erreur 404, qui n’est vraiment pas agréable par défault.</li>
</ul>
<p>J’espère que ce design ne me lassera pas trop vite, et qu’il est autant agréable pour vous que pour moi !</p>
<p>Photo : <a href="http://www.flickr.com/photos/zigazou76/4842567651/" title="Pots de peinture">Frédéric Bisson</a>.</p>
<div class="footnotes">
<h3>Notes</h3>
<p>[<a href="https://nicolabricot.com/post/2011/de-l-art-de-changer-son-design#rev-pnote-050711-1" id="pnote-050711-1">1</a>] En réalité le second trait n’est pas un trait d’union, mais un demi-cadratin : – (utilisé notamment pour les énumérations). Seul le - est un trait d’union, qui permet d’accoler deux mots (par exemple : <q>c’est-à-dire</q>). Plus de précisons sur la page <a href="http://fr.wikipedia.org/wiki/Tiret" title="Tiret sur Wikipedia">Wikipédia</a>.</p>
</div>