Archives téléchargements Thèmes visuels

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 english flag ).

  • 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
J.Juraver
on May 28 2013 at 03:56 pm GMT
Une idée pour optimiser encore ce skin : fournir un scroll qui ne soit pas manipulables dans le corps de page mais plutôt depuis les barres de scroll latérales habituelles. Difficile à décrire, mais on le voit très bien sur une page avec long contenu dans ce site. C'est assez élégant, un seul bloc (central) bouge, ça fait gagner de la place...
Alexis Raimbault - on May 28 2013 at 04:30 pm GMT
Ah oui c'est pas mal Jérémie.


Alexis Raimbault webmaster free-lance
J.Juraver
on Oct. 3 2012 at 08:24 pm GMT
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.
J.Juraver
on June 18 2012 at 10:28 pm GMT

Donc remplacez ces ID par:

div.tabs ul li {
            
border:1px solid black;
            
floatleft;
            
margin-left3px;
            -
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-radius30px 20px;
         }  

Alexis Raimbault - on June 19 2012 at 07:55 am GMT

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
on June 17 2012 at 07:43 am GMT

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 - on June 17 2012 at 05:09 pm GMT

Alexis :en fait tu l'avais déjà prévu dans ton css

div.tabs ul li {
            
border:1px solid black;
            
floatleft;
            
margin-left3px;
            -
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;          
            }

Alexis Raimbault - on June 18 2012 at 08:49 am GMT

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
on June 16 2012 at 09:45 pm GMT

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)

J.Juraver
on June 16 2012 at 02:30 pm GMT

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.

Alexis Raimbault - on June 16 2012 at 09:44 pm GMT

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