- This topic has 9 replies, 3 voices, and was last updated 4 years, 5 months ago by
.
I would like to customise the footer a little more (like the attached image) by –
- Adding a background image or gradient instead of just a flat colour
- Creating 4 widget areas (1 area for a logo and the other 3 widget areas for menus)
- Being able to add social media icons to the copyright area
Is this possible? Thanks!
Hi @SarahS,
Thank you for your questions.
Adding a background image or gradient instead of just a flat colour
We can achieve this developing custom CSS code.
Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?
Creating 4 widget areas (1 area for a logo and the other 3 widget areas for menus)
Being able to add social media icons to the copyright area
To achieve this you have to develop custom code in the child theme of Gillion theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here.
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound teamThe URL is – http://blog.lightful.com/
Solution for this topic
You can display image in the footer by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
footer.sh-footer { background: url("http://blog.lightful.com/wp-content/uploads/2017/08/header-teachers-in-kakuma.jpg"); } .sh-footer .sh-copyrights, .sh-footer .sh-footer-widgets { background: transparent; }Please change the image URL in the above code to whatever you want to display in the footer.
Hi
Thanks for the CSS code, I’ve managed to get a background image working in the footer perfectly now.
I’ve also managed to create an extra widget area (making it 4 in total) so I can now have 3 custom menus showing in the footer.
I was just wondering how I can get rid of the bullet points next to the menu items & get them lined up with the menu title & also make the menu title bold? I cannot seem to find reference to these in the CSS file.
The URL to see site so far is – http://blog.lightful.com/
Many thanks in advance!
Forgot to mention – it would also be great to get rid of the white line next to the menu title too.
Thanks!
Solution for this topic
Please use below custom CSS code to achieve this.
.sh-footer-widgets .widget_nav_menu ul { list-style: none; padding: 0; } .sh-footer-widgets .widget_nav_menu h3 { font-weight: 600; }Thank you so much!
You are most welcome here 🙂
How would one go about changing the color of the social media icons for the footer section/widgets?
I can’t seem to find it anywhere.
