October 17, 2013 at 7:22 pm #14248
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?
JaredOctober 17, 2013 at 7:36 pm #18478Sushil AdhikariModerator
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');">
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:;">
<div id="footer-wrapper" style="color:;">October 17, 2013 at 8:13 pm #18479October 17, 2013 at 8:21 pm #18480
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:
border: 0 none;
If this is beyond your normal free stellar support, let me know I’ve overstepped my bounds. 🙂October 17, 2013 at 8:48 pm #18481Sushil AdhikariModerator
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/October 17, 2013 at 8:55 pm #18482
Thank you!October 29, 2013 at 6:07 am #14249
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.
- You must be logged in to reply to this topic.