Community Forums › Forums › Archived Forums › Design Tips and Tricks › Enterprise Pro – Footer Widget – Change light grey background colour to an image
- This topic has 7 replies, 3 voices, and was last updated 8 years, 10 months ago by
Cheshire.
-
AuthorPosts
-
March 29, 2016 at 10:34 am #182466
Cheshire
MemberHello
Is it possible to change the light grey background colour on the 3 Column Footer Widget to a picture?
http://completefinsol.com.au/
If yes - how ? 🙂Or would it be better to create another full width widget area under those 3 column footer widgets and just use Jetpack to insert an image into that widget area?
Thanks
http://completefinsol.com.au/
JayneMarch 29, 2016 at 3:46 pm #182486lawriebea
MemberHave you tried a background image? For example try this in your child 's style.css file:
.site-inner {
background-image: url(http://www.vivikstyle.com/wp-content/uploads/2015/12/test-zim-landscape-top.jpg);
}March 29, 2016 at 7:35 pm #182496Victor Font
ModeratorApart from the home page, site-inner is the container for all of your content post/page content. If you add a background image to site-inner, it will be visible on all of your pages, not just the home page. To add an image to display only on the home page, create a new CSS block for .home.site-inner, then add the code for the background image.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 30, 2016 at 12:33 pm #182544Cheshire
MemberHello Lawriebea and Victor - thank you for your replies 🙂
No, definitely don't want it on every page (which also now explains why I couldn't pick it up exactly with Firebug)
I have put
.home.site-inner {
background-image: url(http://completefinsol.com.au/wp-content/uploads/2016/03/Complete-Financial-Solutions-Homepage-Footer.jpg);
}into the Jetpack CSS Customiser, but nothing is showing....is there more I need to include for the CSS Block?
It is quite a large picture in height, so will also want the link widgets of the footer area at the top of the image (not in the middle)
Thank you so much for helping
Jayne
March 30, 2016 at 2:13 pm #182548lawriebea
MemberHi again
Using Firefox's Inspect Element tool I got the image to appear behind the 3 boxes (i.e. Our Team, Our Services, Newsletter) but because the image is overly high as you say, only the top black part of the image is visible. The section holding the 3 boxes just ain't high enough. I am not sure exactly what you mean by :so will also want the link widgets of the footer area at the top of the image (not in the middle)
I usually make css customizations directly into style.css. I have never used Jetpack so sorry cannot comment on that.
March 30, 2016 at 2:48 pm #182550Cheshire
MemberHi Lawrie
Thank you so much for your response
How did you get the image to show only on the Home Page - what was the CSS you used?
I figured once I got it to show at least I could start playing around with heights and paddings etc.
I'm just wondering if it will be easier to create a new widget area under the footer and put the image in there........mirror the Home Top Widget under the 3 Column Footer Widget
Personally I think the image is just going to look out of place and not in style with their branding and dead space and have been trying to convince him not to have it......but he is adamant.
April 3, 2016 at 7:13 pm #182826Cheshire
MemberHi
Is anyone able to help with CSS for the grey strip on the home page behind the footer widgets....I believe I need to set a .home.site-inner rule - but not sure what the parameters are
I haven't quite got this sorted
Thank you 🙂
Jayne
April 4, 2016 at 7:23 pm #182933Cheshire
MemberHi
I am willing to pay someone via Paypal to get this CSS code written (and a few other tweaks with it) as I need to get it sorted
Please contact me at [email protected] if you can help
Thanks
Jayne -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.