71site.fr - Téléchargements
En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Téléchargements
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

Téléchargements

Si le lien ne fonctionne pas, contactez le webmestre pour l'en informer.

Déplier Fermer  Skins

skin_transparence18

(Cliquez sur la vignette pour agrandir l'image)

Les skins de ce site sont adaptées pour Guppy 5.02.00 et +


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 1024, 1280, Full. 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 smile

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.

(merci à Sabine, à Papinou, à Saxbar... de tout le travail qu'ils ont mené en amont...)


skin_transparence18.zip(2 479,88 ko) Téléchargé 9 fois Télécharger Hyperlien   Prévisualiser...  Imprimer... 

Vous êtes ici :   Accueil » Téléchargements
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 40 membres
Connectés :
membresAlankozh
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
13 Abonnés