Gérer SP Page Builder

[gouyasse]

Bonjour,

voici ma configuration:
- Helix Ultimate
- SP Page Builder Pro
- Joomla 3.9

Question peut-être un peu basique mais utile lorsqu'on est débutant :-)
Je travaille avec une image de fond définie dans Helix mais je trouve que l'affichage de la page est un peu étroite au bénéfice de l'image de fond qui "déborde" trop largement à mon goût tant à gauche qu'à droite de la page.
Je souhaiterais donc savoir s'il est possible d'élargir l'affichage de la page.

J'espère que mon propos est suffisamment clair
Merci pour votre aide

[Colnem30]

Salut

Sur le principe, c'est possible.
Il faut créer un fichier custom.css qui soit, au départ, une copie de ton fichier template.css (tu ne nous dis pas quel est le template que tu utilises), puis jouer sur les règles padding ou margin des balises qui contiennent l'ensemble de ton contenu (ne serait que body par exemple)...

Dans le détail, difficile de répondre sans avoir au moins l'adresse de ton site.
Tu peux t'aider de l'outil de développement de ton navigateur.

[tataye]

si tu utilises helix ultimate : insères tes css personnalisées dans la zone dédiée du template
aurais tu une url à nous fournir ?

[gouyasse]

Merci à vous deux pour les suggestions.
Comme indiqué,j'utilise Helix Ultimate et donc si j'ai compris, je dois travailler sur le fichier " css/template.css" ?

Là c'est un sérieux défi pour un apprenti :-) mais je vais m'y coller car je voudrais bien avancer dans le layout de ma page. Je vais d'abord prendre soin de faire une copie du site au cas où...

A noter enfin que je travail en local et donc pas d'URL à donner pour l'instant.

[tataye]

tu vas devoir faire des surcharges de css :
ton template ( ce n'est pas le cas de tous ) a prévu une zone de css personnalisée :
tu vas dans ton style de template / template options / custom code / custom css


là , tu colles tes css , uniquement celles que tu veux remplacer
puis tu sauves.
normalement ces css sont chargées après le template, et donc prennent le pas sur les css du template

[gouyasse]

Un grand merci pour ton aide, c'est déjà plus clair mais il me reste à trouver l'élément qui contient le padding à modifier dans la masse de donnée CSS du template...
Je pensais avoir trouvé en identifiant le "container" mais l'essai n'a pas été concluant.

Bref, je tourne en rond (:-

[abmag]

Utilises-tu les outils dev de ton navigateur ?

[tataye]

Un grand merci pour ton aide, c'est déjà plus clair mais il me reste à trouver l'élément qui contient le padding à modifier dans la masse de donnée CSS du template...
Je pensais avoir trouvé en identifiant le "container" mais l'essai n'a pas été concluant.

Bref, je tourne en rond (:-

dis voir ce que tu veux faire exactement, et si tu avais une url ce serait encore mieux

[lomart]

Je pensais avoir trouvé en identifiant le "container" mais l'essai n'a pas été concluant.

il me semble que c'est la classe g-container
Attention la règle doit tenir compte des différentes largeurs d'écran.
Il faut utiliser des mediaqueries en identifiant les breakpoints utilisés par le template
Ce pourrait être :

.g-container{width:75rem}
@media only all and (min-width: 30.01rem) and (max-width: 47.99rem) {.g-container{width:30rem} }
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {.g-container{width:48rem}}
@media only all and (min-width: 60rem) and (max-width: 74.99rem) {.g-container{width:60rem}}

Le css d'Helix définit les largeurs par palier. Ce n'est pas évident

[lomart]

Bonjour,
Du fait de la difficulté des largeurs par palier, il serait peut-être possible de tester ces règles

.g-container { width: 90vw !important; }
@media only all and (max-width: 30rem) {.g-container{width:100% !important} }

Cela va forcer la largeur à 95% de la largeur totale sauf sur mobile à 100%
Attention, il risque de se produire des effets de bords qu'il faudra gérer

[gouyasse]

Merci à tous pour votre intérêt.
Voici un extrait de ma page d'accueil. Vous voyez que la page est délimitée par des flèches que j'ai placées sur l'extrait.
Mon souhait est de pouvoir agrandir cette page tout en conservant l'image en background mais je trouve que celle-ci prend trop de place et influence le visuel.

==>@Iomart,
J'ai testé vos proposition mais sans succès. J'ai copié tout le code dans notepad afin de rechercher "g-container" à l'aise mais je n'ai rien trouvé. Je ne trouve que "container"

==>@abmag
j'ai déjà utiliser le mode "inspecter" à de multiples reprises mais si je vois bien le lien entre la page et le code, j'ai encore du travail avant d'y trouver mon bonheur

==>@tataye
je suis toujours en local pour l'instant mais d'ici peu je mettrai le site en ligne car je comprend que cela aiderait grandement à mieux comprendre le problème que j'expose. Entretemps je mets une photo d'un extrait afin d'illustrer ce que je souhaite.

[lomart]

#sp-main-body

==>@Iomart,
J'ai testé vos propositions mais sans succès. J'ai copié tout le code dans notepad afin de rechercher "g-container" à l'aise mais je n'ai rien trouvé. Je ne trouve que "container"

C'est normal, j'ai confondu 2 templates.
Helix Ultimate que j'utilise sur mon site up.lomart.fr gère la largeur de cette façon

 @media (min-width: 1200px) { .container {max-width: 1540px;}}
@media (min-width: 992px){.container {max-width: 960px;}}
@media (min-width: 768px){.container {max-width: 720px;}}
@media (min-width: 576px){.container {max-width: 540px;}}
.container { width: 100%;
padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}

Il faut donc surcharger le css en indiquant la largeur maxi admise, mais c'est pas facile
une autre solution est de forcer la largeur de .container à 100% avec un padding sur #sp-main-body

 @media (min-width: 1200px) { #sp-main-body {padding: 30px 50px;}}
@media (min-width: 992px){#sp-main-body {padding: 30px 40px;}}
@media (min-width: 768px){#sp-main-body {padding: 30px 30px;}}
@media (min-width: 576px){#sp-main-body {padding: 30px 20px;}}
.container { width: 100%; max-width:100% !important;
padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}

Non testé, mais le principe est là

[gouyasse]

Bonjour à tous,
le résultat n'est pas au rendez-vous et je me rend compte que je passe de plus en plus de temps sur un élément qui n'est pas le plu important.
Je vais plutôt me concentrer sur la partie Hikashop et revenir sur ce sujet lorsque me site sera en ligne.

merci encore pour votre intérêt

[tataye]

tu mettrais ton site en ligne, sur un hebergement de test, nous pourrions voir de quoi tu parles.
tu pourrais même donner un accès à quelqu'un