Featured

Smashing Magazine

Posté par Pierre de La Celle le Dimanche, 5 octobre 2008

Je voulais vraiment vous le signaler, le site de Smashing Magazine est une perle pour quiconque s’intéresse au graphisme…
Tutos, ressources graphiques gratuites, liens en tous genres. Bref, c’est le clubic du graphisme! Je me suis régalé à travailler sur leur matériel mis à dispo, tout est extrèmement bien ficelé et documenté.
Vous y trouverez des concours [...]

l’aptera - typ-1, la voiture de demain?

Posté par Pierre de La Celle le Vendredi, 9 mai 2008

Je ne sais pas vous, mais quand j’étais petit on me rabachait qu’en l’an 2000, les voitures voleraient… On est en 2008, et les voitures sont encore sur 4 roues, avec des pneus et consomment du carburant toujours de plus en plus cher…
Présentée en septembre 2007, l’Aptera typ-1 de la société éponyme pourrait, peut-être, être [...]

Divflickr

Posté par Traffic de Couenne le Dimanche, 18 février 2007

Amis de dotclear bonjour.

Je vous présente ici comment ajouter un beau calque transparent comportant le flash de diaporama de Flickr comme c’est présent sur ce blog. (cliquez sur “photos” dans le menu d’en haut…) Le rendu sous IE sera peut-être moins sexy, car la gestion de la transprence des png y est assez aléatoire…

Divflickr par Traffic de couenne

- code original: Pierre de La Celle
- Design: Je ne sais plus d’où viennent les bordures png, mais elles sont libres, j’en suis sûr

http://blog.delacelle.com

Cet addon est issu de mon thème: couenneBlog2
http://blog.delacelle.com/dotclear2-theme-couenneblog2.zip

Modifications du fichier style.css de votre thème:

à ajouter au début ou à la fin de votre fichier style.css

#photos {
    width:580px;
    margin-left:300px;
    position:absolute;
    top:140px;
    display:none;
    cursor: pointer;
    z-index: 2;
}

Ajouter l’attribut

z-index: 1;

à la classe

.post-tags

de votre CSS (Sinon les tags viennent se mettre au milieu de votre beau diaporama!)

Déposez les images du zip attaché à ce billet dans le dossier /img de votre thème.

Dans votre fichier _top.html ajoutez avant la fermeture de la balise </p>, juste à la fin du fichier:

<div id=”photos” >

<table width=”564″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”> <tr>

<td width=”32″ height=”32″ style=”width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/top-left.png) repeat-y;”>  

</td>

<td width=”500″ height=”32″ style=”width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-top.png) repeat-x;”>   </td> <td width=”32″ height=”32″ style=”width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/top-right.png) no-repeat;”>   </td>

</tr> <tr>

<td style=”width: 32px; background: url({{tpl:BlogThemeURL}}/img/border-left.png) repeat-y;”>   </td> <td style=”background: #FFF;”> <iframe style=”margin-top:10px” src=http://www.flickr.com/slideShow/index.gne?user_id=XXXXXXXX@N00 frameBorder=0 width=500 height=500 scrolling=no></iframe> <center><a onclick=”switchMenu(’photos’);” title=”Cacher les photos”>Cacher les photos</a></center> </td> <td width=”32″ height=”100%” style=”width: 32px; background: url({{tpl:BlogThemeURL}}/img/border-right.png) repeat-y;”>   </td>

</tr> <tr>

<td width=”32″ height=”32″ style=”width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-left.png) repeat-y;”>   </td> <td width=”500″ height=”32″ style=”width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-bottom.png) repeat-x;”>   </td> <td width=”32″ height=”32″ style=”width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-right.png) repeat-y;”>   </td>

</tr>

</table> </div>

Changez bien le XXXXXXXX@N00 par votre ID Flickr.

Puis changez le

<a href=”#search”>{{tpl:lang To search}}</a>

par

<a onclick=”switchMenu(’photos’);” title=”Voir les photos”>Photos</a>

(Je me permet de court-circuiter ce lien qui fait doublon souvent avec le #menu)

Et enfin, dans le _head.html de votre thème ajoutez ceci après la dernière balise :

<script type=”text/javascript”>
<!–
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != “block” ) {
    el.style.display = ‘block’;
} else {
    el.style.display = ‘none’;
    }
}
//–>
</script>