Le grand YAKA !
Une porte ouverte sur ma vie numérique (et pas que) !!!
[CSS] Adapter votre template à la résolution de l’écran
13/06/10
Je viens de mettre en oeuvre sur mon blog de dev une solution consistant à adapter le template à la résolution de l’écran.
Je l’utilise pour faire passer mon template de 2 à 3 colonnes si la résolution est supérieur à 1300px de large.
Alors comment fait on me direz vous ?
Tout d’abord on crée plusieurs feuilles de style.
Ici j’en ai deux :
- medium.css
- large.css
/*------------*/
/* medium.css */
/*------------*/
.space {margin:10px 0; clear:both;}
#wrapper {width:960px; position:absolute;left:50%;margin: 20px 0 20px -480px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:right;padding:20px 5px;}
#sidebar2 {width:300px; margin:0;float:right; padding:20px 5px;}
#footer {clear:both;}
/*----------*/
/* large.css */
/*----------*/
.space {margin:10px 0; clear:both;}
#wrapper {width:1280px; position:absolute;left:50%;margin: 20px 0 20px -640px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:left;padding:20px 5px;}
#sidebar2 {width:300px; margin: 0; float:right; padding: 20px 5px;}
#footer {clear:both;}
Ensuite on appel la feuille de style avec des conditions :
[CSS] Ajouter un bel effet au survol de vos liens !
12/06/10
Grace aux nouvelles fonctions inclus dans CSS3 nous pouvons désormais avoir de jolies effets de transitions au survol des liens et sans utiliser le moindre fragment de JS.
Je ne vous le cache pas IE passe encore entre les mailles, mais IE passe toujours entre les mailles et de toute manière ca n’est qu’un effet cosmétique, donc un petit plus pour les personnes qui surfent sur de vrais navigateurs !
Alors comment qu’on fait ???
a {
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
}
Simple non ?
Vous voulez voir ceci en action ? Aller avec un vrai navigateur sur http://beta.chezwanders.info. C’est mon espace de travail en ligne, tout ce que je test est déjà appliqué à ce WordPress avant d’être mis en place sur mon blog.
[Musique] du bon son t’en veux ?
12/06/10
Bon après c’est sur ça dépend des gouts et des couleurs… Mais bon en ce moment, j’écoute pas mal de zic sur Deezer notamment, au bureau, surtout quand j’ai besoin de me concentrer sur un truc et m’isoler des discussions ou bruits ambiants.
Non pas que mes collègues me dérangent mais plutôt que j’aime me concentrer en musique. Et puis sa change du bruit des super sonneries AVAYA ^^
Donc dernièrement voila sur quoi mes oreilles se sont faites plaisir !
MUSE HAARP, le live de Wemblay. C’est pas tout jeune, sa date de 2008 mais j’accroche particulièrement sur Knights of Cydonia. Puis c’est un peu mon lot de consolation vu que je ne peux pas être au Stade pour cette tournée ci. J’ai un mariage à préparer et je vais déjà voir ACDC la semaine prochaine, parfois y’a des choix à faire.
Autre style, mais tout aussi bon, les Pony Pony Run Run, une découverte assez récente pour moi et franchement j’ai accroché grave !
Enfin, quelque chose de plus reposant, un bon son tranquille pour l’été, je verrai bien sa dans un hamac avec une bonne bière bien fraiche… Je vous parle du dernier album de Jack Johnson, To the sea (si c’est pas estivale comme titre ^^)
Bon et toi tu écoutes quoi en ce moment ?
[WordPress] Articles relatifs et thumbnails !
11/06/10
Je travail toujours sur l’évolution et les corrections à apporter au thème actuel de ce blog.
Dans ce travail j’ai récemment ajouté une petite fonction qui, au lieu d’afficher une liste d’articles relatifs via un plugin, va afficher des vignettes et ce sans plugin !
Comme on peut le voir sur l’image ci dessus nous avons donc de belles miniatures d’affichées au dessus du titre du billet.
Pour faire ceci il faut déjà avoir activer la gestion des « post thumbnail » pour son WordPress.
Cela se passe dans le fichier functions.php du thème.
if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50 ); // Normal post thumbnails
add_image_size( 'thumb620', 620, 9999 ); // Permalink thumbnail size
add_image_size( 'thumb80', 80, 80 ); // Permalink thumbnail size
add_image_size( 'thumb160', 160, 9999 ); // Permalink thumbnail size
}
Ensuite dans la boucle WordPress du template on appelle une image de billet de la manière suivante :
<?php if ( has_post_thumbnail() ): ?>
<? php the_post_thumbnail('thumb160'); ?>
<?php else : ?>
; ?>/img/noimg.png)
<?php endif; ?>
Ce code affiche l’image de billet si elle a été définie sinon elle affiche une image par défaut.
Pour avoir le résultat présenté dans la capture d’écran il faut donc utiliser le code qui suit dans votre template :
La suite >
[Review] Nova slider X600 une souris de joueur Geek !
10/06/10
Je vous en parlais ce matin, j’ai recu aujourd’hui de nouveaux jouets… L’un d’eux est ma nouvelle souris Nova slider X600, je vais vous détailler un peu plus ce que j’en pense.
Tout d’abord il faut savoir que cette souris je l’ai découverte sur le bureau d’un collègue qui m’en a vanté les mérites, et il a bien eu raison car cette souris à plus d’un tour dans son sac pour nous faire craquer, nous les Geeks !
Déjà voyons un peu quoi elle ressemble.
