If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
I have been testing out some modifications to this website to see what works as far as banners, widgets, and the like. I am using the Thesis theme for WordPress. While it comes with a steep learning curve for someone that knows little about programming, such as myself, fortunately there is a wide knowledge base out there that is just a Google search away. A couple of weeks ago someone on Twitter asked me how I put the 6 buttons inside the multimedia box on the right.
It is a pretty easy thing to do. Here are the directions and code needed:
Go to Thesis Design Options, and under Multimedia Box, select
Custom Codein the dropdown selector under Default Settings.Then, in the “Custom Multimedia Box Code” field, copy the following code (replacing each link and image source with the appropriate values for your ads):
<div class="adblock cenx"> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> </div> <div class="adblock cenx"> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> <a href="http://www.adlink.com/"><img src="http://www.example.com/images/image.jpg" width="125" height="125" /></a> </div>Click the “Big Ass Save Button”.
Now, place the following code in
custom.css(change to suit your specific requirements):.custom div.adblock img { padding: 4px; background-color: #FFFFFF; display: inline; } .custom .cenx {text-align: center;}
This allows the various images, as well as making them clickable. 125×125 size button ads are what I used and they fit perfectly. The code is attributed to Satish Talim who can be found on Twitter as @indianguru. I like this one as it only requires very little changing of the custom.css file plus the ads are easy to change from within the Thesis design panel.
{ 9 comments… read them below or add one }
Twitter: ohal
March 5, 2010 at 12:49 pm
Thank you. I too had a hard time with Thesis, but have grown to like it better than anything out there. I’ve need center an object in the MM box. I’m hoping this CSS code will lead me in the right direction.
Great looking design you have.
Twitter: marketingelf
March 5, 2010 at 2:09 pm
I hope it helps you figure that out Hal. Thanks for the compliment!
Twitter: ohal
March 5, 2010 at 4:35 pm
I got it. Again thank you.
Shannon!
Thanks. This is great and provides exactly what I wanted for my multimedia box. I did a bit of CSS enhancement in order to put a background color and then added color behind each of the six ad boxes.
Check it out sometime.
Thanks so much!
Twitter: marketingelf
March 7, 2010 at 10:57 pm
You are very welcome
I’m glad I could help! I will check out your site and see.
Thank you, thank you, thank you! Simple, clean code that works!
Twitter: marketingelf
March 27, 2010 at 2:32 pm
You are welcome Neena! Thanks for visiting and the RTs
Hi! Thanks for the code.
But how do you get the images to be in coloumns? Like you have 3 coloumns on this site with 2 banners in each coloumn…I would like 2 coloumns on my site, and I’m not sure how to do that.
So maybe you know how to do that??
Kindest,
Joachim
Twitter: marketingelf
August 19, 2010 at 4:41 pm
Hey Joachim,
I would think you could just add in the code for two banners in each column rather than three. Try that and let me know if it works.