Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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;
}
This is an accepted solution.
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;
}
This is an accepted solution.
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!
Also forgot to mention that we are using Shella theme.
Please share your store URL.
Please share store Password!
Thanks!
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,
Yes I am available Please Remove password of store
Thanks!
Thank you - I have disabled the password so you should now be able to see the site.
Thank you
This is an accepted solution.
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;
}
Thanks!
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
This is an accepted solution.
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;
}
Thats amazing thank you so much again for being so helpful!
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
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?
This is an accepted solution.
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!
Amazing! Thank you!!
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
Please disable your store password!
Thanks!
ok i will check your shop.
Please share screenshot what do you want!
Thanks!
@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
It worked!! Thank you so much for being so helpful!
Welcome to shopify community.
Please share your store URL and if your store is password protected then provide password too.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024