Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Endlessretro
Trailblazer
172 0 64

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. 

Accepted Solutions (3)
dmwwebartisan
Shopify Partner
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 27 (27)

Endlessretro
Trailblazer
172 0 64

Also forgot to mention that we are using Shella theme.

dmwwebartisan
Shopify Partner
12323 2552 3732

@Endlessretro 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64
Endlessretro
Trailblazer
172 0 64
dmwwebartisan
Shopify Partner
12323 2552 3732

@Endlessretro 

Please share store Password!

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

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
Shopify Partner
12323 2552 3732

@Endlessretro 

Yes I am available Please Remove password of store 

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

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

 

Thank you

dmwwebartisan
Shopify Partner
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12323 2552 3732

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

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
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

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

Endlessretro
Trailblazer
172 0 64

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
Trailblazer
172 0 64

@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
12323 2552 3732

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

Amazing! Thank you!!

Endlessretro
Trailblazer
172 0 64

@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
Shopify Partner
12323 2552 3732

@Endlessretro 

Please disable your store password!

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

@dmwwebartisan I have now disabled the store password!

 

Many Thanks,

dmwwebartisan
Shopify Partner
12323 2552 3732

@Endlessretro 

ok i will check your shop.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

@dmwwebartisan thank you I shall await your response 🙂

dmwwebartisan
Shopify Partner
12323 2552 3732

@Endlessretro 

Please share screenshot what do you want!

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Endlessretro
Trailblazer
172 0 64

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

Screen Shot 2021-09-24 at 19.59.15.png

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. 

Screen Shot 2021-09-24 at 19.48.54.png

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. 

Screen Shot 2021-09-24 at 14.21.50.pngScreen Shot 2021-09-24 at 14.22.15.png

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)Screen Shot 2021-09-24 at 20.13.45.pngScreen Shot 2021-09-24 at 20.13.31.png

 

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
Trailblazer
172 0 64

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

Endlessretro
Trailblazer
172 0 64

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

Denishamakwana
Shopify Partner
1408 173 232

Welcome to shopify community.

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

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme