AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


5 résultats trouvés pour header

Manumanu

Gérer son header, son fond, et son logo - Dim 24 Aoû 2014 - 1:00



Présentation du tutoriel


Sur beaucoup de forum, je rencontre des problèmes d'intégration du fond, du logo, du header ou des trois. Souvent, les trois sont même totalement confondus. Voici une mise au point et quelques conseils.

Explications


Séparez votre fond et votre logo !



Tag header sur Never Utopia - graphisme, codage et game design Head-3c90a70
Un bon exemple à suivre

C'est bête à dire, mais peu de gens le font, et mettent ensuite une image vide par-dessus le fond pour avoir un lien cliquable... Faite votre fond et votre logo séparé, et mettez le logo sur un png transparent, c'est autrement plus simple et pratique ! De plus, vous pourrez changer de fond sans changer de logo, et inversement ! Ça vous donne aussi la possibilité d'avoir un fond répété sans vous casser la tête.

Alors si vous avez lu ceci, vous n'avez plus aucune excuse pour perpétuer cette sale manie !


Choisir un fond...


Toutes les images ne peuvent pas servir de fond. Enfin si, mais toutes ne le devraient pas. Par "fond", j'entend "tout" le fond du forum, et non simplement l'entête (header).

Oubliez le wallpaper magnifique que vous avez trouvé sur Google Image, avec tous ces elfes/ces arbres/ces maisons/autres trucs magnifiques. Un fond doit être SIMPLE, sans quoi il prend plus d'importance visuelle que le contenu du site, et en perturbe la lecture. De plus, une image de ce genre ne peut pas être répétée gracieusement, et donc il se produira un effet mosaïque d'autant plus perturbant :

Tag header sur Never Utopia - graphisme, codage et game design Fondrepeat-3c9912d
Un fond répété... Pas terrible.

Vous pensez peut-être qu'il suffit d'afficher l'image en plein écran ? Encore une mauvaise idée : Une image n'est pas faite pour être étirée. Si le résultat est bon sur votre écran, pensez à ceux qui en ont un plus grand : Il verront une bouillie infame de pixels, et probablement mal proportionnée :


Tag header sur Never Utopia - graphisme, codage et game design Fondetire-3c99242
Un fond étiré... Pas mieux.

C'est pour toutes ces excellentes raisons que votre image de fond devrait être un pattern prévu pour être répétable, ou bien une couleur unie !

BONUS-TIME
Une idée chouette pour vos sites : Le pattern de fond transparent sur une couleur unie. Par exemple, cette image :
Tag header sur Never Utopia - graphisme, codage et game design Noize-338456b
Elle donne à n'importe quel fond un effet "bruit" un peu granuleux. Vous pouvez donc l'appliquer en backgroud, en plus d'une couleur, sur n'importe quel élément (fond de page ou pas) :

Code:
element {
   background: #6aa690 url("http://img82.xooimage.com/files/f/c/6/noize-338456b.png");
}


Choisir un header


Le choix d'un header est différent, et peut-être tout à fait complémentaire avec un fond (même un fond en image). Tout d'abord, il faut savoir que grâce au CSS3, vous pouvez appliquer plusieurs images de fond à un élément :
Code:
element {
   background: url("image1.png") no-repeat, url("image2.png") repeat-x;
}


Spécifications de la propriété background (eng)

Ainsi, il faudra ajouter ces images non pas dans l'interface d'image "fond" de ForumActif que nous avons vu plus haut dans l'image de présentation, mais directement dans le CSS, sur la balise body. Pour ça, rendez-vous dans votre panneau d'administration → Affichage → Couleurs → Feuille de Style CSS.
Votre code serait alors celui-ci :

Code:
body {
   background: url("imageHeader.png") no-repeat center top,
          url("imageDeFond.jpg") repeat 0 0;
}


Mais venons-en au choix (ou la création) de l'image "header" en elle-même. Là encore, le redimensionnement n'est pas foncièrement une bonne idée, pour les mêmes raisons que plus haut... L'utilisation d'un fond prévu pour être répété est grandement conseillée. En revanche, il est possible de faire une image suffisament large pour la grande majorité des écrans (2600px de large), pourvu que sa taille reste légère à charger (chercher le meilleur compromis).

