How do I add a button on the profile's portrait?



  • 0_1472599247518_Selection_048.png

    Next to the "online" and "follow"-button, I want to add another button (it's position should be on e.g. the bottom left of the portrait picture).

    How would I do this with a plugin? What hooks do I need?


  • Plugin & Theme Dev

    @Thadeusz-Lay don't think there are hooks to do that. You can accomplish it by adding some js and css in ACP -> Appearance -> Custom HTML & CSS.

    Here is an example. You will need to add code to handle what needs to happen on clicking the button.

    Custom Header:

    <script type="text/javascript">
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(ev, data) {
            $('[component="account/cover"] .avatar-wrapper').append('<button class="btn-new"><i class="fa fa-plus"></i></button>');
        });
    });
    </script>
    

    Custom CSS:

    .avatar-wrapper .btn-new {
        height: 2em;
        width: 2em;
        line-height: 2em;
        border-radius: 50%;
        border: none;
        background: #F44336;
        color: #fff;
        overflow: hidden;
        top: 93px;
        left: 4px;
       position: absolute; 
    }
    

Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.