Téléchargements
Si le lien ne fonctionne pas, contactez le webmestre pour l'en informer.
Skins
(Cliquez sur la vignette pour agrandir l'image)
Les skins de ce site (version 5.03.00) sont adaptées pour Guppy 5.03.00 et plus
Éventuellement, pour des réglages particuliers, voir cette FAQ.
Vous pouvez la tester sur Démo-Skins.
Une fois téléchargée, installez cette skin avec la fonction Installer de GuppY 5.
Si votre hébergeur ne permet pas l'utilisation de cette fonction, vous devez décompresser le dossier de la skin avec l'aide de 7-zip ou un autre utilitaire.
Par FTP Vous uploadez le dossier de votre skin sur votre espace en ligne. Puis dans Admin>Configurations>Config thèmes vous sélectionnez votre skin vos thèmes et vous enregistrez la config. A Configuration skin, vous sélectionnez votre skin, enfin vous sélectionnez Config boites pour configurez vos boites (en Web comme en Mobile).
NB : Afin d'éviter de redéfinir complètement la configuration des boites en Web ou en Mobile lors de l'installation d'une nouvelle skin, vous pouvez facilement dans
Config boites et Config accueil
recopier la configuration qui vous convient de votre skin actuelle vers la (ou les) skin(s) nouvelle(s).
Toutes ces skins sont utilisables avec colonnes latérales gauche et/ou droite ainsi qu'en dimensions variables. Elles sont toutes compatibles Config look.
Vous enregistrez et retour à l'accueil de votre site, et un ou plusieurs appuis sur Ctrl+F5 pour rafraichir la page sans passer par le cache.
Vous devez utiliser Config look pour modifier le fichier style.css (sans toucher directement à celui-ci !) de la skin et ajouter vos personnalisations dans les fichiers styleplus.css pour la version "Web" et mobstyle.css pour la version "Mobile". Il est souhaitable d'aller dans ces deux fichiers pour adapter à votre goût ces skins.
Le logo (img/logo.png) 500x220px dans le dossier de la skin a été créé avec la police de la skin : font/etchas_regular.ttf .
Un logiciel libre et gratuit comme GIMP ou gratuit comme Photofiltre7 fait très bien ce travail. Me contacter si vous souhaitez en adapter un à votre site.
Les images de fond des titres et des onglets sont issues de l'image de fond principale... Il y a donc une certaine unité visuelle. Ces images sont déclarées dans styleplus.css. Me contacter si vous souhaitez l'adapter à votre site.
Les images en "filigrane" sont déclarées dans styleplus.css et mobstyle.css
Notez de plus que
le menu latéral fixe à droite reste visible en permanence (bien pratique...),
les icônes sont dans un dossier img/NavLat de la skin et son code est dans une boite libre bâtie selon les exemples de cet article
Le code est ci-dessous :
<style type="text/css">
.menu-lat .contenu_global { /* attribut du contenu */
position:fixed; /* mettre fixed pour fixer ce menu */
z-index:1; /* Important : mettre une valeur qui convient */
top:135px; /* position en hauteur */
right:0px; /* position à droite, mettre 0px pour fixer sur le bord gauche */
}
.menu-lat a { /* attribut du lien */
transition-duration: 0.6s; /* durée de l'animation */
padding:3px 5px; /* marges intérieures */
height:26px; /* hauteur */
line-height:26px; /* hauteur de ligne */
width:32px; /* largeur */
float:right; /* placé à droite */
font-size:13px; /* taille de caractères */
margin-bottom:5px; /* marge extérieure basse */
position:relative;
border-bottom: 1px solid rgba(255,255,255,0.6); /* bordure basse : épaisseur - nature - couleur */
border-left: 1px solid rgba(255,255,255,0.3); /* bordure gauche : épaisseur - nature - couleur */
border-radius:4px 0px 0px 12px; /* arrondis : ici en haut et en bas à gauche */
box-shadow:0px 3px 10px rgba(0,0,0,0.7); /* ombre portée */
}
.menu-lat a {
display:block;
}
.menu-lat img { /* attribut de l'image */
position:absolute;
right:6px; /* position à droite */
top:4px; /* position en hauteur */
}
.menu-lat span { /* attribut du texte */
position:absolute;
color:#FFFFFF; /* couleur */
font-weight:bold; /* texte en gras */
right:-140px; /* position à droite au repos */
top:2px; /* position en haut */
}
.menu-lat a:hover { /* attribut du lien survolé */
width:130px; /*largeur*/
}
.menu-lat a:hover span { /* attribut du lien (texte) survolé */
color:#FFFFFF; /* couleur */
right:42px; /* position à droite */
transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat .item:nth-child(1) a{ background:#361B1B; }
.menu-lat .item:nth-child(2) a{ background:#3D1F1F; }
.menu-lat .item:nth-child(3) a{ background:#4A2626; }
.menu-lat .item:nth-child(4) a{ background:#562C2C; }
.menu-lat .item:nth-child(5) a{ background:#643333; }
.menu-lat .item:nth-child(6) a{ background:#6D3838; }
.menu-lat .item:nth-child(7) a{ background:#763D3D; }
.menu-lat .item:nth-child(8) a{ background:#854545; }
.menu-lat .item:nth-child(9) a{ background:#8E4A4A; }
.menu-lat .item:nth-child(10) a{ background:#A55656; }
</style>
<div class="menu-lat">
<div class="contenu_global">
<div class="item" style="clear:both;"><a href="index.php" title="Accueil"><img alt="home24.jpg" src="skins/skin_transparence18/img/NavLat/home24.jpg" style="border-width: 0px; border-style: solid;" title="Accueil" /> <span>Accueil</span></a></div>
<div class="item" style="clear:both;"><a href="links.php" title="Liens"><img alt="liens24.jpg" src="skins/skin_transparence18/img/NavLat/liens24.jpg" style="border-width: 0px; border-style: solid;" title="Liens" /> <span>Liens</span></a></div>
<div class="item" style="clear:both;"><a href="photorama.php" title="Photos"><img alt="photos24.jpg" src="skins/skin_transparence18/img/NavLat/photos24.jpg" style="border-width: 0px; border-style: solid;" title="Photos" /> <span>Photos</span></a></div>
<div class="item" style="clear:both;"><a href="https://www.google.fr/maps/" target="_blank" title="Localiser"><img alt="compas24.jpg" src="skins/skin_transparence18/img/NavLat/compas24.jpg" style="border-width: 0px; border-style: solid;" title="Localiser" /> <span>Localiser</span></a></div>
<div class="item" style="clear:both;"><a href="https://www.blablacar.fr/" target="_blank" title="Covoiturage"><img alt="covoit24.jpg" src="skins/skin_transparence18/img/NavLat/covoit24.jpg" style="border-width: 0px; border-style: solid;" title="Covoiturage" /> <span>Covoiturage</span></a></div>
<div class="item" style="clear:both;"><a href="https://fr-fr.facebook.com/" target="_blank" title="Facebook"><img alt="facebook24.jpg" src="skins/skin_transparence18/img/NavLat/facebook24.jpg" style="border-width: 0px; border-style: solid;" title="Facebook" /> <span>Facebook</span></a></div>
<div class="item" style="clear:both;"><a href="https://twitter.com/?lang=fr" target="_blank" title="Twitter"><img alt="twitter24.jpg" src="skins/skin_transparence18/img/NavLat/twitter24.jpg" style="border-width: 0px; border-style: solid;" title="Twitter" /> <span>Twitter</span></a></div>
<div class="item" style="clear:both;"><a href="https://plus.google.com/discover?hl=fr" target="_blank" title="Google+"><img alt="google+24.jpg" src="skins/skin_transparence18/img/NavLat/google+24.jpg" style="border-width: 0px; border-style: solid;" title="Google+" /> <span>Google+</span></a></div>
<div class="item" style="clear:both;"><a href="https://fr.linkedin.com/" target="_blank" title="LinkedIn"><img alt="linkedin24.jpg" src="skins/skin_transparence18/img/NavLat/linkedin24.jpg" style="border-width: 0px; border-style: solid;" title="LinkedIn" /> <span>LinkedIn</span></a></div>
<div class="item" style="clear:both;"><a href="https://www.pinterest.fr/pinterestfr/" target="_blank" title="Pinterest"><img alt="pinterest24.jpg" src="skins/skin_transparence18/img/NavLat/pinterest24.jpg" style="border-width: 0px; border-style: solid;" title="Pinterest" /> <span>Pinterest</span></a></div>
</div>
</div>
Ceci et d'autres éléments sont réglables dans Config Look, styleplus.css, mobstyle.css ... N'hésitez pas à m'interroger pour toute question.
Vous pouvez poster sur mon forum, rubrique Skins, avec des questions précises ainsi que l'url de votre site pour permettre de répondre de façon précise.
Il n'y a pas de copyright à ces skins, veuillez cependant, SVP, laisser la référence à mes skins et à mon site en bas de page 
Le non-respect de cette simple demande m'a conduit à proposer cette skin (initialement prévue pour une compétition de Course d'Orientation) en libre téléchargement.
Merci.
skin_transparence18.zip(2 480,23 ko) Téléchargé 794 fois
