Lyubomir

I did as you said – first I clicked “Refresh generator” and then “Refresh slider” but nothing changed.

@d4z_c0nf
Yes, I managed by following the steps from another thread. I accessed the functions.php file of the Child theme via FTP, deleted it and then re-uploaded a cleaned file. By the way, the issue was not in your coding. I didn’t comment properly. Thanks and cheers! ??

@d4z_c0nf: you rock! Your suggestion works perfectly. I chose the first option

add_action('__before_fp', 'add_divider_bar');
function add_divider_bar(){
    echo '<hr class="featurette-divider '. current_filter() .'">';
}

because the divider width is limited to the width of the featured pages area. In the other two cases the divider is as wide as the the screen itself which does not correspond with the other divider under the featured pages area.
The topic is resolved! Thanks a lot! You helped me twice today!

I deleted the functions.php file of the child theme via FTP and now the site is running OK. So, I continue with the divider ??

@d4z_c0nf: Because I need to modify the functions.php file I downloaded first the Customizr Child theme, activated it and modified the functions.php file of the Child theme with the following code copied from above:

add_filter('tc_slider_display', 'add_divider_bar');
function add_divider_bar($html){
    if ( ! tc__f('__is_home') )
        return $html;
    return $html.'<hr class="featurette-divider '. current_filter() .'">';
}

Then I saved the file and suddenly I had a blank page! I don’t know what happened but now the website cannot be loaded. I cannot access anything, I cannot reverse. What to do now?

You already know my website, but still, let me mention it: https://heartandsun.org

Yes, yes, this is exactly what I want! Thank you @d4z_c0nf !!! You are very good!
For me, this topic is resolved but I cannot close it because I am not its creator.

I tried many options and I realized that ‘border-radius’ indeed makes the corners of the square round but the OUTSIDE shapes of the corners (which we do not see anyway), not the INSIDE. The zoom effect is made by the inner parts of the square where ‘border-radius’ has no effect. Or at least this is the point I reached. If there is somebody out there that already did it successfully, please, share the snippet.

@electricfeet And how to do the zoom not only to square but the square to have rounded corners? I tried with

.round-div {
border-radius: 10px;
}

or other number of pixels but nothing happens.

It is difficult to believe but I managed to use an image as a border! I use the following CSS:

.round-div {
border-image-source: url(wp-content/uploads/2014/06/foggy_birds.png);
border-image-slice: 30 30 30 30;
border-image-repeat: repeat;
}

Still, I have two issues remaining:
1. The zoom became square instead of circle. Square looks fine too but I prefer circle.
2. The border image looks magnified compared with the sitewide background. I would like to tile it just like the sitewide background.

I saved the current solution and it can be seen here: https://heartandsun.org
I am afraid this is the limit of my skills. If somebody can complete the snippet I would be very grateful!

I was thinking, instead of trying to make it transparent (which is not possible – OK), can I use the same pattern as a background for the featured image? If this is possible then I don’t need to see the sitewide background – I will just overlay it with the same pattern in the area of the white square and will achieve the same result.
If you figure out something, please, put the full snippet.
Thanks!

Thanks Nikeo,

actually you have a great contribution for the beauty of the site. You have designed and developed a really beautiful, elegant and stylish theme! I am proud to show it to all my friends and I know that all users would enjoy it!