Page d'accueil sur toute la largeur

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Page d'accueil sur toute la largeur

Message par Laférosse Jeu 30 Juin 2022 - 10:10

Bonjour, j'aimerai, si possible, que mon image en page d'accueil prenne toute la largeur du forum. J'aimerai également supprimer la bordure/contour gris clair, de fond, autour de l'image.
Merci par avance.

Page d'accueil sur toute la largeur Zyfh

Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Ven 1 Juil 2022 - 11:15

:up:
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Sam 2 Juil 2022 - 10:18

:up:
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'accueil sur toute la largeur

Message par Oka.mi Sam 2 Juil 2022 - 22:42

Bonjour,

Vous pouvez ajouter ceci dans votre feuille de style css.
Code:
#wrap {max-width: none; width: 100%;}
.block .block-content {box-shadow:none;}
.block .block-content img {width: 100%;}
Cela permet de retirer la largeur maximale de l'élément wrap qui correspond en gros au corps de votre forum (fixée à 1200px). La deuxième ligne c'est pour retirer l'ombre sur le bloc de la page d'accueil qui contient votre image. La troisième ligne dit à l'image d'occuper 100% de la largeur du bloc.


Page d'accueil sur toute la largeur 1213Donnez un titre explicite Page d'accueil sur toute la largeur VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Page d'accueil sur toute la largeur 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Page d'accueil sur toute la largeur FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Dim 3 Juil 2022 - 11:03

Bonjour Oka.mi, merci beaucoup mais ce n'est pas tout à fait ce que je voulais. Je ne désire pas élargir le corps du forum, juste l'image mise dans le bloc accueil. ( elle doit prendre toute la largeur comme le header). Avec votre code, j'ai toujours une marge à gauche et à droite. J'ai laissé votre code pour que vous puissiez voir le résultat sur mon forum. Du coup, j'ai également, la prévisualisation des sujets qui se trouvent déformés (tout agrandis et pixellisés) et mes catégories/forums se sont décalés.

Page d'accueil sur toute la largeur 2d02
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Mar 5 Juil 2022 - 10:15

Bonjour, j'ai supprimé le code qui déforme mon forum parce que c'est fatigant de naviguer à travers une loupe. Very Happy
Je rappelle :
Je désire mettre, uniquement, mon image qui se trouve dans le bloc accueil, sur toute la largeur comme le header et supprimer le contour/cadre gris du fond. Merci.
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'accueil sur toute la largeur

Message par Oka.mi Mar 5 Juil 2022 - 16:18

Bonjour,

En fait pour cibler uniquement votre bloc accueil, il faut le sortir du "wrap" (corps du forum) via JavaScript, car actuellement, il se trouve dedans et est donc limité par sa largeur maximale (max-width). Raison pour laquelle je vous ai fait retirer cette limite via css.
Étant donné votre retour, nous allons donc faire un ajout JavaScript pour placer l'élément du bloc accueil avant le wrap.
Code:
$(function(){
  $('#wrap').before($('.block.introduction'));
});
Le code est à ajouter dans Modules > HTML & JAVASCRIPT > Gestion des codes Javascript > Créer un nouveau JavaScript.
Le placement à cocher est "sur l'index".

Ensuite, comme vous ne voulez pas toucher au wrap et qu'on n'a de toute façon plus besoin de toucher au wrap vu qu'on a sorti le bloc accueil de son contenant, on va pouvoir retirer la ligne css correspondante.
La nouvelle version du code css à mettre est donc :
Code:
.block .block-content {box-shadow:none;}
.block .block-content img {width: 100%;}


Page d'accueil sur toute la largeur 1213Donnez un titre explicite Page d'accueil sur toute la largeur VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Page d'accueil sur toute la largeur 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Page d'accueil sur toute la largeur FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Mar 5 Juil 2022 - 20:57

Merci Oka.mi, il reste à supprimer les marges, entre le header et l'image accueil, puis celles à gauche et à droite svp.

Page d'accueil sur toute la largeur 1lmp
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'accueil sur toute la largeur

Message par Oka.mi Mar 5 Juil 2022 - 21:25

Pour cela, on retire la marge du bas sur la bannière (header-banner) et on retire le remplissage / padding autour du bloc accueil (block-content).
Ce qui donne, en reprenant le css précédemment donné :
Code:
#header-banner {margin-bottom: 0px;}
.block .block-content {box-shadow:none; padding: 0px;}
.block .block-content img {width: 100%;}


Page d'accueil sur toute la largeur 1213Donnez un titre explicite Page d'accueil sur toute la largeur VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Page d'accueil sur toute la largeur 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Page d'accueil sur toute la largeur FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'accueil sur toute la largeur

Message par Laférosse Mar 5 Juil 2022 - 21:57

C'est parfait. Merci infiniment Oka-mi, vous êtes au top. Yes
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum