vinz_bzh
Nombre de messages : 1
Date d'inscription : 24/10/2007
 | Sujet: Délicious_V1 Ajout boxover, fond ecran logo...  Jeu 25 Oct - 4:06 | |
| Voici quelques astuces pour insérer un boxover et un fond decran sur son site pixelpost ici sur le theme delicious.. Pour insérer les données exif au passage de la souris sur la photo, déja je te conseil de télécharger notepad+
à cette adresse: http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29119.html
c'est un tres bon editeur de texte qui prend en charge plusieur langage dont le html et c'est assez léger.. une fois telecharger et instalé tu l'ouvres et la en haut tu trouve l'onglet "langage" et la tu choisi html ou bien CSS suivant le cas.. Sinon comme logiciel ftp j'utilise filezilla pour transferer mes fichier sur mon site.
Je vais essayer d'etre le plus clair possible et encore désolé pour les fotes daurtaugrafe..  a chaque fois que tu remplace et/ou ajoute un code je te conseil de sauvegarder ton fichier image_template.html sur le bureau, apres quand tu glisse le fichier sur ton ftp, ecraser et va verifier sur ton site que tout est a sa place, souvent il suffit d'un point ou une parenthese oublier dans ton fichier html pour faire planter le site donc mefiance..pour commencer clique sur cette adresse: http://pictures.from.free.fr/Script/boxover.js
tu tombe normalement sur une page avec du code, c'est un javascript (un fichier.js),
selectionne tout ce code; Edition/selectionner tout et copie/colle sur notepad+, sur notepad coche bien "javascript" dans l'onglet "langage" en haut
ensuite /fichier/ enregistrer sous le bureau et nomme ce fichier "boxover.js" là ouvres ton logiciel FTP et tu place le ptit script "boxover.js" dans le dossier "scripts" de "delicious_v1"
( /templates/delicious_v1/scripts )
Ensuite à l'aide de ton éditeur de texte notepad+ tu ouvres le fichier "image_template.html" en faisant un clic droit dessus.
Maintnant tu dois placer ce ptit bout de code dans la page: - Code:
-
<script type="text/javascript" src="templates/delicious_v1/scripts/boxover.js"></script> comme ceci: puis ces 2 script à la suite:
- Code:
-
<script language="javascript" type="text/javascript">
<!--
function clearBox(box) {
if(box.value==box.defaultValue) {
box.value = "";
}
}
-->
</script> - Code:
-
<script language='javascript' type='text/javascript'>
<!-- BEGIN
function flip(rid)
{
current=(document.getElementById(rid).style.display == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
// End -->
</script> comme ceci: Maintenant pour voir aparaitre le curseur tu dois placer un bout de code au bon endroit.
Exemple: <DIV TITLE="header=[header text] body=[body text]"
Donc moi pour afficher mes exif sur la photo au passage de la souris jai placer tout ca à l'endroit où se trouve ma photo.
Le code a insérer: - Code:
-
<div title="header=[<center><IMAGE_TITLE><center>] body=[<EXIF_CAMERA_MODEL> <br><center>Temps d'exposition: <EXIF_EXPOSURE_TIME><center> Focale: <EXIF_FOCAL_LENGTH> <br>Ouverture: <EXIF_APERTURE> <br>Iso: <EXIF_ISO> <br/>Flash: <EXIF_FLASH>]" id="photobox" style="width:<IMAGE_WIDTH>px;height:<IMAGE_HEIGHT>px;"> <div id="image-border" style="width: <IMAGE_WIDTH>px; height: <IMAGE_HEIGHT>px;"> <img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" name="photo" style="background:black;"/> <div id="menu_browse" style="width: <IMAGE_WIDTH>px; height: <IMAGE_HEIGHT>px;"> <script type="text/javascript"> browsing(); </script> </div> <!-- menu_browse --> </div> <!-- image-border --> comme ce ceci: Donc voila tu as 4 code à copier coller dans ton fichier image template, sans avoir oublier de placer
le script boxover.js dans le dossier script de delicious ca devrait marcher.Sinon j'ai vu qu'il te manquai les ptites fleche de navigation sur la photo, pour ça c'est la meme chose
tu dois insérer ce bout de code encore entre les balises <head> et </head> en faisant un copié collé, verifie avant de le collé
qu'il y sois pas deja sinon, remet le. C'est possible aussi que tes fleche de navigation ne fonctionne pas a cause des smiley que tu as
instalé dans les commentaires, chez moi ca faisai planté google map..
code qui dois normalement etre dans ton fichier 'image template.html": - Code:
-
<script type="text/javascript"> function browsing(){ var existprev = "<IMAGE_PREVIOUS_ID>"; var existnext = "<IMAGE_NEXT_ID>"; if (existprev != "<IMAGE_ID>"){ document.write('<a href="#" id="menu_browse_prev" onclick="document.location=\'index.php?showimage=<IMAGE_PREVIOUS_ID>\';"></a>'); } if (existnext != "<IMAGE_ID>"){ document.write('<a href="#" id="menu_browse_next" onclick="document.location=\'index.php?showimage=<IMAGE_NEXT_ID>\';"></a>'); } } </script> exemple: ca marche avec un ptit bout de code qui logiquement est deja dans ton fichier "image_templates"
a la suite des exifs et que tu as pas besoin de remetre mais verifie qu'il y est bien. - Code:
-
<script type="text/javascript">
browsing();
</script> 
Autrement pour ton logo, le titre de ton site est assez long et ca cache le menu..
le mieux ca serai de virer le titre et de metre a la place un fond d'ecran avec un logo que tu placerai dessus.
tu peux placer ton fond d'ecran a la racine de ton site avec ton logiciel ftp, le chemin du fond d'ecran sera
http://www.exemple.net/photoblog/NOMDUFONDECRAN
Pour effacer le titre qui est sur ton site il faut effacer la ligne: - Code:
-
<div id="logo_sub"> <a title="click for home" href="index.php"><SITE_TITLE></a>  Maintnant il faut que tu ouvre ton fichier "light.css" avec notepad+ qui se trouve dans le dossier "styles"
( /templates/delicious_v1/styles/)
C'est la que tu va metre le chemin de ton fond d'ecran
ca se trouve tout au debut au niveau de body.. selectionne et efface ce code: - Code:
-
body {
background-color:white;
font: 9px/20px verdana, helvetica, arial, sans-serif;
color:#444;
margin:0px;
padding:0px;
background-image:url(../images/bg_white.jpg);
background-repeat: repeat-x;
background-position: center top;
} voir screen: et colle a la place ce bout de code (remplace ladresse exemple.com par le chemin de ton fond ecran:
- Code:
-
body {
background-image : url(http://WWW.EXEMPLE.COM/templates/delicious_v1/images/FOND.jpg);
background-attachment : fixed;
background-color:white;
font: 9px/14px verdana, helvetica, arial, sans-serif;
color:#000000;
margin:0px;
padding:0px;
background-repeat: repeat-x;
background-position: center top;
} Voila j'espere n'avoir rien oublié et que ca aidera certains qui galère un peu en html apres pour comprendre le html il y a un bon site pour comprendre les bases: http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.htmla bientot | |
|
fred
Admin
Nombre de messages : 39
Age : 49
Localisation : Laval, Québec, Canada
Date d'inscription : 27/11/2006
| | Sujet: Re: Délicious_V1 Ajout boxover, fond ecran logo... Sam 27 Oct - 12:29 | |
| Super tuto, ca va peu etre donner des idées à quelque un. | |
|