Le meilleur choix à mon sens reste de faire un header qui s'incruste parfaitement sur n'importe quel fond, c'est à dire sans "cassure" par rapport aux bords de l'image. Quelques exemples :


Tag header sur Never Utopia - graphisme, codage et game design Ltm-3ca12be
Sur cette image, le logo est le texte "Litanies des Terres Mortes", le fond est la couleur gris foncé unie, et le header est l'image d'arbre, dont les bords ont été gommés avec une brosse douce (Photoshop, ou n'importe quel logiciel d'image) afin que la rupture ne soit pas "brutale".

Tag header sur Never Utopia - graphisme, codage et game design Carbonsugar
Sur cette image, le logo est "*carbon sugar", le fond est le bois (vous l'avez reconnu !), et le header est le joyeux bazar.


Il n'y a rien de plus ici que cette simple séparation : fond, header, logo. Vous avez maintenant tous les codes nécessaires pour faire de même. Alors à vous de jouer. Wink


Petite note copyright


Le header de carbon sugar et l'image de l'arbre sont la propriété de leur auteur respectif.
Le site "Les Litanies de l'Ombre" m'appartient. Pour le reste, comme d'habitude : C'est gratuit.

Sparrow-style

Partie 5 - La Bannière - Mar 4 Fév 2014 - 14:01

Partie 5 - La Bannière





Ce sera une partie capitale et à juste titre : la bannière est à la fois ne point de départ et le coeur de votre design. C'est elle qui, généralement, représente le mieux le forum, son contexte, son ambiance, ses personnages ou son décors. Qu'elle soit placée normalement ou en fond de page, elle est votre première création, votre point de départ de tout le reste. Il est donc fatalement essentiel de prendre le temps pour cette réalisation, que ce soit au niveau du choix des formes, des couleurs, ou des images utilisées.
Cette partie ne concernera pas QUE la bannière, tout simplement car vous réaliserez vite que c'est impossible. En effet, plus vous avancerez, plus vous aurez envie de lier les éléments entre eux. Vous aurez donc la volonté de créer une bannière qui s'intègre bien dans un fond, une navigation collé ou intégrée dans la bannière, et ainsi de suite. C'est pourquoi j'ai abordé de nombreux points dans la partie "les fonds", sur les manières de les utiliser mais aussi de la cumuler. Cependant, j'aborderais à nouveau ici le principe de "bannière-fond" pour le détailler un peu plus, c'est pourquoi j'en donnais le lien dans la partie précédente.


Une bannière simple




Le "simple" ne signifie pas que votre bannière ne sera pas très travaillée graphiquement, mais juste qu'elle n'est pas soumise à des modifications dans sa mise en place. Une bannière simple sera posée via le panneau d'administration dans la partie "bannière" ou "logo"...et c'est tout. Cette image pourra cependant être rectangulaire, arrondie, contenant des éléments qui dépassent de son cadre (titre, personnages...) tout en étant placée tout à fait normalement et sans changement. Je ne peux pas réaliser un tutoriel graphique pour chaque type de bannière donc je vais simplement vous renvoyer à quelques uns que j'estime applicables pour des bannières.

On dit souvent que réaliser une bannière simple c'est comme faire une signature en plus grand. C'est en partie exact, mais en partie seulement car cela demande quelques adaptations. Le format étant plus grand, les détails devront être plus "fins" que dans une format signature, c'est pourquoi vous ne devez pas commencer une bannière en vous disant que cela prendra le même temps de travail que pour la réalisation d'une signature, et ce même si vous suivez un tutoriel de réalisation de signature que vous adaptez dans un format plus grand. Il est fréquent de voir du "vide" dans les signatures, lorsqu'il est volontaire et bien utilisé il est important et doit être là, mais lorsque ce n'est pas le cas cela laisse une impression d'inachevé. Dites-vous qu'avec une bannière, le risque d'avoir cette sensation de vide est d'autant plus grand que le format à remplir l'est aussi.

Quelques conseils si vous souhaitez adapter un tutoriel signature pour la réalisation d'une bannière :
1) Les signatures ne comportent souvent qu'un personnage, parce qu'elles offrent peu de place, mais si vous ne mettez qu'un seul personnage dans votre bannière, il faudra qu'il prenne beaucoup de place, et dans le cas contraire n'hésitez pas à en mettre plusieurs, par exemple trois avec un au centre de face et un de chaque côté de lui de face ou de trois quart vers l'extérieur. Les effets à appliquez sur un personnage seront les mêmes que sur trois, et si vous voulez vous simplifier la vie, dupliquer vos calques personnages pour masquer les originaux (juste une sécurité au cas où, pour les avoir toujours séparés) puis fusionnez vos trois (ou plus) personnages. Ainsi vous n'aurez qu'un calque et il sera peut-être plus facile de réaliser les effets décrits.

