BuddyDev

Search

[Resolved] Add small icon for Poke Button for more funny effect

Tagged: 

  • Participant
    Level: Master
    Posts: 497
    Daniel on January 10, 2019 at 4:22 pm #20103

    Hi,

    I think the Poke Button would have more funny effect if there is an image which could be integrated inside the Poke Button.

    Would that be possible to do?

    Thanks & Regards,
    Daniel

  • Keymaster
    (BuddyDev Team)
    Posts: 24593
    Brajesh Singh on January 10, 2019 at 9:32 pm #20111

    Hi Daniel,
    Please feel free to use css to add icon or use image. You should be able to do that.

    Regards
    Brajesh

  • Participant
    Level: Master
    Posts: 497
    Daniel on January 10, 2019 at 9:36 pm #20115

    Hi Brajesh,

    OK thanks will try.

    Regards
    Daniel

  • Participant
    Level: Initiated
    Posts: 14
    Carsten on January 1, 2020 at 5:35 pm #27157

    Hi there.

    I have just installed the poke plugin and changed – bp-poke/languages/bp-poke-en_US.po – from poke to send a smile and now I would really like to change the – bpdev_poke_me_button, to something else. Maybe a image or Icon.

    But I’m not really a css expert or a coding genius. So I would really appreciate it, if you could tell me, how to link a image/icon instead of and thereby change the poke-button.

    Best Regards Carsten.

  • Participant
    Level: Master
    Posts: 497
    Daniel on January 2, 2020 at 6:18 pm #27164

    Hi Carsten,

    I have used Font Awesome Icons from here http://waramo.co.jp/fa/

    I then used these Icons like this as CSS:

    locate the CSS Selector {
   content: "\f000";
color: blue;
font-family: 'dashicons';
position: relative;
top: 2px;
}

    Just to give you an idea.

    Hope it helps.

    Regards
    Daniel

    • This reply was modified 4 years, 10 months ago by Daniel.
  • Participant
    Level: Initiated
    Posts: 14
    Carsten on January 3, 2020 at 3:51 pm #27195

    Hi Daniel.

    Thanks for replying and sharing.
    I had actually not thought about using the css selector. But I can see that is very handy and I think I’ll upgrade my knowledge a bit. 🙂

    You can also find okay Icons on this link: https://developer.wordpress.org/resource/dashicons/#heart

    Regarding the CSS…

    I can move the button:
    #item-buttons > div.generic-button.poke-button {
    position: relative;
    top: 25px;
    }
    —————————————————————-
    I can remove the button:
    #item-buttons > div.generic-button.poke-button {
    display: none;
    }
    —————————————————————-
    But I cannot style it:
    #item-buttons > div.generic-button.poke-button {
    content: “\f004”;
    color: red;
    font-family: ‘dashicons’;
    position: relative;
    top: 0px;
    }

    Do you have a solution?

    There is also a another button – a.poke-user-button. But I have tried both!

    Best regards Carsten.

  • Participant
    Level: Master
    Posts: 497
    Daniel on January 4, 2020 at 8:15 am #27198

    Hi Carsten,

    I was able to style all the buttons with the CSS I have provided. You might should check to try another CSS selector (one above or so). Perhaps it is also related to your theme or try again with the “important” tag for each line:

    color: red ! important;

    Good luck!

    Regards
    Daniel

  • Participant
    Level: Initiated
    Posts: 14
    Carsten on January 8, 2020 at 4:05 pm #27268

    I have tried both, but nothing works on my theme. So I think you’re right. Regarding my theme! They have a plugin, that merge with the other plugins. So I guess, I’ll have to live with the Poke button 🙂
    Because I cannot remove these plugins. They are required by my theme.

    But I just discovered a new issue. When some users poke/smile back. Instead of showing the users name in the linkaddress, it shown this link – https://my-site/members/admin/activity/pokes/?poke_action=poke_back&user_id=94&_wpnonce=0e4726f624 and this message – There has been a critical error on your website. Learn more about debugging in WordPress.

    When I click the back button in google. It returns and I get this message – You have send a smile back to Sus.
    The strange thing about this is! That it is a few users, that are affected. Included the admin.

    No new registered users are affected!!

    Do you have any idea, what causes the issue?

    Best regards Carsten.

  • Participant
    Level: Initiated
    Posts: 14
    Carsten on February 15, 2020 at 4:44 pm #27722

    Hi Daniel.

    I just wanted to tell you. That I have fixed the poke button Issue.

    Here is the CSS:

    #buddypress:not(.youzer) div.action a.poke-user-button:before {
    content: “\2764” !important;
    color: #EF5B85 !important;
    position: relative !important;
    top: 2px !important;
    font-size: 0px !important;
    font-weight: 900 !important;
    }

    Best regards Carsten.

  • Keymaster
    (BuddyDev Team)
    Posts: 24593
    Brajesh Singh on February 17, 2020 at 11:44 am #27738

    Thank you both of you.
    Marking as resolved.

    Regards
    Brajesh

The topic ‘ [Resolved] Add small icon for Poke Button for more funny effect’ is closed to new replies.

This topic is: resolved