Changing the colour of the Newsletter Subscription box where you enter your email address

Solved
Endlessretro
Explorer
79 0 30

Good Evening, 

I am attempting to change the colour of the Newsletter Subscription box where you enter your email address at the footer of my website. At the moment, it is just defaulting to the colour of my footer which is black - however I would like this as an alternative colour so it stands out more.

I have searched everywhere for a way to do this, however currently no joy. I have included an image below of how the box currently looks. newsletter.png

I would appreciate any help with this.

Thank you in advance. 

Replies 27 (27)
dmwwebartisan
Shopify Partner
9715 2221 3049

This is an accepted solution.

@Endlessretro 

add the following code at the bottom of your assets/theme.min.css

.footer--style-2 .footer__subscription input[type=email] {
    border: #fff !important;
    background-color: #38c7ca !important;
    color: var(--footer-style-2-subscription-input-c) !important;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9715 2221 3049

@Endlessretro 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Endlessretro
Explorer
79 0 30

It worked!! Thank you so much for being so helpful! 

Endlessretro
Explorer
79 0 30

Whilst you are here - could i also ask you.. 

our main menu drop down - we would like the background set as black. However when we do this under theme settings and colours - it changes other things to black which we do not want. 

Please could you advise if there is a code I can use to change this menu drop down section to black background?

 

Thank youScreen Shot 2021-09-22 at 15.28.15.png

dmwwebartisan
Shopify Partner
9715 2221 3049

This is an accepted solution.

@Endlessretro 

add the following code at the bottom of your assets/theme.min.css

html.css-full-loaded body.theme-css-animate .menu__megamenu.animate {
    transition-duration: var(--animation-menu-desktop-duration);
    background: #000 !important;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Endlessretro
Explorer
79 0 30

Thats amazing thank you so much again for being so helpful!

Endlessretro
Explorer
79 0 30

Sorry - I have just realised that it has worked on all the drop down menus, however the background of the 'brands' menu has still remained white. 

Is there anything I can do?

 

Thank youScreen Shot 2021-09-22 at 15.56.19.png

Endlessretro
Explorer
79 0 30

@dmwwebartisan 

Sorry - I have just realised that it has worked on all the drop down menus, however the background of the 'brands' menu has still remained white. 

Is there anything I can do?

 

Screen Shot 2021-09-22 at 15.56.19.png

dmwwebartisan
Shopify Partner
9715 2221 3049

This is an accepted solution.

@Endlessretro 

add the following code at the bottom of your assets/theme.min.css

.menu:not(.menu--vertical) .menu__panel:not(.menu__panel--on-a-par) .menu__dropdown, .menu__panel--on-a-par .menu__list--styled .menu__list {
    margin-left: -10px;
    background: #000 !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post