Solved

customizing debut theme home page

Muchoprinting
Excursionist
16 0 2

Hi I need help with removing the opacity showing on the photos in my collection tiles. I also want to add the text to the bottom of the photo not white text hovered over the image (see screenshot below)

Muchoprinting_0-1628098343985.png

 

I also need help with changing the background color of the dropdown menu to black or the text color in the dropdown menu to black on desktop. Mobile dropdown menu is good. 

Please see screenshot below

Muchoprinting_1-1628098669293.png

 

Accepted Solution (1)
diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@Muchoprinting 

To move the text below the image, you can follow this tutorial. Although it was written for the Brooklyn theme it also works on Debut.

In relation to the navbar color:

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

.site-nav__dropdown{
    background: #000000 !important;
    border-color: #000000 !important;

}

.site-nav__dropdown *{
    color: #ffffff !important;
}


You can change the HEX colors above.

Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 6 (6)

hardik355
Shopify Partner
235 22 35

Hi Muchoprinting

Sorry for facing issue can you share your store url if password protected then also share password.

 

If helpful then please Like and Accept Solution.
For Design, Development and custom changes Hire Me.
Skype: live:hardikradadiya355
Thanks

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks
Muchoprinting
Excursionist
16 0 2
The website is: muchoprinting.com
store front password: frohgh
diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@Muchoprinting 

To move the text below the image, you can follow this tutorial. Although it was written for the Brooklyn theme it also works on Debut.

In relation to the navbar color:

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

.site-nav__dropdown{
    background: #000000 !important;
    border-color: #000000 !important;

}

.site-nav__dropdown *{
    color: #ffffff !important;
}


You can change the HEX colors above.

Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
Muchoprinting
Excursionist
16 0 2

This code was spot on thank you very much for this solution! Works!!

Muchoprinting
Excursionist
16 0 2

@diego_ezfy could you also help me to remove the opacity and have the text below the image of the collection list block on the home page. Please see screenshot below. Currently there is an opacity over the image and the text overlayed in white. 

would like to customize this section to have the text below the image and the image 0 opacity.

 

Muchoprinting_0-1628275990544.png

below is an example of how i would like to customize the above collection no opacity on the display image and text under the photo.

 

Muchoprinting_1-1628276224290.png

 

Thank you very much!!

 

 

LitExtension
Shopify Partner
4860 1001 1135

Please send your site and if your site is password protected, please send me the password. I will check it for you

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify