Hi Guys
I need to change the wording to any colour but white or black in my Thalia theme as my images are white and black. There is no option for this. URL is https://polka-lines.myshopify.com/
@Qozeem Password removed!
@PolkaLines You won’t be able to do it directly like this. You need to add custom CSS.
Go to your themes section Actions > Edit Code
Once all pages are loaded in the left section, search for the file with extension .css for your image banner. Should be under Assets folder.
I am using Dawn theme, so in my case the filename is section-image-banner.css
Now in chrome/edge/firefox open the inspect tool and find the CSS class of the text you wanna change.
in my case the CSS class name is .banner__box>*:first-child
So now you can find out the class name in the CSS file.
In case you can’t find it, just go to the bottom of the file and the add black color to the code.
Eg:
.banner__box>*:first-child{
color: black
}
Similarly, the CSS class name for the description text in my case is .banner__box .banner__heading+*
so it will go as
.banner__box .banner__heading+*{
color:black;
}
And the result is
@imatikshaikh Thanks I was able to find the section after inspecting the pages. Nowhere is a color scheme for the wording. Please see below.
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: ‘’;
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=‘rtl’] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
@imatikshaikh Even putting the wording in a black box like the shop button would be great.
@PolkaLines Message me here from my profile, or drop me a mail here
I’ll do it for you.
And it won’t cost you, don’t worry.
Alternatively, you can give staff access temporarily on the same email id.
Hi @PolkaLines ,
To change this header color, try this…
Go to Online Store-> Theme->Edit code
Asset-> main.css ->paste the below code at the bottom of the file.
.slide1 .wrap-content-slide1 > * {
color: aquamarine;
}
If this solves this the issue, please mark my message a solution. Appreciate that.
@Farouk-dev Legend!!
1 Like