Featured

Le bar à pat’

Posté par Pierre de La Celle le Mardi, 6 janvier 2009

Un petit post pour vous signaler un petit resto dans lequel j’ai pris l’habitude de manger avec la Poussine ou avec des gens de passage.
Situé 19, Rue Docteur Escat dans le 6ème à Marseille, à deux pas du prado c’est un frère et une soeur qui ont eu le courage de reprendre un vieux bar [...]

Partager cette page :

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 [...]

Partager cette page :

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>