2) Même sur les signatures il est fréquent de voir une fond grossièrement smudgé et le personnage au centre en petit vaguement incrusté. Sur une bannière encore plus que sur une signature prenez le temps de réaliser les choses ! Un smudge ce n'est pas 10 secondes de "gribouillages" avec le pinceau pour étaler la copie de votre personnage. Plus vous prendrez de temps pour le réaliser, plus il sera "fin". Variez les tailles de pinceau, ses formes...

3) Concernant les Abstracts (C4D) c'est un peu la même chose : sur les signatures déjà il est fréquent de les voir posés comme ça, tels quels, sans aucun travail dessus. Un Abstract ou Fractal ne sert pas juste à combler les vides, il doit avoir une fonction dans la création, donner un mouvement, une couleur, un effet. C'est d'autant plus important dans une bannière car il verra encore mieux. Utilisez-les avec souplesse, ponctuellement, re-travaillez-les assez pour qu'ils se fondent dans la création. N'hésitez pas à les tourner, les réduire, les flouter, n'en prendre qu'un petit bout, etc...

4) Dans une signature, le texte doit être fondu dans le décors et il l'est souvent tellement bien qu'il en devient moins lisible. Ce n'est pas forcément une erreur, c'est aussi le format qui veut cela. Par contre, si le texte que vous voulez mettre sur votre bannière est le titre de votre forum, mieux vaut qu'il soit lisible ! Il faudra donc éviter de le cacher ou de mettre trop de "sous-texte" autour de lui. Généralement il est conseillé de mettre le titre + un sous-titre, avec des polices différentes et des tailles différentes. L'inconvénient d'avoir à faire un texte visible c'est que ses défauts de mise en forme, s'ils y'en a, se verront parfaitement bien. Vous n'êtes pas sans savoir que la mise en forme du texte est bien souvent la bête noire des débutants, ou même des avancés. Il en faut du temps pour arriver à mettre en forme un texte correctement, et ce même si l'on excelle dans les autres domaines. La typo' est à la base un aspect très particulier du graphisme, et très compliqué également. Le plus souvent nous massacrons la police/font d'origine en pensant bien faire. Pour être efficace dans vos typo' de bannière, je vous conseillerais donc de FAIRE SIMPLE, encore plus que pour une signature.

Une fois votre bannière réalisée, et quelle que soit sa forme précise, vous l'installerez simplement dans le panneau dans son emplacement normal et vous aurez l'un des deux schémas :


La différence est simplement le corps de page. Dans le premier cas vous en avez un, soit avec la couleur intérieure du cadre du forum (dans le PA > Couleurs), soit parce que vous avez réalisé un fond qui fait office de corps (cf. Partie prédécente). Dans le second cas vous n'avez pas de corps et simplement un fond de page (couleur, dégradé, motif...). Seuls les éléments ressortent de ce fond, donc votre bannière, navigation, catégories...

La première constatation à faire c'est que dans le cas où vous avez un corps de page, vous avez une marge entre le haut de votre bannière et le haut de page, ainsi que sur les côtés de la bannière entre celle-ci et le bord de votre corps :


D'un point de vue esthétique, il est plus agréable de ne pas avoir ces espaces-là.

Il est possible d'aligner la bannière à droite, à gauche, ou de la centrer. Il est rare de voir autre chose qu'une bannière centrée. C'est donc ce que je vous conseille de faire.
Pour choisir le positionnement de la bannière allez dans "Affichage" > "Page d'accueil" > "En-tête et navigation". Choisissez "centré".



Amélioration de la bannière simple : enlever les marges



Avant tout pensez à centrer la bannière.


