Thème DC2 : Wdark Green

« Mettre en avant certains commentaires avec jQuery - Plugin DC2 : Carnaval »

Par Osku le mercredi, janvier 2 2008, 13:41 - Php, Css, JavaScript, etc. - Lien permanent

Nouvelle année, nouveau thème pour DotClear 2 ;-)
En essayant diverses fonctions de Gimp et Inkscape, on arrive à faire des trucs sympas sans forcer.

Mini screenshot :

Mini Screenshot Wdark Green
Détails sur Dotaddict

Quelques Features :

L'utilisation de la fameuse pre2ol.js d' Olivier - bien pratique pour ceux qui codent beaucoup dans les billets dotclear.
Accès à la feuille de style du thème et javascript personnalisé via les paramètres des thèmes : onglet Configuration du thème disponible après la sélection du thème.
Pas d'effets Jquery par défaut mais une petite notice est écrite.
Le dégradé utilisé pour décorer le bloc #top est disponible dans le sous répertoire /img au format SVG (fichier top.svg)

Ce thème est livré sous licence GPL.

Mise à jour du 04/01/08

Version 0.5 en pièces jointes.

AJout d'une image dans le .post-title
Corrections de marge et padding dans divers blocs.
Adaptation pour la wikibarre du Pep.

Commentaires

1. Le mercredi, janvier 2 2008, 17:58 par TitaX

Je suis toujours aussi fan de tes thèmes !
A quand un dans les tons rouges pour remplacer le mien ;) ?

Merci en tout cas !

2. Le mercredi, janvier 2 2008, 21:38 par Osku

Merci, ça fait bien plaisir.
Va pour le prochain, il sera rouge..
T'as d'autres exigences particulières ? tant qu'on y est ;-)

3. Le mardi, janvier 22 2008, 21:15 par Sacha

Osku,

Ce thème est merveilleux !

Au fait, la sélection des thèmes grâce aux vignettes, c'est avec Arlequin que tu as fait ça ? Je pensais que c'était possible mais tu es le premier à l'avoir fait. Par ailleurs je constate une erreur que m'empresserai de corriger.

4. Le mercredi, janvier 23 2008, 11:38 par Osku

Merci merci.
Oui ça se fait sans trop de difficulté avec l'Arlequin.
Voici le code employé :
Code HTML du sélecteur :

<ul class="arlequin">%2$s</ul>

Code HTML d'un item :

<li><a href="%1$s%2$s%3$s"><img src="[http://www.sakeco.net/blog/public/.%3$s_t_t.jpg]" alt="%4$s" /></a></li>

Code HTML d'un item actif :

<li class="themactif"><img src="[http://www.sakeco.net/blog/public/.%3$s_t_t.jpg]" alt="%4$s" /></li>

J'ai auparavant chargé dans mon répertoire public des captures d'écrans des différents thèmes (celles par exemple de themes.da vont très bien).
Merci pour la correction de l'erreur (il faut rafraichir deux fois la page pour voir réapparaitre les vignettes)

5. Le jeudi, janvier 24 2008, 03:36 par Junior K.

Salut Osku,

J'apprécie énormément la qualité de tes thèmes. Je les utilise sur ma plateforme.
Tu peux me contacter par mail, stp?

Merci

6. Le jeudi, janvier 24 2008, 10:55 par Osku

Merci Junior K.
Tu n'as pas vu la page Contact ? je préfère autant que tu me contactes si tu as à me demander qqch ;-)

7. Le dimanche, janvier 27 2008, 19:16 par Sacha

Merci Osku pour l'exemple de code à utiliser pour les vignettes. Je pense que cela intéressera certains.

Est-ce que tu sais créer un "ascenseur" jQuery avec plusieurs vignettes à l'intérieur ? Cela pourrait être intéressant pour des blogs ayant plus de trois ou quatre thèmes disponibles.

8. Le lundi, janvier 28 2008, 11:05 par Osku

Pour le code, ça a changé avec la dernière version du plugin Arlequin ;-):
Code HTML d'un item :

<li><a href="%1$s%2$s%3$s"><img src="[http://www.sakeco.net/blog/public/.%6$s_t_t.jpg]" alt="%4$s" /></a></li>

Code HTML d'un item actif :

<li class="themactif"><img src="[http://www.sakeco.net/blog/public/.%6$s_t_t.jpg]" alt="%4$s" /></li>

Je pense que le plugin Caroussel devrait faire l'affaire pour l'ascenseur avec les vignettes à l'intérieur

9. Le mardi, février 12 2008, 23:13 par Patrice

Est -il possible d'ajouter une image png dans le titre du blog ?

Merci.

10. Le mercredi, février 13 2008, 09:48 par Osku

@Patrice, bien sûr - que pensais tu rajouter ?

11. Le mercredi, février 13 2008, 15:24 par patrice

Je souhaite ajouter la premiere image dans mon premier billet (la ps3+ logo freeboxTV) dans le bandeau vert ,pour avoir un logo global sur mon blog.
j'ai bien essayer de comprendre le fichier style.css mais a part avoir trouver le section top, je ne sais pas trop la bidouiller ...
Je suis en version 0.5 du theme.
Merci encore pour ce joli theme .

