In this video tutorial deals about how to add background image inside the teaser box at the homepage. We know thesis theme offers number of hook functions to customize thesis theme. Especially which part of the theme you want to customize we can select the corresponding part to customize.
Now I am going to add two images, first one add image line between each post in teaser box of homepage. The second one is add background image for comments and read more links in teaser box. For do the second one first you should add comments links menu in teaser box. Click here to include add your comment and read more links in homepage.
How to add image line between each post at homepage
To add line between each post in teaser box first you should upload your line image file to custom image folder.
The path of custom image folder is public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/images/.
Inside image folder you have to upload the image file.
After uploaded the image file. Copy and paste the following code in custom_functions.php file.
/* teaser top line image */
function teaser_top() { ?>
<div id="teaser_top"> </div>
<?php
}
add_action('thesis_hook_before_teaser_headline','teaser_top');
Use ftp to paste the code because which is the safest way to add code inside custom_functions.php file.
The path is public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/custom_functions.php.
Also add the below code in custom.css file with help of word press admin.
/* teaser line image */
.custom #teaser_top{
background:url("http://fourblogger.com/wp-content/themes/thesis_16/custom/images/teaser_top.png");
height:20px;
width:662px;
margin-left:-13px;
}
The above code you can change the size of the image.
Once you added those two codes now check your site with line between each post.
Line between each post
Add background image in add comment, read more links at homepage.
For do this first you should add add comment and read more link in teaser box as mentioned at the starting of the article. Then upload your image background image custom image folder like I mentioned in the first part.
Now you should add the below code in custom_function.php file. Already I gave the code for read more and add comment links in hompage. Just add the below two lines inside the function name teaser_post_menu_links. Which is shown in the video.
/* add the code in side the teaesr_menu_links function*/ <div id="teaser_b"> </div>
And also copy and paste the below code in custom.css file using wordpress admin.
/* teaser add comment and read more link background image */
.custom #teaser_b{
background:url("http://fourblogger.com/wp-content/themes/thesis_16/custom/images/new teaser box.PNG");
height:42px;
width:415px;
margin-left:-11px;
}
The above code you should replace background url as your image uploaded path. also change margin, height as your own. Change your link color using custom.css code. Once you completed the above steps check your site which having background image in teaser menu links at homepage as like below image.
read more background
Share your experience in comment section. For more checkout our all Thesis theme tutorials..
{ 24 comments… read them below or add one }
how can i put an image right side in teaser box automaticly
Go to Thesis Options->Default Thumbnail Settings-> Select Right with Text wrap.
Then click save.
If you have any other problem, leave a comment again.
Thanks for comment but i did it before dont show image can i ask a tip? but it given different site but icant do it. if i give web adress, you can try it on thesis theme and can you explain to us ?
Tell me what exactly you need ? and give your link also. SO that i can do this.
hi i give an adress http://www.images.gen.tr/public/view/full/11661 i did a picture for my three quastions thanks alot
once again copy and paste that code surel it will work.
Wow, excellent tips indeed dude. I like this idea a LOT.
Jess
hai,
In your site you added background image in teaser_top..
To add image in teasermenulinks you should add background image in teaser_b in custom.css file
i am not able to add the background image to add more comments. can you help me out to add this background image ?
hai vivek,
once again add the code in the above mentioned procedure and replace background image url with your image uploaded path..
applying that codes will not be shown in proper place. you can check it out here. there will be no background image in read more section and comments. i want it to look completely like your site. can i get this. ?
hai vivek,
I saw your site..background image shown clearly just change the closing div for teaser_b after the end of all links..
example..
add comment, read more links…
use this order then background appeared as you like…
what you are trying to say i am not able to understand it well can you guide me in brief?
hai vivek,
To add background image in teaser box links.. In your custom_functions.php code
you should use add comment and read more the three links with in the div id called teaser_b.
example
div id=”teaser_b”
Number of comments link..
add comment link..
read more link..
/div
then paste the css code mentioned in the post..
Still i am not able to add the background image to add more comments. can you mail me the whole code so that i could be able to add the background image.
need your precious amount of time and help
hai vivek,
I think you need background image for each link in teaser menu..
dont use separate teaser_b div for each link.. only one teaser_b div enough.. but you should give all the links within teaser_b div..
Otherwise follow the below method..
replace previously added code for background image in teaser.. add the below code in custom.css file
.custom #teasermenu li a, .custom #teasermenu li a:link {background:url("http://gadgetguide4u.com/wp-content/themes/thesis_16/custom/images/new teaser box.png") repeat scroll 0 0 transparent;}Thanks Suresh with your help i am able too add the required background image. Thanks a lot for helping me out.
hai vivek,
by the similar way you can add background image for any div part of thesis theme..
Hello there Suresh,
It’s my first time applying your tutorials on my project site and I can say you’re good. It’s not my first time to visit the site of fourblogger though. I applied all the techniques for this teaser trick and stuff and although it worked, it did make some wierd changes to the homepage. I noticed the Headline and the text on my teasers turned out very small, why’s that happening to my site? Also can you please help me on how to resolve this. I tried to visit the full article of the teasers and the size of the fonts are normal right there. My site is komurin.com/expat. I’m an instant fan and if you can help me further , then the more I’ll become a fan of you and fourblogger. Thanks in advance.
can you guide us on how to get or create the images for the image line and background image in add comment
i am not able to aling the text with my image , can u guide me on how to do this…
thks for all ur help
Hey this codes don’t work in my site…
Why? I am using thesis 1.8
Instead a background image, how can I add a light background color to the teasers headline?
contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.