This Foodie Pro theme tutorial takes you through how to edit the widgetized areas. If you want to know how to style another part of the theme, check out my other Foodie Pro tutorials.
One of the best things about the Foodie Pro theme is the large number of widgetised areas for you to play with. I love them! But for me to be completely happy with the look of everything in them I needed to tweak.
So below is some advice about how to move things about a little bit and resize certain elements so they all fit nicely with each other. I like straight lines!
Foodie Pro Theme Tutorial: After Entry Widget
When I first checked out Foodie Pro I was very excited to see the After Entry Widget Area. This refers to the area at the bottom of your posts – after your social icons (if you have a plugin such as Shareaholic), related content images (if used), tags and categories, but before your comments. This is a key area for communicating with engaged readers. They’re engaged because they’ve read all the way to the bottom of your post and are perhaps even on their way to leave a comment. I noticed that many bloggers have a newsletter sign-up there, as well as an advert. I really wanted both of these when I had my last theme, but my cruises round the internet did not enlighten me on how to implement this widget area myself.
When I saw Foodie Pro had this feature it was all I needed to know to clear my diary and take the plunge into yet another WordPress theme. Cue two days of frantic editing to make everything look the way it did before, closely followed by weeks of playing around with all the new features to make everything look different.
The one tweak I wanted to implement here was to have the advert and newsletter sign-up exactly the same size. They were a little different and it was annoying me, so I set a maximum size for the widget which forced the Genesis Enews Extended sign-up box to shorten a touch. If such things annoy you too…
Find this in your Style.css file:
And change it to this in your Style.css file:
Foodie Pro Theme Tutorial: Sidebar
One minor change I felt moved to make in my sidebar was to add some padding here and there so everything was even. Specifically, my Gourmet Ads units show their logo underneath, which was pushing right up again my little leaf graphics. You may have another element you want to move a bit, but the principle is the same.
First you need a way to inspect the element you wish to move. I use Firebug, an add-on to the Firefox browser. Both Chrome and Firefox also have their own native element inspectors. These tools enable you to see what code applies to the part of your website you have selected, guiding you to the place you need to edit.
Once you have downloaded Firebug, right click on the thing you want to move and select Inspect Element With Firebug. Two boxes of code will pop up at the bottom, the HTML on the left and the CSS on the right. Look at the code on the left and find the “section ID” for the thing you want to move. If there is more than one section ID, hover your cursor over each one until the thing you want to move is highlighted. Copy or note down the section ID for the appropriate item.
When you want to style this item, and this item alone, you can use its section ID to write code specifically targeted to that item. All you need to do is include a hashtag before the section ID name. So, to add a little padding above the leaf graphic (section id=”text-52“), therefore moving it down and away from the Gourmet Ads logo…
I put this in my Style.css file:
Foodie Pro Theme Tutorial: Footer
The last widget area I made changes to was my footer. In Foodie Pro, the footer contains four separate widget areas. In my footer seen above (or below!): Footer One contains my profile widget, social icons and Kitchen Daily logo; Footer Two contains my popular posts, displayed via the native Foodie Pro posts widget; Footer Three contains my 300 x 200px advert; and Footer Four contains the leaderboard ad. Lots of flexibility there!
The first thing I wanted to do was change the colour of the footer box. I liked the colour that was used in the older Foodie theme and I had used this colour in other parts of my blog design. If you fancy something different…
Find this in your Style.css file and change the colour hex number to the one you want:
Another minor change I wanted was a little more space above the widget titles (About Me and Popular Posts) – they seemed a bit close to the top of the box edge for me.
So I found this in my Style.css file:
And changed it to this in my Style.css file:
Similarly, I wanted to move the 300 x 250px ad so it was more aligned with the Popular Posts boxes.
So I found this in my Style.css file:
And changed it to this in my Style.css file:
Lastly, I wanted the leaderboard ad (section id=”text-40“) to be aligned to the right rather than sitting in the middle – I just thought the arrangement looked better that way.
So I used the section ID in the same way I described above in the sidebar section…
And added this to the bottom of my Style.css file:
These are just a few suggestions, things that I personally wanted changed. You should be able to use this information – particularly the section ID technique – to change things on your own blog and make them look exactly how you want them.
Please do leave a comment below if you need help and I’ll do my best, but remember I am a DIY blogger, not a professional developer, and any advice I have (or may not have!) will stem from that position. And remember I have other Foodie Pro tutorials if you want to check them out!
Good luck!