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

[Endlessretro]

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. 

I would appreciate any help with this.

Thank you in advance. 

[dmwwebartisan · 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;
}

[dmwwebartisan · 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;
}

[Endlessretro]

Also forgot to mention that we are using Shella theme.

[dmwwebartisan]

@Endlessretro 

Please share your store URL.

[Endlessretro]

Thank you. 

https://endless-retro-22.myshopify.com/

[Endlessretro]

https://endless-retro-22.myshopify.com/

thank you

[dmwwebartisan]

@Endlessretro 

Please share store Password!

Thanks!

[Endlessretro]

Good Afternoon, 

Thank you - if you could please let me know when you are available to have a look for me and I will remove the password from the store.  

Many Thanks,

[dmwwebartisan]

@Endlessretro 

Yes I am available Please Remove password of store 

Thanks!

[Endlessretro]

Thank you - I have disabled the password so you should now be able to see the site. 

Thank you

[dmwwebartisan · 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;
}

[dmwwebartisan]

@Endlessretro 

Thanks!

[Endlessretro]

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 you

[dmwwebartisan · 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;
}

[Endlessretro]

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

[Endlessretro]

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 you

[Endlessretro]

@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?

[dmwwebartisan · 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!

[Endlessretro]

Amazing! Thank you!!

[Endlessretro]

@dmwwebartisan 

Good Evening, 

I was wondering if you had any advice as you were so helpful yesterday. 

I am really happy with how the desktop version looks, however when viewing on a mobile, it doesn't look as good. Things are cut off and it looks messy. Is there a way I can have my mobile site look the exact same as the desktop version?

Thank you in advance

[dmwwebartisan]

@Endlessretro 

Please disable your store password!

Thanks!

[Endlessretro]

@dmwwebartisan I have now disabled the store password!

Many Thanks,

[dmwwebartisan]

@Endlessretro 

ok i will check your shop.

[Endlessretro]

@dmwwebartisan thank you I shall await your response 🙂

[dmwwebartisan]

@Endlessretro 

Please share screenshot what do you want!

Thanks!

[Endlessretro]

@dmwwebartisan Thank you!

I have included some screen shots below. 

1) There is a big gap at the top of the contact form when viewing from a mobile. Is there a way of removing the big gap?

2) We would ideally like 4 images per row on the collection pages like we have on the desktop version. At the moment the mobile is showing as 2 images per row. 

3) Below is a screen shot of the top of the home page for both desktop and mobile. Is there any way on the mobile we can have the same menu style with the drop downs as shown on the desktop version? Would like to have the colours etc too. Basically exactly how the desktop looks but on the mobile. Also with the information tape lines etc too. 

4) The same with the footer - we would rather have the footer looking exactly how it does on the desktop. Is this possible in any way?

4)

Any help you can give we would greatly appreciate - these are the main things but ultimately we would just like the mobile site to look the same type of layout as the mobile.

Thank you

[Endlessretro]

@dmwwebartisan is the above anything you would be able to help with please? 🙂

[Endlessretro]

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

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then provide password too.