GUIDE: Put title inside circles with images
Current status: Working
[Updated: 21st of December 2013]
This thread provides instructions on how to move the title inside the image on the home page of each circle.
Here you can see an image-based demonstration of the end result of stages 1 & 2: http://snag.gy/Ls9V7.jpg .
– It will only work if a circle has an image and just for the home page;
– It will involve creating new files and updating them, so you will need FTP access. Ask your hosting providers to help you with this.
- First create a Child Theme using the instructions here http://codex.wordpress.org/Child_Themes ;
- Then copy “content-home.php” from your theme and paste it into your Child Theme directory;
- Once you have done that, edit the content-home.php file from your Child Theme directory. Replace all of its contents with the code from the either of the following PasteBin pages that suits you:
– If you are using Spun version 1: http://pastebin.com/bm1HNAfP
– If you are using Spun version 2: http://pastebin.com/5PzrWLC2
(courtesy of hamutalwz)
- Afterwards edit your style.css file in your Child Theme directory.
At the bottom of it, add the code from this PasteBin page http://pastebin.com/Zg8huB3j .
To keep the text vertically centred when there is more than one line of text and when the circles get smaller (when the browser resizes), do the following:
- Create a new file in your Child Theme directory and name it “functions.php” ;
- In that functions.php file (of your Child Theme) paste this code into it: http://pastebin.com/G4Ziu4eq ;
- Create a new folder in your Child Theme directory and name it “js”;
- Within that “js” folder create a new file called, “text-in-circles.js”;
- Copy the code from this Pastebin page http://pastebin.com/knH83C5e and paste it into your “text-in-circles.js” file.
At the end of Stage 1 & 2 the structure of your Child Theme directory should be like this screenshot: http://snag.gy/2QYrV.jpg .
If you have any issues, please create your own thread and refer back to this thread. I’ve used stages and numbered steps to help you specify which steps you’re stuck on when you do.
I am trying to create a unified resource for this solution, as it is a lot easier to find for you guys if it is in one place. It’s also a lot easier for me to update the solution if need be.
(Thread closed to stop replies)
- The topic ‘GUIDE: Put title inside circles with images’ is closed to new replies.