Insert Graphic Between Posts
-
How do I add a graphic between the posts in a sidebar?
-
Hello,
you can use CSS to do that.For example, if the graphic is named
line.pngand is located into theimagesdirectory, you can use:.pis-li:after { content: url('images/line.png'); display: block; margin: 20px 0; position: relative; text-align: center; } .pis-li:last-child:after { display: none; }Change the location of the image according to your theme structure. Change also the margin value according to your needs.
The last rule hides the last graphic. If you want it, remove that rule.
Finally, paste the above lines in your theme’s
style.cssfile.Let me know, please.
Hello,
since some months have passed from last reply, I close the thread. Feel free to reopen it or start a new one.Hi @aldolat
Thank you for your plugins! really AWESOME!
I did this tweak for displaying graphic for each post and it works perfectly, my question is, is it possible to have multiple graphic based on category slug?
for example, I have a multiple post type (videos, articles, galery, etc) differentiate by posts category. maybe the lists will look like this:
[image video icon] Video post title
[image article icon] Article post title
[image galery icon] Galery post titleis it possible to do more tweak with your plugin?
Looking forward hearing from you.
Thank you!
Hi @wiryoputro,
I think that you want the icon next to the post title, just before it.First of all, activate the option “Add the WordPress standard classes to the post in the widget” located in the panel Styles > Extra and save the widget. This will make that the standard WordPress classes will be added for every post in the list. These classes will be used to target every title with precision. Use the browser Inspector to view this change.
Then, prepare the icons to be used for every category you want.
Then, add something like this in your CSS file:
.posts-in-sidebar .category-video .pis-title::before { content: url('images/video-icon.png'); }This CSS rule will target every
post-titleclass that is child of an element withcategory-video, that is child of the mainposts-is-sidebarclass.Change
category-videoaccording to your category. Change also the path and the filename of the icon.Surely you will have to adjust something like height, width, etc., but it’s easy with CSS.
Take note that adding the WordPress standard class, as we did in the first step, will give you the chance to target posts not only by categories, but also by tags, post formats, etc.
Let me know, please.
Hi @aldolat,
Sorry for late reply.
Yes, I want the icon just before post title. and successfully did
aaaannnnddd..
IT WORKS! Your plugins is really AWESOME!
I thought its gonna need another custom code in functions.php, I didn’t see it the options in the Extra panel tho.Really appreciate. Thank you!
Cheers!
You are welcome! 🙂
The topic ‘Insert Graphic Between Posts’ is closed to new replies.