Footer & format

[iamwithU]

Hello awesome support team,
I have an existing footer as follows:

As you can see, the font of the footer is too small. I like to increase the size. Also I’d like to add a TikTok icon. I understand that the only way to do is to replace my existing footer and create a new one under Footer Builder. The 2nd issue is I would like to remove the big box or border all around the page. In gist, the 2 things I like to achieve are:

1. Increase the size of my footer and include TikTok icon
2. Clean up the border and page format (which is also seen on all my product, cart and checkout pages).

The above footer was created some 6 years ago and I’ve forgotten most of the steps. I read up your latest docs which refer to some videos, but when I watched the videos, I couldn’t find the steps to design a proper footer again. I attempted to create a footer in Footer Builder but without success after few hours:

The 1st bar of the Footer is submerged into the 2nd bar. And I how couldn’t space out the social media icons decently as they look on my Slider Rev pages. To give the visitor a seamless & consistent, I hope to make the footer look similar in size to these pages:

Would you be so kind to let me know if there is a better way to achieve the 2 goals? If you can guide me with some pictures or point me in the direction, I’ll really appreciate it.

[ruenel]

Hello Shon,

Thanks for writing in!

I can see that you have created a custom footer which is similar to the default footer. We recommend that you set a maximum width in your Bar element setting so that it will look the same.

You may also set the Height of your Bar element to auto.

2.) You can simply change the page template from using the default into using the Blank - No Container | Header, Footer. For more details about the different page templates in the theme, please check this out:

Page Settings | Themeco Docs

Best Regards.

[iamwithU]

Thanks wonderful @ruenel for your prompt response & good advice. Because of your help, I got my footer set up nicely.
If you see the screenshots below, my social media icons are spaced as follows:

If you compare with the 2 screenshots of my Slider Rev in my previous post, you will notice that the social icons there are a little closer together. I tried going into the footer container and set the size and maximum width but couldn’t get it spaced out similarly to those in my Slider Rev icons. Would you be so kind to help or guide me in the adjustments?

Also, how do I get my new “cart” button in this footer to link and jump to the shopping cart in Woocommerce. (as in the old footer, which was set up in the Menu environment).

Lastly, as advised, I chose the “Blank, no container/Header, Footer” template. But the contents stretched to the left and right edges with no padding. How can insert some padding. Alternatively, how can I remove the boxy container boundaries, but keep the spacing of the container? Appreciate your patience as I have forgotten most of the basic steps…

[ruenel]

Hello @iamwithU,

Setting the maximum width to 300 pixels in your 2nd Bar element in the footer should make the icons a little bit closer.

And based on this old thread, Customizing “Post” to look like a “page” - Support - Themeco Forum, we can use this custom CSS to cleanup the page:

.x-boxed-layout-active .entry-wrap {
  border: none;
  box-shadow: none;
}

Best Regards.

[iamwithU]

Fantastic @ruenel, that was magical. Thanks for staying with me on this.
Most of my pages are now cleaned up. Esp when viewed on my desktop.
When I look at mobile devices, I notice some beige or grayish color tinge at the top and bottom. These lines and box shadows still linger on mobile devices (such as iPhone, Samsung tablets & iPad Pro):

Is there a default feature or master control to dictate that all my webpages are white and clean of any tinge?

Lastly, how do I get my “cart” button in my new footer builder to link and jump to the shopping cart in Woocommerce? (For my old footer, I was able to just select “cart” in the Menu environment and it auto brings the visitor to the cart page).

Look forward to hear from you again!

[ruenel]

Hello @iamwithU,

Though you have created a custom footer, that custom footer is assigned to specific page only. This is why in some or most of the pages displays the default footer. It was originally displaying this:

But then, you have added this custom CSS, that hides away the product search widget:

.page-id-839 .widget_product_search, .page-id-2096 .widget_product_search, .page-id-1046 .widget_product_search, .page-id-1036 .widget_product_search {
    display: none;
}

So now, you are seeing this:

The custom CSS gave you the empty space. I would highly recommend that you assign your custom footer to the “Entire Site” instead.

When you edit your custom footer, click on the Cart button and insert https://myscarletworm.com/shopping-cart/ as the Link URL.

And lastly, you may need to edit your custom header and in your Bar element settings, you can disable the box-shadow so that there will be no shadow displaying on the front end.

Best Regards.

[iamwithU]

You’re superb, @ruenel. Splendid advice. So grateful to you!
Have a great weekend, my friend

[ruenel]

No problem, @iamwithU.
Should you need any further information, please do not hesitate to create another thread.