How can I add a semi-transparent background to my product description?

Store Design
,
1

Hi there,

I would like to know if there is any possibility to add color background with about 50% transparency only for product description text box so that text could be more readable? Also, it would be great if this text box background has rounded corners.

Thank you in advance for your support.

My page: https://e221d9.myshopify.com/

2
  1. In the left sidebar of the theme editor, click on the section that contains the product description text box. This might be the “Product” or “Product Page” section, depending on your theme’s organization.
  2. Within the section, look for the settings related to the product description or text box styling. The exact options may vary depending on your theme, but you’re looking for options that control the background color, transparency, and border-radius (for rounded corners).
  3. Set the background color to your desired color. You can also adjust the transparency by using RGBA values instead of standard hex codes. For example, an RGBA value of rgba(255, 255, 255, 0.5) sets a white background color with 50% transparency.
  4. If available, look for an option to adjust the border-radius or corner radius. Set it to a value that gives you the desired level of rounded corners.
3

Hi,

Thank you for your response, however I don’t have those options in my theme.

BR

4

@Pomakale Share your site password .

5

it’s aoltog

6

@Pomakale add below css into base.css file

.product__description.rte.quick-add-hidden {
    color: rgb();
    background-color: rgba(255, 99, 71, 0.2);
    border: solid 1px;
    border-radius: 20px;
}

Ujjaval_0-1686051628784.png
Ujjaval_0-1686051628784.png1586×794 220 KB

7

Thank you so much, it works!

Only one more question: how can I set text margins? I mean how to create white space between background border and text?

Thank you!

8

@Pomakale add below css

.product__description.rte.quick-add-hidden {
    background-color: #fcf0e680;
    border: solid 1px;
    border-radius: 10px;
    padding: 20px;
}
9

Wonderful! Thank you very much!