Footer Widgets & Social Bar image instead of color

[Jared Finkenbinder]

Is there a way to replace the color in the Social Bar and the Footer Widget area with an image? And how to keep it responsive?

I think I found the appropriate places in the Celestial Reloaded style.css, I would copy those sections to the child css and change background-color with an image link right?

Jared

[Sushil Adhikari]

Depends on what the image is, but if it’s a repeating image and small enough, it will be responsive, but for larger images, this is a lot more difficult but can be achieved (there’s tutorials online for that).

For your question(s), you would have to also modify the core theme files of the header.php and footer.php because there is php code that puts the theme option colour choices in those containers relating to each. Then of course, editing or adding to the theme’s style.css (definitely this requires a child theme).

Social bar, in the header.php you would have to replace this with:

<div id="social-wrapper" style="background-color:; background-image: url('/images/socialbar-bg.png');">

With this:

Then edit the stylesheet for that container. Note that you will lose the option setting for this container’s background colour.

The footer will be similar:

<div id="footer-wrapper" style="background-color:; color:;">

with:

<div id="footer-wrapper" style="color:;">

[Jared Finkenbinder]

O.K. So putting something like the attached wouldn’t be responsive then (I’d edit for size). What about adding the social lines to the footer widget area?. Or making the footer a gradient between two colors?
header.jpg

Attachments:

You must be logged in to view attached files.

[Jared Finkenbinder]

Would doing something like this make the image responsive? And where would I add that code?

From a wordpress thread:

Insert the image normally;
In “Size” select “Custom”;
Set the “Width” and “Height” to “0”;

Insert this in your CSS code:
img {
border: 0 none;
max-width: 100%;
vertical-align: middle;
}

If this is beyond your normal free stellar support, let me know I’ve overstepped my bounds. 🙂

[Sushil Adhikari]

As much as I would love to help anyone wanting to do custom changes, such as what you are wanting to do is really going to be up to you. I know there’s tons of tutorials out there.

All I suggest is that you always maintain a backup of your theme before doing anything custom so that if anything goes wrong, you can always revert back.

Quick note regarding what you found in a WordPress thread…that is for physically inserted images, not background images which is done from the css level. The img css you posted is actually already coded in the theme.

For responsive background images…might want to do a google search but check this out first:
http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

[Jared Finkenbinder]

Thank you!

[Jared Finkenbinder]

So I copied the settings for the “Social Lines” to the footer widget section in footer.php of the child theme and all looks good. Thanks for setting me on the right track.

[Author]

Posts