• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 26.02.25, 12:00
  • Opened by: Lorenzo Milano

Ticket #25964 - Wrong font and text format in product page (also for product tabs module)

Hello there, something I didn’t quite understood is how to make text uniform in details tabs and promokit additional tabs. For product description issue is mainly about how the text renders (font, size and color), for text in the additional tabs it ignores spaces (<br>) and format is wrong as per description.

This is a product you can check:

ID: 77
https://new.bracerialatradizione.it/home/77-61-t-bonefiorentina-1kg-ca.html#/36-peso-500gr_ca

Attachments:

Immagine 2025-02-26 115749.png (128.6 KiB)
Immagine 2025-02-26 115802.png (308.6 KiB)
Immagine 2025-02-26 115815.png (105.8 KiB)
Immagine 2025-02-26 115835.png (53 KiB)

Comments

Fred 26 Feb 2025, 23:23

Hi, Lorenzo.
Yes, I understand the problem. There is a difference in back office and front pages styles. You can try to apply styles specifically for elements selecting a text, clicking on Source Code button and adding your styles to an element https://mega.nz/file/BE5hxTrS#B7iAzOs3BS4SRkjgZDzWusxWGuKea6lAhQFJ2ysuY7o

To make spaces just add following CSS to the Theme Settings → Customer CSS 

.tabs .tab-pane p {
  margin-bottom: 10px !important
}
Lorenzo Milano 27 Feb 2025, 15:01

Hello there, thank you for your reply. I know how to work with css, the issue on spaces I was talking about is the space between sentences. If I go to the description editor or custom tabs, and press "enter" between phrases,(br) space doesn't work, it simply adds an empty <p> tag which can only be unique. I manage other websites in which adding spaces is not a problem, please, see the screenshots for better explanation.

Also, what about width of the sections, different fonts and format of the text? ( For product description issue is mainly about how the text renders (font, size and color), for text in the additional tabs it ignores spaces (<br>) and format is wrong as per description.)

Please, make all the sections the same using a standard. I've checked the demo and it looks really different, as for my understanding, all the css are included in theme.css and delight.css.

P.s. I have a backup so feel free to make tests

Attachments:

Immagine 2025-02-27 150001.png (342.5 KiB)
Immagine 2025-02-27 145938.png (244.4 KiB)
Immagine 2025-02-27 145919.png (237.4 KiB)
Immagine 2025-02-27 145843.png (302.7 KiB)
Immagine 2025-02-27 145818.png (86.6 KiB)
Immagine 2025-02-27 145755.png (109 KiB)
Immagine 2025-02-27 144309.png (39.3 KiB)
Fred 28 Feb 2025, 00:05

`it simply adds an empty <p> tag` - yes, I know, but that's how prestashop's reach text editor works, it's not theme's "issue"
As for the tabs content width, yes right, it's different. Here is CSS fix

.product-description {
    max-width: initial;
    padding:0
}
Lorenzo Milano 28 Feb 2025, 09:36

Hi, can you at least make sure all the text are standard as for the demo? If i enter a p or h1, the size, weight and font look different. Please, use css to make the text standard as in the demo

Fred 28 Feb 2025, 13:23

The theme has defined styles for all those elements. What do you mean by "weight and font look different"? different from what?