Jump to content

Slider : mise en forme du texte

wio
 Share

Recommended Posts

wio Rookie

wio

Posted
Posted

Bonjour,

Je souhaite centrer le texte affiché sur le slider de la page  d accueil (Prestashop 1.7) . Or il est systématiquement affiché à droite, impossible de le centrer alors qu'il est bien en position centré dans le CMS.

Code source dans la rubrique "Description" : <h4 style="text-align: center;">Abonnement Box Champagne - Carte Cadeau</h4>

Affichage : https://bullesdemotion.com/fr/

Auriez-vous la solution pour centrer le texte ?

Merci de votre aide 🙂

Link to comment
Share on other sites
Divine Experienced

Divine

Posted
Posted

Bonjour,

Ohlala il faut vraiment revoir la hiérarchisation des balises Hn hein !...

Bref, pour centrer ce texte il faut ajouter ce code CSS dans votre fichier "custom.css" : 

.image-slider-block .caption .caption-description {
  float: none !important;
  margin: 0 auto !important;
}
  • Thanks 1
Link to comment
Share on other sites
MEG Venture Collaborator

MEG Venture

Posted
Posted (edited)

Probably the theme.css

As cache is enabled, I can't detect which file it is. Update the CSS as below. 

.image-slider-block .caption .caption-description {
    /* display: block; */
    /* max-width: 425px; */
    /* width: 100%; */
    text-align: center;
    /* float: right; */
    /* margin-right: 180px; */
}
.image-slider-block ul>li:first-child .caption .caption-description {
    /* float: left; */
    /* margin-left: 180px; */
    /* margin-right: 0; */
}

Or, you can work on the custom.css as @Divine mentioned...

Edited by MEG Venture (see edit history)
  • Thanks 1
Link to comment
Share on other sites
wio Rookie

wio

Posted
  • Author
Posted

Merci @divine et @Meg d'avoir pris le temps d'investiguer.

