Skip to main content Help Control Panel

Cybermedium

webdevelopper
webdesigner
webmaster

Fullscreen : vos images de fond en plein écran

Home Téléchargez

SELECT * FROM yacs_files AS files WHERE (files.anchor LIKE 'article:51') AND (files.active='Y') ORDER BY files.rank, edit_date DESC, files.title LIMIT 0,300
1054: Unknown column 'files.rank' in 'order clause'

Un thème original pour YACS

[small]photo du fond: [i]Hong Kong sky lights[/i], Laurence Mellinger, 2004.[/small]
Suivez ce lien si vous cherchez seulement l'astuce css/html pour afficher l'image de fond
C'est à partir d'un tutoriel donné par le [b]concepteur web[/b] Guillaume Normand, dans le hors-serie n°5 de la revue [b][i]Webdesign[/i][/b], que j'ai intégré ce thème pour [b]YACS[/b], en l'enrichissant davantage et surtout en utilisant la puissance d'un [b]CMS[/b] pour mettre en œuvre une utilisation intéressante d'images de fond. C'est là le principal objet de ce thème : pouvoir afficher une [b]image de fond, ajustée en plein écran[/b]. En second objet, comme tous les blocs sont positionnés en absolu, il n'y a pas de défilement de la page. (C'est le main_panel seulement qui fait défiler son contenu.) En conséquence les [b]menus et les outils sont visibles et accessibles en permanence[/b].
menu d'interactions
Menu d'interactions
déplié
Déplié
Afin d'optimiser davantage la place, et ne pas masquer l'image de fond, la colonne extra est affichée de manière innovante à l'horizontale en haut de page, et se déplie au survol de la souris.
Bien sûr ces positionnements ont une limite de place disponible, surtout en petite résolution, et ne conviendront pas sur un site qui demande d'afficher beaucoup d'informations (boîtes de navigation, etc.).
[small]Pour une consultation depuis un mobile, Yacs utilise un autre canevas.[/small]
[title]Positionnement intelligent[/title] L'affichage de l'image de fond n'est pas qu'une simple déformation de l'image aux dimensions de la fenêtre du navigateur. Les [b]proportions[/b] de l'image sont [b]préservées[/b] tandis que l'image est centrée. Selon le différentiel entre les proportions de l'image et de la fenêtre du navigateur, l'image est rognée verticalement ou horizontalement. Le rendu est obtenu par les balises HTML et les règles CSS. [title]Fonds multiples[/title] L'image de fond par défaut est images/background.jpg dans le répertoire du thème. Là ou cela devient intéressant c'est que le thème permet d'utiliser très facilement des [b]backgrounds différents pour chaque page[/b], attribués [b]en cascade[/b] sur l'arborescence, et [b]sans intervenir dans le code PHP[/b] ! Deux méthodes sont disponibles simultanément : - [b]méthode 1[/b] : définir au niveau d'une section une option de [b]variante de thème[/b].
Par exemple "variant_montheme".
Uploadez ensuite par FTP une image nommée background_montheme dans le répertoire /images du thème.
Le thème va afficher automatiquement l'image en fond pour la section et tous ces descendants.
- [b]méthode 2[/b] : fournir au niveau d'une page une "[b]image de page[/b]".
L'image de page sera utilisée pour le fond, en priorité d'après la méthode 1.
Dans le cadre d'une section le fond est cascadé sur un niveau inférieur seulement.
Notez que la [b]méthode 1[/b] affiche le fond lors de [b]l'édition des pages[/b], ce qui n'est pas le cas de la méthode 2 (le fond par défaut est utilisé à la place, ou une variante définie aux niveaux supérieurs de la page).
Pour la [b]méthode 2[/b], attention au redimensionnement des images par YACS. Voici la procédure la plus rapide pour attribuer un fond sur un serveur YACS Martin : - allez sur la page concernée, cliquez sur "modifier la page" dans outils (en haut) ; - cliquez sur l'onglet "média" ; - cliquez sur le bouton "ajouter" pour la ligne "image de page" ; - donnez votre fichier, l'image est chargée, mais à cet instant elle est retaillée aux dimensions d'une vignette ! - cliquez sur le lien "ajouter une autre image" en dessous du message de notification ; - redonnez le même fichier ; - dans les options, si vous êtes de niveau d'accès associé, cochez "ne pas redimensionner l'image". Si vous êtes simple membre, vous tombez sous le coup des limites pour grandes images, paramètres du serveur ; - l'image de page est maintenant aux bonnes dimensions, retournez à la page principale pour voir le résultat.
Concernant la [b]méthode 1[/b] avec variantes de thème, il faut savoir que YACS génère déjà des marquages de variantes selon les pages affichées. Par exemple "users", "categories, "control", "sections", "articles", etc.
En fournissant par exemple une image "background_users.jpg", celle-ci s'affichera automatiquement pour l'index des utilisateurs, les profils, la page d'authentification.

Consultez dans le source HTML l'identifiant de la "balise body" pour connaître la variante de la page.
[title]Menu en boutons 3D[/title]
Menu en boutons
Menu en boutons
Les règles de style transforment les liens de la colonne latérale en [b]joli menu à boutons[/b] (pour les navigateurs compatibles CSS3). Vous pouvez facilement changer les couleurs via la feuille de style. Les boutons dans le corps de page (barre de commande, boutons à la demande) auront le même rendu. [title]Feuille de style CSS3[/title]
Titre et fil d'Ariane
Titre et fil d'Ariane
Onglets, en-têtes et menu
Onglets, en-têtes et menu
Les effets de style sont obtenus par CSS3 et donc non implémentés par tous les navigateurs. Cependant c'est une solution d'avenir, qui simplifie fortement l'intégration. @font-face, box-shadow, text-shadow, border-radius. [title]Personnaliser et dériver ce thème[/title]
Le CSS est organisé de [b]manière à isoler[/b] ce qui relève de la [b]décoration[/b] ou du [b]positionnement[/b] délicat des blocs. Le thème est livré ici avec une ambiance quelque peu technoïde, mais vous pouvez rapidement changer ses couleurs en éditant la première partie du CSS. Les scripts sont [b]entièrement commentés[/b]. [title]Idées d'utilisation[/title] !!À partir de ce thème, vous pouvez élaborer une galerie d'images en plein écran. De nouvelles interactions pourront aussi être mises en oeuvre après l'intégration de jQuery. [title]Spécifications[/title]

- En-tête, colonne latérale, corps de page, pied de page, barre d'interactions
- Positionnement absolu, blocs toujours visibles
- 2 colonnes + une barre d'interactions dépliable au survol
- Menu en boutons 3D
- Onglets de navigation
- Fil d'Ariane
- Validité XHTML 1.1
- Feuille de style CSS3
- Police embarquée
- Rendu maximum avec le navigateur Firefox 3.5+
- Scripts très commentés, basés sur le thème Mu

thème graphique FULLSCREEN pour YACS
JJ
on June 18 2012 at 09:26 pm GMT

J'ai trouvé mon erreur. J'ai voulu augmenté la taille vericale de l'espace de scrolling des news à l'accueil, et ça fait tout planter sous chrome. Sais pas pourquoi. Mais rien à voir avec fullscreen en fait.

dl#scrolling_news div.scroller_outside { /* the navigation box for scrolling news */
    
height300px/* the height of the scrolling area */
    
overflowhidden/* strip the tail, if any */
    
positionrelative;
    }

JJ
on June 17 2012 at 06:27 pm GMT

Hello,

je ne sais pas si tu as testé ta deuxième version du thème sur chrome, chez moi c'est la débâcle au niveau du positionnement (c'est peut-être moi qui ait fait une bêtise). Les grands blocs s'affichent les uns après les autres, le header d'abord, puis dessous le contenu de main_menu, puis le titre de page, la barre d'onglets, le footer, le panel extra, et enfin tout en bas la photo de background Mais tout va bien sur firefox et IE 8.


Alexis Raimbault
on Apr. 23 2012 at 09:51 am GMT

oui JJ,

ce dernier permet notamment :

  • d'afficher une légende aux photos (configurer le thème) ;
  • de les faire défiler en diaporama (option dans configurer le thème) ;
  • au cas par cas, de caler les images sur leur centre (par défaut), ou un bord, ou un coin (convention de nommage du fichier image).

Il fonctionne sur une lasares RC1 (il faut une base Jquery).

JJ
on Apr. 21 2012 at 10:13 pm GMT

Il est très novateur ce skin, bravo !

J'ai cru comprendre qu'une V2 était prête à sortir des cartons ?

photo
webdesign templating by webmaster Alexis Raimbault