Help Rearranging Dawn 2.0 Footer Sections

Store Design
1

I’ve looked through the forum and tried several things and have gotten this far, but still need a little help rearranging the sections and changing the color of the bottom footer.

Site url: moliorcoffee. com (no password)

Desired footer changes:

  1. Rearrange the content blocks of Top Footer: screen shot shows two options. Option 1 for desktop is ideal, which changes the order of the content blocks. Option 2 for desktop swaps the content blocks (order as is) and newsletter. For mobile, option 1 is ideal but either will work.

  2. Change color of Bottom Footer to white (keep top footer as #988261)

Thank you in advance for your help!!!

Footer Changes.jpg
Footer Changes.jpg1248×1234 122 KB

2

Hi @Hollyjn I can do it for you IF you share me access. or you can send me footer section file and section footer css file on mail

Mail:- ramchandra3838@gmail.com
if you have skype:- https://join.skype.com/invite/veRENVMYmQq6

3

The rearranging you can do in your theme customizer using sections/blocks.

For the color, do you have options for your footer and subfooter in the theme settings within the customizer? If so you may be able to change the two colors right there using hex codes.

If not, your footer has 2 sections to it, as well as a locale container below the footer. I’d set the main footer color to #988261 in theme settings and bottom padding to 0px (in customizer if possible, otherwise use code below). Then within custom css within your customizer, put the following css

/* Main footer */
footer {
padding-bottom:0px;
}

/* Sub footer */
footer__content-bottom {
background-color:white;
}

/* Locale Selector */
locale-selectors__container {
background-color:white;
}
4

Thank you!! I sent you an email. Holly Hale

5

Also, based on the response below from @BP_Dev I got the desktop footer to look how I’d like (thank you @BP_Dev ) but it’s the mobile view that still needs help. @BP_Dev there is no place to change the sub footer color that I can see in the theme, and I tried adding the custom css to the theme customizer and it didn’t work (perhaps I didn’t put it in the correct place? I’m new at this). Thank you both!

6

Hey Holly,

You can try putting it in the ‘Theme Settings’ left side bar for global custom css, instead of on the sections/blocks itself. Also, I forgot the period before each class, so .footer etc..

Lastly make sure to add color:white; (or whatever your font color should be for that bottom section which contains the copyright and policy links, otherwise they’ll disappear in the white).

For the different layouts on mobile, you can put two logo’s in the footer, then in your edit files css file, you can do an @media declaration with:

Display:inherit
Display:none

Simply put, you’ll put display none on the top logo for mobile size, and inherit for anything above mobile screen size, then the reverse for the bottom logo. That way when your screen size scales to mobile, the top logo disappears and the bottom logo becomes visible. This doesn’t change the other blocks within the footer just hide/showing the two logos.

If you’d like to futher customize the mobile, centering text etc, you can do that in the same @media section. Here’s a simple ‘Try it yourself’ site where you can mess around with it and see how it works. Drag your screen size down and see the changes happen in real time.

https://www.w3schools.com/cssref/css3_pr_mediaquery.php

If you need further help, shoot me a private message and we can go from there. Good luck!

7

Thank you @BP_Dev I got the bottom footer color changed. it was the period missing that was the issue and I didn’t notice it the first time. Thank you for the website and info on the @media section. I’ll give that a look and see what I can do. I appreciate you!