Dans la stricte continuité de la partie précédente, voyons comment enlever ces marges. Celle du haut est très facile à supprimer, il vous suffit de bouger le bloc bannière. Quel est ce bloc ? Et bien dans le css du forum il porte d'id (=nom) : i_logo.
Nous allons donc noter dans le CSS :

Code:
#i_logo
{
margin-top: -19px;
}


Normalement ce nombre de pixel colle la bannière en haut de page, il peut avoir besoin d'être adapté d'un ou deux pixels.
Le "#" devant le nom du bloc est écrit car il s'agit d'une "id", et non d'une "class". Pour en savoir plus sur ces différences je vous engage à aller voir le Cursus codage, sinon retenez simplement qu'un élément ayant un nom en "id" s'écrit ensuite avec #  dans le css, alors qu'un élément ayant un nom en "class" s'écrira avec un point "."


Je précise également que ce code ne colle que la bannière en haut de page, si vous avez un souci avec le corps de page vous en saurez plus sur la manière dont il se compose et comment le bouger dans la partie suivante.

Pour enlever les marges se trouvant sur les côtés de la bannière c'est un peu plus compliqué, et si je ne détaille pas tout ici je le ferais en détail lorsque j'aborderais le corps, vous verrez donc bien plus clairement quel bloc se trouve où. Ce que je vais vous dire simplement maintenant c'est que les marges sur les côtés, tout le long du corps, sont imposées par un bloc s'appelant "bodyline". Il fait toute la hauteur de page et englobe tout nos éléments. Ce bloc possède par défaut une marge intérieure (padding) qui fait que même si vous mettez votre bloc de page à la même largeur que votre bannière, vous aurez toujours cet espace sur les côtés.
Pour l'enlever nous allons donc commencer par mettre la largeur de page de la même dimension que la bannière. Si votre bannière fait 900px de large, mettez donc 900px en largeur aussi :

Code:
.bodylinewidth
{
width: 900px;
}


Whow whow ! Attends tu nous parlais tout à l'heure d'un "bodyline", et là il s'est changé en "bodylinewidth" ?


Il ne s'agit pas du même élément en réalité et l'on ne peut définir la largeur qu'avec ce "bodylinewidth", comme son nom l'indique d'ailleurs (il signifie "largeur du corps de page"). Nous sommes obligés de mettre la largeur dans ce bloc-là. Par contre, les marges proviennent effectivement d'un autre bloc, contenu dans celui-ci, et que nous allons enlever maintenant :

Code:
.bodyline
{
padding: 0;
}


Avec ces deux codes cumulés, vous devriez avoir enlevé les marges droites et gauche qui séparaient votre bannière de la bordure du corps de page.
Je vous montererais où se trouvent les différents blocs dans la partie suivante, vous y verrez alors plus clair. Pour l'instant continuons avec notre bannière.


Rapprocher la navigation de la bannière


La navigation, qui fera l'objet d'une partie entière, est un élément difficile à placer et à mettre en forme. Elle ne doit pourtant pas être négligée puisque c'est elle qui assure en partie une bonne circulation dans le forum. Elle est souvent esseulée, parfois grossièrement mise en forme, et finalement on préfère mettre en forme les liens de façon esthétique sans lui attribuer d'image, et c'est probablement la solution la plus simple... Pourtant, il y a une solution pour la rendre agréable à l'oeil sans trop se prendre la tête, c'est de la coller à la bannière. Nous avons donc supprimé les marges en haut et sur les côtés de la bannière, voyons donc ce qui concerne le bas.
Le procédé est le même que pour le haut :

Code:
#i_logo
{
margin-bottom: -45px;
}


Le nombre dépend ensuite de votre navigation, de sa hauteur principalement, et de ce que vous voulez faire avec les deux blocs : bannière + navigation. Vous pouvez très bien décider de les faire se chevaucher par exemple, mettant les liens à moitié sur la bannière. Les solutions sont multiples et nous en verront bien plus dans la partie "navigation".


La désormais célèbre "bannière-fond"


