Question in the subject
I would appreciate any support
1 Like
- In the theme editor, navigate to the section where you want to change the transparency of the text on the image banner. This could be the “Hero” section or a custom section that includes an image banner.
- Identify the CSS selector for the text element on the image banner. This might involve inspecting the element using your browser’s developer tools.
- Once you have identified the CSS selector, you can add custom CSS code to modify the transparency. Here’s an example:
/* Example CSS selector for the text element on the image banner */
.hero-banner .text-element {
background-color: rgba(0, 0, 0, 0.5); /* Adjust the transparency here */
color: #fff; /* Change the text color as needed */
}
​
1 Like
- In the theme code editor, navigate to the “Assets” folder and find the file named “dawn.scss.liquid” or “dawn.scss”.
- Open the file and search for the CSS code related to the image banner or the section where the text is displayed.
- Look for a CSS selector that targets the text element within the image banner. This could be a class or ID selector.
- Once you find the selector, add the following CSS property to modify the transparency (alpha) value:
selector {
background-color: rgba(255, 255, 255, 0.5); /* Change the last value (0.5) to the desired transparency level (0.0 to 1.0) */
}
​
I dont understand
There is no such file
First, you need to find the object you want to change then apply this code to that section then it will be work
Add this code in css file and it will work
1 Like
Hi @ddsaowner
If you are talking about the text container of the image banner to be transparent, please follow the instructions below
-
From you Admin page, go to Online store > Themes > Customize
-
Go to the image banner section
-
Make sure to uncheck the Show container on desktop and SAVE. See image below
