Small image before and after widget title

  • Hello!

    I am using the Kale theme and want to customize it a bit more for my sister. Currently in the titles there are to small lines before and after the titles that act as accents. I’d love for these to be small custom images.

    I think the code I need to adjust may be:

    .sidebar-no-borders .recent-posts-widget-with-thumbnails .rpwwt-widget .widget-title span::before, .sidebar-no-borders .recent-posts-widget-with-thumbnails .rpwwt-widget .widget-title span::after {
    ? ? ? ? content: “”;
    ? ? ? ? position: absolute;
    ? ? ? ? left: 0;
    ? ? ? ? top: 50%;
    ? ? ? ? margin-top: -2px;
    ? ? ? ? width: 20px;
    ? ? ? ? height: 4px;
    ? ? ? ? border-top: 1px solid #c4c4c4;
    ? ? ? ? border-bottom: 1px solid #c4c4c4;
    }

    Any idea how I could add an image on the left and the right of the titles using that code? (image files are: https://learningfrombees.com/wp-content/uploads/2020/04/smallleafright.png and https://learningfrombees.com/wp-content/uploads/2020/04/smallleafleft.png )

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello @finefolk

    You can add an image by just making few CSS changes:

    
/* Before Title Image */
.sidebar-borders .widget-title span:before {
    width: 65px; // Adjust according to your need
    height: 30px; // Adjust according to your need
    background: url(https://learningfrombees.com/wp-content/uploads/2020/04/smallleafleft.png);
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
}

/* After Title Image */
.sidebar-borders .widget-title span:after {
    width: 65px; // Adjust according to your need
    height: 30px; // Adjust according to your need
    background: url(https://learningfrombees.com/wp-content/uploads/2020/04/smallleafright.png);
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
}

    I hope this will help.

    Thanks,
    Abhishek

Viewing 1 replies (of 1 total)
  • The topic ‘Small image before and after widget title’ is closed to new replies.