Elle a été abordée dans la partie des "fonds" puisqu'elle est placée comme tel, mais c'est avant tout une bannière, c'est pourquoi je la détaillerais un peu mieux dans cette partie.
De quoi s'agit-il ?
Une bannière est normalement placée dans le corps de page, ce qui signifie que, si votre bannière fait 1500px de large, votre corps de page pourra pas faire moins que cette largeur, or c'est ennuyeux pour les personnes ayant des résolutions plus petites, et c'est le cas de beaucoup. Pourtant, afin de représenter au mieux l'univers du forum, surtout s'il s'agit d'un RPG, on est facilement tenté de faire grand. L'idée d'une bannière-fond est de placer cette bannière en fond de page pour qu'elle puisse faire la largeur que l'on veut sans pour autant déformer le corps qui pourra être plus étroit. La difficulté cependant est de savoir quelle largeur choisir pour cette bannière, car on trouvera toujours des résolutions qui seront plus petites et donc des visiteurs qui ne verront pas l'image en entier, mais aussi l'inverse : des résolutions plus haute qui verront eux la limite de l'image. Les bannière-fond se situent dans une moyenne de largeur entre 1000 et 1500px. Si elle est plus petite cela ne vaut pas le coup de la mettre en fond, et autant la mettre directement en bannière. Une image très large peut se faire, vous pouvez bien choisir la largeur que vous voulez, il faut juste savoir que plus une image est grande, plus elle risque d'être lourde et de faire ramer le chargement des personnes ayant une connexion basse. Cela étant, puisque une fois chargée le navigateur la stocke ce temps de chargement ne vaut que pour la première visite de la page. Il est relatif.

L'objectif dans cette réalisation c'est que la bannière puisse soit se prolonger avec un autre fond (cf. Background multiples), soit s'atténuer avec des bords flous en transition douce vers la couleur du fond de page.

Plus le format d'une création est grand, plus vous vous devez d'y passer du temps, d'une manière générale. Une signature peut être faite rapidement, bien que pour avoir de la qualité elle doive aussi représenter un certain nombre d'heure de travail, mais pour une bannière c'est vraiment quelque chose d'essentiel. Réaliser une bannière de taille normale (900px disons) avec un smudge grossier, des éléments entassés et quelques personnages à peine fondus (ou trop fondus...) est déjà fort dommage et abouti à quelque chose qui semble bâclé. Si cette bannière fait 1400px de large et qu'elle est réalisée de cette même manière elle donnera l'impression d'être encore plus brouillon et bâclée.
Il est parfois préférable de faire plus petit et plus "fin" au niveau du travail, même pour une bannière fond.

Je vous remet ici l'installation nécessaire pour une bannière fond :

Code:
body
{
background: url(image.jpg) top center no-repeat #000000;
}
#i_logo
{
height: 400px;
}

La couleur de fond est à adapter selon la vôtre, et la hauteur du bloc i_logo représente l'espace "vide" qui permettra de voir le fond, et donc votre bannière-fond. Cela permet également de conserver le lien vers l'accueil présent normalement sur la bannière.

Il est évidemment important d'enlever la couleur de fond de votre corps de page pour mettre une bannière fond ! Pour cela, allez simplement dans les Couleurs et laissez vide la case "couleur intérieure du cadre du forum".



Une bannière-fond originale ?


N'oubliez pas que, puisque votre bannière s'installe en fond, vous n'êtes pas forcé de la centrer. Vous pouvez l'aligner à droite ou à gauche, et donc prévoir dans la réalisation de votre image cet alignement. Voici un exemple :

Il suffit alors de placer votre image selon le positionnement prévu :

Code:
body
{
background: url(img.jpg) top left/right no-repeat #000000;
}
#i_logo
{
height: 400px;
}


Après tout cela, libre à vous de réaliser la bannière que vous voulez dans le positionnement que vous préférez, selon le type de design voulu. Voici quelques schémas d'exemples :








Quelques exemples concrets



Pour terminer, je vous propose quelques exemples de bannières aux formes originales ainsi que la façon dont elles ont été faites et mises en place. Cela peut vous aider à réaliser les vôtres et à constater qu'il ne faut pas se sentir bloqué par un corps de page ou croire qu'une bannière est forcément soit rectangulaire soit une bannière-fond.

Avant tout je tiens simplement à prevenir qu'il s'agit de mon travail que je montre, et non de créations que vous pouvez modifier à votre guise. La plupart de ces thèmes sont désormais en libre service, mais ils restent ma conception. Je les dévoile ici pour que vous puissiez avoir des exemples et réaliser les vôtres par la suite, et non retoucher ceux-là. Merci x).


