Fullscreen

Thème semi-transparent avec affichage simplifié d'images de fond en plein écran.
nb de colonnes: 2 + barre d'interactions
largeur: fluide, blocs en absolu
onglets : oui

Téléchargez ce thème

Pour plonger le surfeur dans une ambiance unique, ce thème vous permet d'afficher des images de fonds étirées en plein écran, sans déformation.

On peut déclarer :

un fond unique pour le site, ou bien le fond "par défaut" ;
un fond pour un skin_variant, c'est à dire à partir d'un noeud de l'arborescence (sections), ou pour un type de page.
un fond pour une page, tout simplement en déclarant une "image de page" .

Pas besoin de modifier le template.php pour déclarer un fond ! Il faut simplement uploader les images par FTP dans le thème en respectant une convention de nommage, ou bien ajouter l'image comme "image de page". C'est très rapide.

Les scripts (template, CSS) sont entièrements commentés pour vous permettre de comprendre et personnaliser ce thème (mais en anglais ).

Fond par défaut : image background.jpg dans le /images du thème
Fond pour page spécifique : uploader dans le même repertoire que l'image par défaut une image background_users, background_categories, background_articles, background_query, etc.
Fond à partir d'une section : déclarer l'option variant_myback au niveau de la section et uploadez une image background_myback. Le fond est attribué en cascade à l'infini au descendant de la section.
Vous l'avez compris le thème charge automatiquement en image de fond les fichiers dont le suffixe correspond au skin_variant en cours. Notez que le skin variant est toujours l'id de la balise body.
Par dessus ce mécanisme vous pouvez aussi définir un fond sur une page (article,catégorie ou section) en déclarant une "image de page" (voir onglet média).
Attention dans ce cas aux mécanismes de redimensionnement des images (lire l'article sur la page de téléchargement du thème pour plus de détails).
Dans le cadre d'une image de page définie sur une section, le fond est attribué en cascade sur un niveau seulement.

Ce n'est pas tout !

Positionnement des blocs en absolu, toutes les commandes sont accessibles en permanence sans scroll.
Menu du side_panel avec boutons en relief (CSS3).
Gestion des onglets prête pour le drop-down menu.

Ajout de la version 2 :

pouvoir faire un diaporama
pouvoir définir une légende aux images
pouvoir en survolant une icone effacer le canevas du site pour ne voir que l'image de fond
pourvoir aligner chaque image sur son centre, un de ses bord, ou un de ses coins

Discussion (26)
Pièces jointes (1)

J.Juraver	le 3 oct. 2012 Dans la version 2, je suis tombé sur une coquille : si tu configures l'accueil pour afficher les articles A la Une avec un scrolling vertical, le bloc est mal positionné et apparaît au milieu de la page. Mais ça scrolle tout seul quand même ! Si tu refuses le scroll et préfères un affichage simple statique, pas de problème de positionnement. Je l'ai juste remarqué en local sur un petit écran type netbook, je n'ai pas poussé plus loin. Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
J.Juraver	le 18 juin 2012 Donc remplacez ces ID par: div.tabs ul li { border:1px solid black; float: left; margin-left: 3px; -moz-border-radius-topleft : 15px 40px; -moz-border-radius-topright : 15px 40px; -webkit-border-radius : 15px 15px 0 0; /* must be perfect rounded / border-top-left-radius : 15px 40px; border-top-right-radius : 15px 40px; } et : `p#crumbs { -moz-border-radius-bottomright : 30px 20px; -webkit-border-radius : 0 0 20px 0; / must be perfect rounded / border-bottom-right-radius: 30px 20px; }` Je ne m'attarde pas, j'ai mon yacs en double file...* Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \| Alexis Raimbault - le 19 juin 2012 oui Jérémie, et pour webkit on est plus obligé de donner des arrondis simples, la déclaration marche aussi pour lui : -webkit-border-bottom-right-radius : 30px 20px; Alexis Raimbault webmaster free-lance
Alexis Raimbault	le 17 juin 2012 oui je confirme Jérémie. en fait ces blocs avait un arrondi non symétrique. par exemple pour les onglets, pour FF : -moz-border-radius-topleft : 15px 40px; sauf qu'en CSS3 l'écriture officielle est : border-top-left-radius : 15px 40px; Donc il faut juste que je corrige un peu le CSS, car FF prend en charge maintenant la propriété sans préfixe. Alexis Raimbault webmaster free-lance J.Juraver - le 17 juin 2012 Alexis :en fait tu l'avais déjà prévu dans ton css div.tabs ul li { border:1px solid black; float: left; margin-left: 3px; -moz-border-radius-topleft : 15px 40px; -moz-border-radius-topright : 15px 40px; -webkit-border-radius : 15px 15px 0 0; /* must be perfect rounded / border-radius-topleft : 15px 40px; border-radius-topright : 15px 40px; } Je ne m'attarde pas, j'ai mon yacs en double file...* Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \| Alexis Raimbault - le 18 juin 2012 Justement il y a une erreur de syntaxe dans la propriété standard CSS3 ! remplacez dans vos thèmes border-radius-topleft par border-top-left-radius, mais ne touchez pas à celles préfixées -moz de même plus bas dans le CSS au niveau de #crump. Alexis Raimbault webmaster free-lance
J.Juraver	le 16 juin 2012 Je confirme : c'est propre à firefox 13.0.1 (ou peut-être ma propre config). De nombreux sites affichaient auparavant des coins arrondis selon la même utilisée par Alexis (auteur de Fulscreen), et n'en font rien désormais (coins en angle droit). Quelqu'un peut-il confirmer de son côté ? (en visitant camp artika par exemple) Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
J.Juraver	le 16 juin 2012 Alexis, je te signale un phénomène d'effet de bord lorsqu'on upgrade firefox de la v12 à 13.0.1 : certains arrondis de ton skin ne fonctionnent plus, notamment les arrondis des onglets et le petit virage à la droite du fil d'ariane. Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \| Alexis Raimbault - le 16 juin 2012 J.Juraver :merci JJ je vais regarder cela. J'ai du utiliser une propriété -moz-border-radius et maintenant FF ne veut peut être plus du préfixe. Alexis Raimbault webmaster free-lance
J.Juraver	le 30 mai 2012 Constaté sur firefox 12 et réso 1024x600 Pour mes besoins personnels j'ai réduit la hauteur fixe de ce bandeau "extra" à 17px, mais c'est moins bien centré verticalement. Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
Alexis Raimbault	le 29 mai 2012 Coucou Jérémie, C'est quoi la résolution de ton notebook et le navigateur ? Alexis Raimbault webmaster free-lance
J.Juraver	le 27 mai 2012 J'ai trouvé. Pour afficher le module de recherche dans un thème via le template.php : `// the search tool echo '<div class="search_header">'."\n"; echo Codes::beautify('[search]'); echo '</div>';` Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
J.Juraver	le 27 mai 2012 Pour info, vers la ligne 345 du thème, on peut donner plus de place au fil d'ariane (crumbs) qui n'empiète plus sur le titre de page ou section : `top : 2.9em;`. Bon par contre ça ne règle pas trop le problème si on aoute un famille à la section, laissant apparaitre un titre de plus, et une partie du titre principal mangée. A part ça, moi je cherche un moyen d'afficher dans le bloc du slogan en haut à droite (et en dur dans le template) le module de recherche. Une idée pour ce code ?.. Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
J.Juraver	le 25 mai 2012 Bonjour, dans ce très beau thème graphique que je teste actuellement, je constate quelques problèmes de positionnement en version yacs lasares. Je précise que c'est un retour d'expérience surtout sur écran netbook. Tout le menu extra (positionné en haut à partir de la gauche) laisse apparaître le haut des picto qui vont apparaitre au survol de la souris. Le titre de page (ou titre de famille) est sytématiquemen coupé aux environs de la première lettre De même, à l'index des sections, le premier item présenté en decorated est coupe horizontalement par le milieu (il est trop haut). Si on enlève un titre de famille à la section, on gagne de la place et le titre du premier item (page) est moins coupé, mais il l'est. (screenshots fournis si demandés !) D'une manière générale, la richesse de ce skin est indéniable et si l'on veut travailler la suropacité de ses pages il est idéal, d'autant plus qu'il et très bien commenté dans son code. Il pose néammoins quelques problèmes de positionnement pour le moment. Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \|
TANGUY Hervé	le 6 déc. 2010 Bonjour, Depuis la mise à jour du site en martin-2, du moins je ne l'avais pas remarqué avant, sous IE le site s'affiche une fraction de seconde puis on obtient une page 404. Avec un autre thème, pas de problème. Depuis Firefox, j'ai généré le fichier source de la page en HTML puis je l'ai mis à la racine d'un site d'essai en local (EasyPHP), j'ai ouvert ce fichier HTML dans IE : même problème. Si je déplace le fichier HTML, la page s'affiche en mode texte, toujours avec IE (les dossiers ne sont plus accessibles). Les seuls fichiers chargés sont des images, des .CSS et des .JS. Je ne vois pas vraiment la cause de cet effet fantaisiste et très gênant. Sur le serveur où est mon site, la version PHP 5.2.1 est installée avec bcmath activé, en local sur mon micro c'est la 5.3.3 (bcmath chargé par défaut). L'adresse du site : www.autocaravane.org. J.Juraver - le 21 jan. Je ne retrouve pas la solution qu'on avait trouvé pour ce problème sous IE. Il existe un patch quelque part ? " Bonjour, Depuis la mise à jour du site en martin-2, du moins je ne l'avais pas remarqué avant, sous IE le site s'affiche une fraction de seconde puis on obtient une page 404. " Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \| Alexis Raimbault - le 22 jan. Oui on avait trouvé : supprimer dans le css les références au .htc pour les coin arrondis. il me semble que je l'ai fait dans la version2 Alexis Raimbault webmaster free-lance J.Juraver - le 22 jan. Ha oui voilà c'est l'astuce que j'avais bien oubliée. Donc pour IE, on ne connaît toujours pas de solution d'arrondis en css implémentable dnas yacs ? Un vrai casse-tête Je ne m'attarde pas, j'ai mon yacs en double file... Yacs on my blog \| Suivez le blog Yacs \| Yacs Showroom \| Plugin Firefox de recherche dans Yetanoz \| Alexis Raimbault - le 23 jan. Si, je fais ça avec la version js de csspie. on charge le script via le template si IE<10 cela te permet de faire les coins arrondis, les dégradés, les ombres portées. Alexis Raimbault webmaster free-lance TANGUY Hervé - le 24 jan. Bonjour, Je viens de constater que les coins supérieurs des onglets ne sont pas arrondis avec Firefox (v18.0.1 sous Linux) tandis qu'ils le sont avec Iron (Version 23.0.1300.0 (165188) sous Linux) et... avec IE8 (sous Windows bien sûr).: du coup, il n'y a plus de disparition de la page d'accueil avec IE (j'utilise csspie). L'adresse du site est toujours www.autocaravane.org. Alexis Raimbault - le 24 jan. Bonjour Hervé, Firefox a harmonisé sa définition des propriétés border-radius récemment. De mon côté j'ai déjà fait la correction, il faut utiliser la V2 du thème. Je note que l'image de fond est chez toi une image unie gris foncé !? dans ce cas autant ne pas mettre d'image du tout, et de déclarer une couleur de fond pour le body via le css. Alexis Raimbault webmaster free-lance TANGUY Hervé - le 24 jan. J'utilise bien la V2, mais les arrondis n'apparaissent pas sur les onglets avec Firefox. Alexis Raimbault - le 24 jan. Reprend l'archive, je l'ai mise à jour le 10 dec 2012 Alexis Raimbault webmaster free-lance TANGUY Hervé - le 25 jan. OK, c'est mieux... Merci.
TANGUY Hervé	le 6 déc. 2010 Bonjour, Il manque le fichier mu.ico spécifié dans template.php lignes 161 et 162. Hervé
Alexis Raimbault	le 3 sep. 2010 Mise à jour de l'archive du thème avec corrections sur la feuille de style : titres des images affichées par la boîte modale (zoom sur vignette) conservés en petit, non souligné et noir ; boîtes modale du calendrier (saisie de date) repassée au dessus du main_panel (sinon saisie impossible !!) Alexis Raimbault webmaster free-lance

26 commentaires

Liens

thème graphique FULLSCREEN - webdesign