Pourriez-vous m'indiquer à quel endroit du fichier custom.css faut-il intégrer les nouvelles lignes ?

 .image-slider-block .caption .caption-description { figure sur plusieurs lignes

 

Link to comment
Share on other sites
MEG Venture Collaborator

MEG Venture

Posted
Posted

You just need to add the new lines below to the custom.css 

.image-slider-block .caption .caption-description {
    display: unset !important;
    max-width: unset !important;
    width: unset !important;
    float: unset !important;
    margin-right: unset !important;
}
.image-slider-block ul>li:first-child .caption .caption-description {
    float: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}

 

  • Thanks 1
Link to comment
Share on other sites
wio Rookie

wio

Posted
  • Author
Posted
2 hours ago, MEG Venture said: 
.image-slider-block .caption .caption-description {
    display: unset !important;
    max-width: unset !important;
    width: unset !important;
    float: unset !important;
    margin-right: unset !important;
}
.image-slider-block ul>li:first-child .caption .caption-description {
    float: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}

Great ! Tx a lot !!

  • Like 1
Link to comment
Share on other sites
wio Rookie

wio

Posted
  • Author
Posted
4 hours ago, Divine said:

Bonjour,

Ohlala il faut vraiment revoir la hiérarchisation des balises Hn hein !...

Bref, pour centrer ce texte il faut ajouter ce code CSS dans votre fichier "custom.css" : 

.image-slider-block .caption .caption-description {
  float: none !important;
  margin: 0 auto !important;
}

Merci @Divine. Pourriez-vous m'en dire plus sur la hiérarchisation des balises ?

J ai utilisé la rubrique "titre" du slider qui est en H1 - Pour la description, je l'ai mise en H4. 

Qu'en pensez-vous ?

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
Il y a 3 heures, wio a dit :

Merci @Divine. Pourriez-vous m'en dire plus sur la hiérarchisation des balises ?

J ai utilisé la rubrique "titre" du slider qui est en H1 - Pour la description, je l'ai mise en H4. 

Qu'en pensez-vous ?

Il manque H2 et H4, car c'est basiquement le principe, un h2 après un H1, un h3 après un H2, ainsi de suite.

  • Thanks 1
Link to comment
Share on other sites
Divine Experienced

Divine

Posted
Posted

Il faut penser à l'optimisation de votre boutique. Par exemple, quand on vous propose, comme dans ce post, un code de 4 lignes et un code de 12 lignes qui font la même chose, mettez en place le code de 4 lignes...

Quant à vos balises Hn, il n'y a qu'à voir la hiérarchisation de votre page d'accueil pour constater le souci :

screenshot.thumb.png.07ebb4a7a2c9d43f57fb8a829bca2d2b.png

  • Thanks 1
Link to comment
Share on other sites
  • 2 weeks later...
wio Rookie

wio

Posted
  • Author
Posted

Bonjour

je reviens sur le sujet car les modifications suggérées ont bien permis de résoudre la mise en page.

En revanche, en faisant un audit, il semble que ceci pénalise le SEO. Voici ce qui est indiqué :

Votre page semble utiliser des styles inline.

text-align: center;

Les styles inline sont une pratique de codage obsolète et sont déconseillés en faveur des feuilles de style CSS, en raison de leur capacité à dégrader les performances de chargement des pages et à compliquer inutilement le code HTML.

 

Je préfère l'indiquer pour informer les autres utilisateurs, avant de procéder à la modification du fichier custom.css

Bonne journée,

Link to comment
Share on other sites
wio Rookie

wio

Posted
  • Author
Posted
On 11/1/2024 at 8:41 PM, MEG Venture said:

Probably the theme.css

As cache is enabled, I can't detect which file it is. Update the CSS as below. 

.image-slider-block .caption .caption-description {
    /* display: block; */
    /* max-width: 425px; */
    /* width: 100%; */
    text-align: center;
    /* float: right; */
    /* margin-right: 180px; */
}
.image-slider-block ul>li:first-child .caption .caption-description {
    /* float: left; */
    /* margin-left: 180px; */
    /* margin-right: 0; */
}

Or, you can work on the custom.css as @Divine mentioned...

Marci mais il semble que ceci pénalise le SEO. Voici ce qui est indiqué dans le récent audit du SEO  :

Votre page semble utiliser des styles inline.

text-align: center;

Les styles inline sont une pratique de codage obsolète et sont déconseillés en faveur des feuilles de style CSS, en raison de leur capacité à dégrader les performances de chargement des pages et à compliquer inutilement le code HTML.

Link to comment
Share on other sites
Divine Experienced

Divine

Posted
Posted

Les modifications qui vous ont été suggérées étaient à effectuer dans un fichier CSS, ce que vous avez fait il me semble. Il ne s'agit pas de styles inline. Les styles inline sont des codes CSS intégrées dans le code HTML. Donc si l'audit SEO vous indique cela, cela ne concerne pas le code qui vous a été donné ici mais plutôt du code que vous auriez ajouté via un éditeur en back-office par exemple.

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

Sauf si le custom.css de son thème n'est pas compilé.

C'est exactement le même problème pour tous ceux qui utilisent Elementor, ça génère des pages infâmes avec plein de styles inline...

Link to comment
Share on other sites
Divine Experienced

Divine

Posted
Posted

Même si le custom.css n'est pas compilé, ça reste du code CSS dans un fichier CSS et pas du code CSS intégré à l'arrache dans du code HTML. Ce n'est pas du style inline.

Je suis d'accord avec toi pour Elementor (d'ailleurs j'aimerais bien que les gens cessent d'utiliser cette m****) mais en l'occurrence, je pense que c'est plutôt le "text-align:center" intégré sur la balise H3 dans le code HTML (sûrement depuis un éditeur ou Elementor oui...) qui est concerné.

Link to comment
Share on other sites
wio Rookie

wio

Posted
  • Author
Posted

pour votre information, ce site a été mis à niveau par un professionnel. J ignore s il a ou non utilisé Elementor

Le texte ajouté pour centrer le paragraphe l'a été dans le fichier custom.css depuis le CPanel

Merci

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...