Bleach Dream



Cette bannière est plutôt petite puisqu'elle fait 800x350px. Pourtant, elle comporte une forme orginale. Elle est en jpg ce qui signifie que la couleur de fond présente doit être la même que celle du corps de page. Cette bannière a été installée normalement dans l'emplacement prévu pour le logo dans la gestion des images, par contre elle doit être collé au haut de page.

Bleach Warudo



(Puisque nous sommes dans Bleach, autant y rester encore un peu^^). Voici cette fois une bannière-fond, comme vous deviez vous en douter. Cette image était donc placée en fond, mais n'était pas la seule en fond de page. En effet, puisqu'elle contient un dégradé, une seconde image de fond était nécessaire pour le faire se prolonger sur la largeur de la page. Pour mettre cette bannière il faut donc utiliser la méthode du BG multiple avec la bannière en premier (je rappelle que l'ordre de visibilité des images est le même que celui de la liste de leur lien dans le CSS) en haut, centrée et qui ne se répète pas. Puis en seconde image le fond, donc uniquement le dégradé, qui lui se répètera uniquement sur la largeur. La couleur de fond de page sera bien sûr le gris clair.
Suite à cela il ne faut pas oublier de créer l'espace vide en haut de page avec le "i_logo", et enlever la couleur intérieure du cadre du forum (dans Couleurs).

Académie divine (thème d'anniversaire)



Pour ce thème, la bannière ressemble à une bannière normale, placée à l'intérieur du cadre. En réalité, cette bannière a été placée en fond, puis prolongée en hauteur avec un corps-fond, comme expliqué à la partie précédente. Nous avons donc deux images, dans le même principe que pour la bannière juste avant, mais cette fois le second fond se répète en hauteur et non en largeur. Les deux doivent évidemment être centrés.

Owl & Jinx 2



Sur ce screen, il n'est peut-être pas évident de repérer comment sont faits les éléments, pourtant c'est très simple, il y a un fond tout à fait normal, et une bannière toute à fait basique. Les voici séparément :


Le fond est fait pour donner l'impression qu'il s'agit d'une autre image, comme une bannière plus grande, qui est placée sous le corps et dépasse sur les côtés. Elle est donc fatalement coupée aux extrémités mais dans le cas présent ce n'est pas choquant. La bannière, elle, vient de placer au milieu, dans le corps dessiné par le fond. Il faut enlever la marge en haut de la bannière et celles sur les côtés pour une meilleure esthétique, mais c'est tout. Pourtant le résultat ne semble pas vieux ou trop simple, l'ensemble est harmonieux, même avec une structure de base.

Star Wars "Newgen"



Dans le cas présent, la bannière n'est pas grande (880px de large) et elle constitue à elle seule non seulement une forme spéciale (comme dans le premier exemple avec Bleach Dream) mais aussi un début de corps original. En effet, l'espace entre les deux est une ellipse, déjà inclue dans la création. Pour installer cette bannière il suffit de mettre l'image dans l'espace prévu, tout à fait normalement. Pour la suite, il faut enlever la couleur de fond intérieure du cadre du forum, et installer en fond de page une image de fond qui prolongera votre bordure.

Rien de compliqué comme vous pouvez le voir, et pourtant toutes ces bannières sont plutôt originales, cela ne signifie pas forcément des heures de codage pour les inclure dans votre forum.

La bannière n'est pas si compliquée que cela à positionner, mais elle est étroitement liée au corps de page, puisque, de base, elle est inclue à l'intérieur et peut déterminer sa largeur. Nous allons donc passer à la partie suivante concernant ce fameux corps de page et les éléments qu'il contient.


Partie précédentePartie suivante

Dieu Du-Ciel

Header sous phpBB2 - Mar 28 Juin 2011 - 12:31



Édit responsable : Le code a été un peu modifié pour ne pas être aussi barbare.

Bonjour les gens alors voilà après de multiples recherche je viens de trouver sur un site étranger comment ajouter un header (haut de page) sous phpBB2, donc je le partage. Pour ceux qui ne savent pas de quoi je parle, le header sera une image/couleur de fond derrière le logo.

Dans les templates:

"overall_header", et cherchez :

Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->


et remplacer le table par:

Code:
<table class="headerbar" width="100%" cellspacing="0" cellpadding="0" border="0">


Enregistrez et Publiez votre template, puis allez dans votre CSS (couleur et feuille de style CSS) et collez sa:

Code:
.headerbar {
background-attachment: fixed;
background-color: #color;
background-image: url("adresse_url_de_l'image_de_fond");
background-repeat: repeat;
background-position: top left;
}


background-attachment:
- Pour que l'image ne défile pas lorsque vous descendez, inscrivez fixed
- Pour que l'image défile lorsque vous descendez, inscrivez scroll

background-color:
-La couleur de fond que vous souhaitez attribuer à la zone

background-image:
-Lien direct de votre image

background-repeat:
- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y

background-position:
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez center
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center

Voilà il me reste à trouver les bordure gauche/droite

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Profiter de plusieurs bannières (ou bannières aléatoires) - Dim 15 Mai 2011 - 12:19



Salut les membres :) !

Aujourd'hui je vous propose d'installer sur votre forum un système permettant d'avoir plusieurs bannières, changeantes à chaque page que vous visitez (et en actualisant les pages bien sûr).

Tout d'abord rendez-vous dans votre panneau d'administration puis dans la gestion des images.
(Panneau Ad. > Affichage > Gestion des images > Mode avancé)
Vous placerez la première bannière que vous aurez faite dans 'logo du forum'.

Ensuite, rendez-vous dans la gestion des pages HTML.
(Panneau Ad. > Module > Gestion des javascripts -tout en bas-)
Assurez-vous d'avoir activé vos javascript.
Créez un nouveau javascript et mettez-y comme titre 'Bannière Aléatoire'. Choisissez le placement "Sur toutes les pages".
Ensuite collez-y ce code :

Code:
$(function(){

  var banner = new Array();

  banner[0] = "URL IMAGE 1";
  banner[1] = "URL IMAGE 2";

  $("#pun-logo img,#i_logo,#logo img").attr('src', banner[Math.floor(Math.random()*banner.length)]);
});


L'url de l'image de "banner" 0 devra être celle de votre première bannière. Quant à l'url de "banner" 1, elle devra être votre deuxième bannière. Personnellement je vous conseil de faire les bannières de la même tailles, comme montrées dans l'exemple.

Vous pouvez bien sûr rajouter des bannières, il vous suffit de copier ce code :
Code:
banner[X] = "URL IMAGE";

En remplaçant X par le numéro de la bannière moins 1. Donc le X sera 2 pour la troisième bannière, le X sera 3 pour la quatrième bannière et ainsi de suite.

Vous pouvez bien entendu placer autant de bannières que vous voulez ! Vous pourrez bien entendu modifier les URLs comme bon vous semble. Enregistrez votre javascript et ce sera bon !

Si vous avez des questions, n'hésitez-pas ^^

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

[Template] Barre de navigation au dessus du header/logo - Dim 1 Aoû 2010 - 12:00



Salutation N'Utopien / N'Utopienne!!!

Ce petit tutoriel vous permettra de placer votre barre de navigation au dessus de la bannière.

Niveau: Facile Aperçu: Ici Fonctionne qu'avec les versions phpbb2 et punbb


Vous êtes sur votre forum c'est bon? Alors commencer à allez sur votre panneau d'administration -> Affichage -> Template : Général -> Entrez dans le template Overall_header.

Descendez vers le bas du code et copiez cette partie du template:

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table><br />


Remontez maintenant un peu plus haut et déplacez le code après cette partie:

Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">


Ce qui vous donnera ça:

Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table><br>


|!| A noter que j'ai ajouté un saut de ligne
Code:
<br>
à la fin pour qu'il y ait un espace entre la bannière et la barre de navigation.


Et voila!! Une fois le code placé au bon endroit, il ne vous reste plus qu'à valider puis à confirmer la validation en cliquant sur la croix verte Tag header sur Never Utopia - graphisme, codage et game design Ajouter


C'est terminé, j'espère que ce tutoriel vous aura aidé et qu'il sera compréhensible pour tous.

Bonne chance Wink.

Autre tuto qui va avec celui-ci:

[CSS] Barre de navigation


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 15:05