How to change font color on collection titles in Shop page in debut theme?

Solved
Highlighted
Tourist
12 0 2

On my Shop page I show all collections, but the font is white and not very readable. How do I either highlight the font or change the color or put the collection title underneath the picture? I realize this is easy for someone who knows what they are doing, but unfortunately I am new to liquid.

JoeB-CO_0-1597707537625.png

 

0 Likes
Highlighted
Astronaut
1085 178 213

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) and I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
2301 502 651

Hey @JoeB-CO,

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.collection-grid-item__title {
color: #fff !important;
top: unset !important;
text-shadow: none !important;
margin-top:30px;
}

.collection-grid-item { 
margin-bottom: 45px !important; 
}


@media only screen and (min-width: 750px) {
.collection-grid-item { margin-bottom: 55px !important; }
}

 

This code will take the title bottom of the image.

Let me know if this works for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
12 0 2

Thanks so much for taking time to help me out. However, it didn't work like I hoped. The title just disappeared. My current code is below. Can I just change some code to highlight the text? Maybe put a white shadow with black text so it is readable on any background?


.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: $gutter-site-mobile;

@include media-query($medium-up) {
margin-bottom: $grid-gutter;
}
}

.collection-grid-item__title {
color: $color-overlay-title-text;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
@include transform(translateY(-50%));
transition: $transition-link-hover;
text-shadow: 0 0 4px $color-text-shadow;
hyphens: auto;

@include media-query($medium-up) {
padding: 0 15px;
}
}

0 Likes
Highlighted
Tourist
12 0 2

current code is below, how do I modify it to highlight the title or put a shadow behind the text and make the text black?


.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: $gutter-site-mobile;

@include media-query($medium-up) {
margin-bottom: $grid-gutter;
}
}

.collection-grid-item__title {
color: $color-overlay-title-text;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
@include transform(translateY(-50%));
transition: $transition-link-hover;
text-shadow: 0 0 4px $color-text-shadow;
hyphens: auto;

@include media-query($medium-up) {
padding: 0 15px;
}
}

0 Likes
Highlighted
Shopify Partner
2301 502 651

Hey @JoeB-CO,

We can do it black and white shadow but when you hover then title will disappear. can you give me a screenshot when you put above my given code

as you said title disappear?

Please provide a screenshot. I will check and correct it.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

@JoeB-CO 

This will fix your problem:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

.collection-grid-item__title {
    margin-top: 20px;
    top: 112% !important;
    color: #000000 !important;
}

.collection-grid-item {
    margin-bottom: 100px !important;
}

 


It will look like this:

dantepw_0-1597807435191.png


Let me know if it works plz

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
12 0 2

Yes, this worked great. I modified slightly.

.collection-grid-item__title {
margin-top: 12px;
top: 101% !important;
color: #000000 !important;
}
.collection-grid-item {
margin-bottom: 80px !important;
}

 

What does the !important do?

0 Likes
Highlighted
Tourist
12 0 2

the following code worked:

.collection-grid-item__title {
margin-top: 12px;
top: 101% !important;
color: #000000 !important;
}
.collection-grid-item {
margin-bottom: 80px !important;
}

0 Likes
Highlighted
Astronaut
1085 178 213

glad to hear it worked!

 

!important forces this code to be used in case the element has other styles applied to it.

Wishing you a great day! 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes