Notifications
Clear all

[Solved] Member banner fully clickable with a lift

1 Posts
1 Users
0 Reactions
12 Views
Danno6116
Posts: 78
Topic starter
(@danno6116)
Estimable Member
Joined: 2 years ago

I wanted to share a solution to make member profile banners clickable. By default, these are just background images, but this combination of PHP and CSS turns the entire banner into a functional link to the member's profile. I have also included a CSS hover effect so the banner "lifts" and brightens when a user moves their mouse over it, giving it a more premium feel.

The Two-Part Solution

Part 1: The PHP Snippet (This goes into your Code Snippets plugin or functions.php)

 

add_action('wp_footer', function() {
?>
<script type="text/javascript">
(function($) {
    function zippity_banner_activate() {
        $('.wpforo-member-bg').css('cursor', 'pointer');
    }

    $(document).on('click', '.wpforo-member-bg', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var profileLink = $(this).closest('.wpforo-member').find('a').first().attr('href');
        if(profileLink) {
            window.location.href = profileLink;
        }
    });

    $(document).ready(zippity_banner_activate);
    $(document).ajaxComplete(zippity_banner_activate);
})(jQuery);
</script>
<?php
});

Part 2: The Custom CSS (This goes into your wpForo custom CSS area)

.wpforo-member-bg {
    transition: all 0.3s ease-in-out !important;
}

.wpforo-member-bg:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
}

This is something that took me hours to find the answer. I hope this is helpful to everyone. If anyone sees a problem with this please let me know. But it seems to work really well.