AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
Notifications
Clear all

[Solved] Member banner fully clickable with a lift

1 Posts
1 Users
2 Reactions
344 Views
Danno6116
Posts: 83
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@danno6116)
Estimable Member
Joined: 2 years ago
[#72719]

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.


Share: