CODEWITHSUNDEEP
phphtmlcsswordpress
devilcrab
devilcrab

Reputation: 139

Adding custom image as separator in wordpress footer

I want to add custom separator image in wordpress footer, here is my functions.php code:

function advertica_lite_widgets_init() {
register_sidebar(array(
    'name' => 'Page Sidebar',
    'id' => 'page-sidebar',
    'before_widget' => '<li id="%1$s" class="ske-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="ske-title">',
    'after_title' => '</h3>',
));
register_sidebar(array(
    'name' => 'Blog Sidebar',
    'id' => 'blog-sidebar',
    'before_widget' => '<li id="%1$s" class="ske-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="ske-title">',
    'after_title' => '</h3>',
));
register_sidebar(array(
    'name' => 'Footer Sidebar',
    'id' => 'footer-sidebar',
    'before_widget' => '<div id="%1$s" class="ske-footer-container span3 ske-container %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="ske-title ske-footer-title">',
    'after_title' => '</h3>',
));  }

I want to add image as separator between all 3 blocks, i tried couple of google help but didn't got any help relevant to what i was looking for. Would there be anyone who can assist me the modification ?

i want it something like this:

enter image description here

Upvotes: 1

Views: 371

Answers (1)

Purvik Dhorajiya
Purvik Dhorajiya

Reputation: 4880

.ske-container{
    display: inline-block;    
    padding: 0px 5px;
	width:30%;
	float:left;
    text-align:center;
    height:200px;
    background-image: url("https://i.sstatic.net/3vmnN.png");
    background-repeat: no-repeat;
    background-position: right top;  
}
.ske-container:last-child{
	background-image: none;
}
<div>
  <div class="ske-container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <div class="ske-container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <div class="ske-container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

Would you please add above CSS in your current theme style.css? And check it.

Upvotes: 2

Related Questions