12. Le mercredi, février 13 2008, 15:43 par Osku

Pour placer ton logo sur la droite du bandeau, tu peux utiliser les propriétés CSS suivantes :

#top h1 { 
padding:35px 0 0 50px;
margin:0 10px;
text-align:left;
background:transparent  url([http://www.patricemurielle.free.fr/dotclear/public/logo1.jpg]) no-repeat top right
}

J'ai oublié de corriger un petit bug également. Rajoutes la ligne suivante dans la même feuille de style:

#sidebar #topnav ul li a{color:#fff}

Ainsi les liens Archives et Accueil apparaissent correctement en blanc comme prévu.

13. Le mercredi, février 13 2008, 18:07 par patrice

Heu , je viens d'essayer ca ne marche pas ,Il faut remplacer le #top
par ta description ci dessus ou l'ajouter.Moi j'ai remplacé ...mais de toute facon si je remplace je n'aurais plus le bandeau vert en dessous du logo ?
Merci.

14. Le jeudi, février 14 2008, 10:11 par Osku

Non pas les caractéristiques du #top mais celles du #top h1 !
Dans le #top, tu as tout ce qui faut pour avoir le bandeau vert.
Dans le #top h1, on met ta nouvelle image et le tour est joué :)

15. Le jeudi, février 14 2008, 16:16 par patrice

ok !! en plus je sais pas lire ....
J'ai fait ca ,il n'y a pas de pb de cache quand on change le style.css ,avec IE et/ou firefox(j'ai poutant vider les caches).
J'obtient pas la meme chose (IE plus de barre verte et Firefox tjrs pas de logo !!),quand je vais dans theme/configuration sous les menu de dotclear je vois bien la nelle feuille de style.
Desolé d'etre aussi mauvais et merci por le cours de css

16. Le jeudi, février 14 2008, 16:34 par Osku

T'inquiètes, on va s'en sortir ;-)
Bon première chose, pour IE : effectivement il y a un bug - je regarderais ça plus tard.
Pour Firefox, c'est ma faute, des crochets sont en trop :

#top h1 {
padding:35px 0 0 50px;
margin:0 10px;
text-align:left;
background:transparent url(http://www.patricemurielle.free.fr/dotclear/public/logo1.jpg) no-repeat top right
}
#top h1 a {
color:#000;border:none;
}

Ca devrait être mieux pour Firefox.

17. Le jeudi, février 14 2008, 17:28 par patrice

Booups ...
je vois pas de diff dans ton code #top h1 entre le commentaire 12 et 16.
Si c'est les crochets de l'url ,j'ai essayé aussi sans mais je vois tjrs pas le logo.
Merci.

18. Le jeudi, février 14 2008, 17:39 par Osku

J'ai édité le commentaire et retiré les crochets : '[' et ']' .
Ca s'affiche toujours pas !?
Pourtant en faisant le test chez toi (avec l'extension Firebug pour firefox), je vois bien l'image.

19. Le jeudi, février 14 2008, 18:16 par patrice

alors voila ,j'ai installé firebug(je connais pas grand chose en web mais c'est pas mal ca) quand j'edit ma feuille de style c'est l'originale de ton theme pas de mofif ?!!???
Si je remplace dans firebug par ton code ca marche,je vois le logo ...
Je vais essayer tout ca ce soir ,je suis au boulot la !!On dirait qu'il y a un bug
quand on update le style.css il n'est pas pris en compte.C'est dingue ca dans la configuration du theme je vois bien la bonne.

20. Le jeudi, février 14 2008, 19:41 par patrice

Ca marche nickel chez moi ....
Merci bien,je vais arranger tout ca avec un beau png ...

21. Le vendredi, février 15 2008, 09:44 par Osku

Yes !
Heureux de le lire :)

22. Le lundi, avril 7 2008, 16:38 par S3b

Bonjour Osku,

J'adore ton thème, je l'utilise d'ailleurs sur mon Blog. Par contre j'ai un petit soucis avec l'affichage dans IE, dans lequel n'apparait pas la bonne police de caractères et pas de fond vert top. Aurais-tu une solution pour ceci.
Merci Beaucoup

S3b

23. Le mercredi, avril 9 2008, 11:00 par Osku

@S3b, en plus des soucis que tu signales, sous IE<7, on a la transparence des images de type 'PNG' qui est mal gérée.
J'essaie de regarder pour l'affichage de l'en-tête.

24. Le dimanche, mai 18 2008, 17:40 par bigvivi

Salut Osku,
J'utilise ce thème en version 0.4 sous dc2 RC1 et avec la venu du nouveau plugin pages, le thème sur ce widget ne fonctionne pas .
Sait tu comment le mettre au couleur du thème ?
J'ai essayé mais j'ai pas trouvé .
Un grand merci pour ton(tes) superbe thème .

25. Le mardi, juillet 15 2008, 01:04 par M

Pour que le plugin 'Pages' s'affiche proprement, il faut ajouter ça :

.pages { background:#9ACC12;color:#000;padding:5px;}

en ligne 296 du fichier /themes/wdarkgreen/style.css

La discussion continue ailleurs

URL de rétrolien : http://www.sakeco.net/blog/trackback/111

Fil des commentaires de ce billet

Du libre et du sport