[EDGE] Ajouter une bannière

[ren]

• Version du forum :
  EDGE
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Bonjour

J'ai une petite requête , je sais pas si c'est faisable .

J'essaie d'améliorer l'aspect visuel de mon forum et je voudrais ajouté cette bannière . Mais garder les couleurs sur le bandeau . j'ai fais une image png transparente mais je sais pas comment faire pour quelle utilise toutes la largeur de la page .

https://i.imgur.com/dy2HvmE.png

Si vous pouviez me dire où je peux ajouter ou modifier un peu de code . Merci beaucoup

Le résultat est dégueulasse si je laisse directement l'image https://imgur.com/bRgOzd7.png

[Milouze14Fondateur]

Coucou ren,
très joli avatar .
Alors, pourquoi ne déposes tu pas cette image à la place de ton logo actuel ?

Test avec le lien de cette image:
https://i.servimg.com/u/f20/20/11/87/27/linux10.png

[ren]

Ça ne s'adapte pas . Ça fait pas beau . On voit le bord de l'image . Je voudrais que ça occupe toutes la partie colorée mais sans augmenter la hauteur ( je peux adapter l'image après )
Actuellement j'ai une image " Linux > Windows " qui est centré , mais elle ne fait pas toute la largeur de l'écran . Elle est plus petite .

[Milouze14Fondateur]

Hum, cela risque d'être compliqué ren, mais on va essayer.
Dans un premier temps.
On va dire que l'image doit être à 100% de la largeur.

Ou as tu déposé le lien des 2 images stp ?


Ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


   #logo img{width:100%;}


Penser a cliquer sur le bouton

[ren]

Oui j'ai pris ton lien et ca ne change rien . Regarde mon forum tu va comprendre .

[Milouze14Fondateur]

Tu n'as pas ajouté la c.s.s/
https://www.milouze14.com/t33033-edge-ajouter-une-banniere#630131

Ensuite en yant les deux mêmes formats d'image on peut faire un hover car le reste me parait compromis si tu désires avoir les deux images!!

[ren]

quelles deux images ? il y en a qu'une seul .
Oui j'ai ajouté le code

[Milouze14Fondateur]

Je ne vois pas la css dans la console du navigateur ren!!
Ok je pensais que tu désirais avoir les deux cumulées.

[Milouze14Fondateur]

Je reviens plus tard chère amie .

[ren]

il est là  : https://imgur.com/pL9A7lN.png

pas de soucis , c'est pas urgent . Merci beaucoup très cher :)

[Milouze14Fondateur]

Hum, c'est un peu le soucis de EDGE, places le code donné juste avant :

Code:

/*!FAE_COLORS*/

[Milouze14Fondateur]

Si tu as trop de soucis, merci de me donner un accès admin sur ton fofo ren,
rassures toi, je le fais très très très très souvent ici .

Et tout cela en MP s'il te plait.

[Milouze14Fondateur]

Coucou ren,
merci pour les ids,
alors j'ai modifié le padding de la div qui englobe le logo(bannière) :

Auparavant

Code:

#logo-desc{padding:60px 30px 30px 30px}

Tu avais donc un espace de 30px de chaque côté.
Désormais modifié ainsi, tu n'auras plus ce soucis.

Code:

#logo-desc{padding:60px 0px 30px 0px}

L'image de ton ancien lolo:
https://i.imgur.com/Ahk9x9y.png

J'en ai profité pour mettre des commentaires pour que ce soit plus explicite.
Alors pour ton image, c'est pas très chouette mais j'ai ajouté un height de 180px à l'image afin de te faire voir le rendu :
Donc si la hauteur te convient, il faut donc avoir une image qui fasse aussi 180px.
Une fois l'image créée il faudra supprimer le height dans la css

Code:

  /*LE LOGO*/
#logo img{width: 100%;height: 180px;}  

Juste une question!!
Tu as crée une class element ?

Code:

.element {font-family: 'Ubuntu', sans-serif;}

Je t'ai donc créé une page html ou tu pourras déposer de la c.s.s



Si tu veux en ajouter d'autres, il faudra cliquer sur le petit engrenage qui au survol t'affiche une petite infobulle mentionnant "Modification en mode avancé (HTML)" .



J'ai déjà placé une bonne partie dans cette page afin de libérer de place dans la feuille de style:tatatff: .


Si tu as d'autres questions, n'hésites pas ren   .

[ren]

whaou ! mais comment t'es un chou !

Merci beaucoup , je vais travailler sur l'image maintenant .

Code:

.element {font-family: 'Ubuntu', sans-serif;}

oui j'avais lu sur le fofo officiel , qu'il fallait la rajouter pour avoir la police d'installer , mais je n'utilise plus ubuntu directement maintenant . Je l'a vire ?

EDIT : Bon j'ai tout essayé , mais rien ne fonctionne . j'ai créé une image 180px de haut , j'ai enlevé la partie du code 180px , j'ai remis , retiré à nouveau . Mais c'est toujours pareil .l'image ne remplie pas toutes la partie colorée .
https://imgur.com/jrQJ1BC.png
regarde en dessous de l'image il y a une partie sans . Je penses que l'on peu pas en mettre là .

[Milouze14Fondateur]

Alors, tout d'abord merci pour le compliment chère amie.

Ah non, ne l'a vire pas , testes avant ceci:
Pour avoir la police Unbuntu il faut changer .element par body:

Code:

.element {font-family: 'Ubuntu', sans-serif;}

Par:

Code:

body{font-family: 'Ubuntu', sans-serif;}

Je dois être idiot mais je ne comprend pas réellement ce que tu souhaites ren?
L'image pour moi prend bien toute la largeur 100% .

Peux tu m'éclairer avec une capture ce que tu souhaites réellement?

[ren]

Pour la police d'écriture  en faite j'ai choisie une autre . Est ce que je dois ajouter l'élément de cette nouvelle police ?

Oui je vais te faire un montage de ce que je souhaite . Merci vraiment beauuuuuucouuuup pour ton aide .


EDIT : Dans le FA Controle de EDGE :
J'ai mis ca 'Ubuntu', sans-serif,'Lato', sans-serif, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif dans Police Principal
Ca dans Police de titre : 'Ruda', sans-serif,'Ubuntu', sans-serif,'Lato', sans-serif, Trebuchet MS, Arial, Verdana, Sans-serif

et ca dans police de code : Source Code Pro', monospace',Lato', sans-serif, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Lucida Console, monospace

ce sont des polices ( pour les premieres , les autres étaient déjà là ) spécialement pour Linux.

Du coup je dois ajouter les éléments dans le css pour chaque polices que j'ai ajouté et désire voir installer directement sur le forum pour ceux qui ne les ont pas sur leur pc ?


Re Edit : https://i.imgur.com/vuC4adE.jpg voila l'image . Toutes la partie verte doit être rempli par cette image https://i.imgur.com/5bdMCyQ.png
ou une équivalent ( en fonction de la hauteur ) .
Les textes Linux & Me + description doivent rester puisque çà s'affiche via les informations .
Voila j'espère que c'est plus claire .

[Milouze14Fondateur]

Ok merci pour la capture ren,

Du coup je dois ajouter les éléments dans le css pour chaque polices que j'ai ajouté et désire voir installer directement sur le forum pour ceux qui ne les ont pas sur leur pc ?

Hum non normalement tout devrait être bon désormais .

[ren]

Suis désolée de te saouler avec mes problèmes un jeudi férié . :(

[Milouze14Fondateur]

Ah si tu me saouler avec tes demandes,
je ne serais pas là .

[Milouze14Fondateur]

Je me sauve et reviens en fin d'après midi ren.
Tu veux pas afficher ton prénom, c'est plus sympa ainsi.
Pour ma pomme c'est Phil.

[ren]

Je suis très prudente avec ma vie privée , je partage le stricte minimum , mais comme j'avais sur d'autre forum divulgué mon prénom , je peux donc le faire ici également .

Enchantée Phil , moi c'est Marie

Edit : Phil dis voir , la fonction des Hashtags que j'avais ajouté ne fonctionne plus . J'ai vu que tu l'avais déplacé et arrangé dans un nouveau css . Tu pourrais y jeter un oeil ? C'est une fonction trés importante pour le classement et retrouver des tutos pour moi :)

[Milouze14Fondateur]

Enchanté Marie, c'est un très joli prénom et merci d’avoir fait le pas.
Alors, tu n'as plus besoin de ce script car Forumactif fourni déjà ce service en tapant un hastag dans l'éditeur .

[ren]

On s'éloigne du sujet là , mais je vois pas le bouton # , avant avec le script je l'avais . Bon c'est pas super grave .
Edit : J'ai remis le code d'origine ( en vertical ) et cela refonctionne .

[Milouze14Fondateur]

Oui, c'est une évidence que l'on s'écarte du sujet Marie .
On part du bannière etc etc.

Il faut juste taper le hashtag dans l'éditeur et le mot clé et hop tu as tout.

Bref est-ce résolu chère amie?

[ren]

Concernant le # oui
Concernant la Bannière à 90% , mais je penses que l'on ne pourra pas faire mieux , que la partie du titre et information est dans un cadre à part . Je vais bidouiller une image avec un fondu vers le bas pour éliminer la délimitation .

Si tu veux je passe le sujet à résolu ?