Archived topic
Widgets in footer with different color. How should I cover the entire widget?
3 replies · Started by Anna on January 18, 2018
Hey!
Trying to change the color of foother widget No. 2 (right) to black. Has succeeded in part, but I am not sure if it is correct. Has used the CSS code in the customization section:
.inside-footer widget .footer widget-2 {
background color: # 303030
}
The black color only partially covers the text and the icon.
The idea is that the foot should have one widget green and another black. The black color should cover the entire widget no.2. Footer is set to the full width.
Want to ask for any CSS code or other method to make it work.
Grateful for answers.
Greetings
Anna Larsson
Uses GeneratePressVersion: 2.0.2 (Premium)
Ps. Ps. Sorry for English. Have used Google translator. :)
Hi there,
So basically you want the right side entirely black?
That's not possible with only CSS unfortunately.
You will need to recreate the footer widget using the after footer widgets hook:
http://demo.generatepress.com/hook-locations/
with 2 columns (I would recommend the built-in unsemantic grid):
https://docs.generatepress.com/article/creating-columns/
And use widget shortcode plugin to turn widget into shortcode:
https://en-ca.wordpress.org/plugins/widget-shortcode/
Let me know once you do that then I can provide some CSS to style :)
Thank you for your quick reply!
I have already made the Footer with 2 columns in different colors in Elementor and am pleased with it.
The problem really is that, I can not use my Elementor's footer with 2 columns in Blog and single post footer. Same problem with the header. Blogs and individual posts do not accept other header and footer. Other pages, it's no problem, I just hide footer and change to footer designed by me.
I'm quite scared to use CSS, it can cause big problems if you make a mistake.
How can I make it work without having to use codes so much? Do you have any suggestions? Maybe the forum has an answer.
Greetings
Anna Larsson
CSS doesn't cause big problems when mistakes are made - it's purely visual and won't crash your site.
And we are here to help :)
It's only way to accomplish that using GP unfortunately.
