e-Jori, portfolio d'Art et Design de Jori Avlis - css

Azulejo Portugais, thème pour Wordpress

Jori — Sun, 17 Aug 2008 01:11:00 +0200

Mon nouveau site sur le Portugal et la culture lusophone, Lusitanie.fr; repose sur le thème spécialement créé pour lui, "Azulejo Portugais". Ce thème a pour base graphique les carrelages typiques que l'on voit un peu partout au Portugal, les "azulejos" (sur des maisons de particuliers, sur des églises, sur des mairies, des boutiques... partout). Majoritairement bleu et blanc, un design qui s'adapte à la résolution de l'écran, et qui se veut porteur d'un certain concept portugais de l'esthétisme.

Cette image ci-contre correspond au header - la partie supérieure - du template pour Wordpress. Vous pouvez télécharger le thème pour Wordpress ici : http://e-jori.com/etc/wp-azulejo.zip et l'installer normalement pour votre blog Wordpress : il est compatible avec les widgets, et la barre latérale est sur la gauche. Le template a également été optimisé pour le référencement naturel, qui de toute façon est déjà très bon par défaut sur Wordpress.

Avant que quelqu'un ne le demande, oui, je prépare une version pour Dotclear =) !

Au sujet de Lusitanie.fr : c'est un blog sur lequel je parlerais du Portugal et des cultures héritières, les pays lusophones (Brésil, Angola, Cap-Vert...). Différents aspects de la culture seront abordés, de la musique à la gastronomie, en passant par les monuments ou les coutumes locales. Dans mon premier post, je vous parle de Fado, la musique de la Saudade.

L'image de gauche correspond ici au footer de "Azulejo de Portugal". Chaque fin de post est ponctué d'un coquillage. L'utilisation de la police de caractères "monotype corsiva" pour le titrage est assez "osée", parce que ce n'est pas une police habituelle, mais pourtant ! Il semblerait qu'elle soit disponible dans plus de 80% des systèmes Windows, ce qui en ferait une police encore plus répandue que Times New Roman. Pourquoi s'en priver, surtout qu'elle correspond plus ou moins à la police que je cherchais pour ce design... Il faut savoir qu'au départ, je voulais utiliser sIFR pour ce template, afin d'inclure la police de mon choix. Après avoir réussi à installer sIFR, j'ai été forcé de constater que cette technologie avait trop de désavantages : de nombreux petits bugs, comme le non affichage pur et simple des titres une fois sur deux, une difficulté à configurer et personnaliser la police m'ont donc fait préférer une inclusion classique en CSS de la police de caractères actuelle. J'ai fait le même type de pari pour la police en général du template, "Palatino Linotype" : très répandue également sur les systèmes windows, l'écrasante majorité des lecteurs des blogs utilisant ce thème pour wordpress (et prochainement dotclear) devraient le voir conformément à l'original.

Comment modifier Liquid Card

Jori — Mon, 16 Jan 2006 17:42:00 +0000

Quelques questions souvent posées, quelques idées pour personnaliser son thème? Voici un petit tuto pour vous aider :)

Tout d'abord, je vous présente le nouveau thème de couleur, en négatif: dark LiquidCard - installeur allez faire un petit tour sur le site démo, les images sont plus explicites que les mots. Ça change :p

Passons au mini tuto.

Comment ajouter un lien dans le menu des catégories supplémentaires, dans la même ligne?

On cherche dans template.php la ligne où se trouve: dcCatList() et on remplace par dcCatList('<ul>%s<li><a href="votre nouveau lien">blabla</a></li></ul>')

Comment rajouter une image en fixe à droite comme sur e-Jori.com?

Ouvrir style.css et rajouter:

#bougepas {

 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 100;

} html>body #bougepas {

 position: fixed;

}

Si vous voulez mettre l'image à gauche, remplacez right par left.

Ensuite, dans template.php, il faut rajouter quelque part (avant <div id="menu"> par exemple).

Ah je veux mon menu en fixe, pour pas qu'il bouge, comment je fais?

C'est le même principe que pour la question précédente. Sauf que comme les liens ne vont pas bouger, il vaut mieux intervertir les positions avec le header, donc:

dans template.php, on prend

et on le met avant

On vient donc de mettre l'élément du menu avant l'élément du header. Maintenant, on veut que ce menu ne scrolle pas (j'avertis tout de suite que ça ne marche pas sous IE, comme d'habitude, mais on est habitués :)

On ouvre style.css, on trouve

#menu { margin: -7px 0 -4px 0px; padding: 0; }

après padding: 0; (et avant le } ) on rajoute:

 position: relative;
 z-index: 90;

} html>body #menu {

 position: fixed;

Voilà, ça devrait marcher. Bon courage, si vous avez des questions, hésitez pas :)

Petit bonus: images sans plantes pour ceux qui veulent personnaliser un maximum Liquid Card. Oubliez pas de retirer le gAMA de votre fichier png avec tweakPNG, comme ça Internet Explorer affichera correctement les couleurs.

Thème LiquidCard

Jori — Thu, 29 Dec 2005 10:56:00 +0000

J'ai enfin fini l'adaptation du thème de mon petit site :) Le design s'adapte à votre résolution, ainsi, quelque soit votre résolution, le site ne paraitra jamais minuscule :p (bon en dessous de 800*600 avec Internet Explorer, ça bugue un peu à cause du calendrier...). Un LiquidCard simplifié, sans flash, mais en revanche un header liquide aussi, comme le reste des éléments qui composent ce thème.

A vous de le personaliser ;)

Si vous utilisez ce thème, merci de me l'indiquer (en commentant ce billet, par exemple), que je puisse vous lier.

Une petite capture d'écran

Une petite démo

Installeur:

http://e-jori.com/etc/dc_themes/theme-LiquidCard-0.1.pkg.gz

Version rar, si l'installeur ne marche pas:

http://e-jori.com/etc/dc_themes/LiquidCard.rar

Variantes de couleur:

Pink Liquid Card

installeur | archive | visualiser

green Liquid Card