{"id":720,"date":"2010-05-15T08:36:48","date_gmt":"2010-05-15T15:36:48","guid":{"rendered":"http:\/\/www.ait-pro.com\/aitpro-blog\/?p=720"},"modified":"2012-10-06T10:17:08","modified_gmt":"2012-10-06T17:17:08","slug":"wordpress-custom-divider-image-for-posts-wordpress-custom-border-image-for-posts","status":"publish","type":"post","link":"https:\/\/www.ait-pro.com\/aitpro-blog\/720\/misc-projects\/wordpress-tips-tricks-fixes\/wordpress-custom-divider-image-for-posts-wordpress-custom-border-image-for-posts\/","title":{"rendered":"WordPress Custom Divider Image For Posts – WordPress Custom Border Image For Posts"},"content":{"rendered":"

The orginal question was regarding how to add a custom image divider or border at the bottom of WordPress posts.<\/p>\n

LOL you’re working on your WordPress site right now. I tried to look at your WordPress site to get a better idea about your question and the visual look changed. \ud83d\ude09 To modify the formatting of your posts div containers and classes would be something you would modify in the style.css file for your particular WordPress Theme. Example #1 – The typical div class name in your style.css file for WordPress is .postmetadata. This displays a standard solid border between posts. To add your custom image for the dividing bottom border see Example #2.<\/div>\n

Example #1<\/p>\n

.postmetadata {
\nclear: left;
\nline-height:20px;
\ncolor:#ffdc8e;
\nbackground-repeat:no-repeat;
\npadding:10px 0px 10px 0px;
\nmargin:0px 0px 0px 0px;
\ntext-align:right;
\nborder-bottom:solid 1px #0f4254;
\n}<\/code><\/p>\n

Example #2 – adding your own custom image as the divider \/ bottom border in posts<\/p>\n

.postmetadata {
\nclear: left;
\nline-height:20px;
\ncolor:#ffdc8e;
\nbackground-image:url(images\/your-custom-divider.jpg);
\nbackground-repeat:no-repeat;
\nposition: absolute; left: 0; bottom: 0;
\npadding:10px 0px 10px 0px;
\nmargin:0px 0px 0px 0px;
\ntext-align:right;
\n}<\/code><\/p>\n

If this is WordPress Theme you are coding from scratch you will obviously need to create a style.css. Good Luck!<\/p>\n

Official WordPress Resource Page on CSS<\/p>\n","protected":false},"excerpt":{"rendered":"

The orginal question was regarding how to add a custom image divider or border at the bottom of WordPress posts. LOL you’re working on your WordPress site right now. I tried to look at your WordPress site to get a better idea about your question and the visual look changed. \ud83d\ude09 To modify the formatting […]<\/p>\n","protected":false},"author":167,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[13],"tags":[132,131],"class_list":["post-720","post","type-post","status-publish","format-standard","hentry","category-wordpress-tips-tricks-fixes","tag-wordpress-post-custom-image-border","tag-wordpress-post-custom-image-divider"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/posts\/720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":0,"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/posts\/720\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/media?parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/categories?post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-pro.com\/aitpro-blog\/wp-json\/wp\/v2\/tags?post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}