New
PeoplePress is here. Community building for WordPress, reimagined. Fast, modern, and built for the communities you've always wanted to run.
See it live

BuddyDev

Search

CSS styling the Invite Friends plugin in Youzer

Tagged: , ,

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 25, 2019 at 10:21 am #22588

    Hi everyone in this awesome community 🙂

    This is a bit of a plea as the support forum for this plugin is abandoned 🙁 (https://wordpress.org/support/plugin/invite-anyone/) I am looking to know what the CSS class is for this or even what can make this look less clumped together (spaced out well with a bit of styling…)

    This is due to the Youzer plugin removing the CSS, so I need it again to put it in the global settings. (yep, same story).

    Anyone got any ideas, or even what the class is for this? I would show you the link here but you’d need to be logged in. I am trying to get this looking less squished as well, maybe 1px between each line but i’d have to play about with that…

    Any suggestions / ideas are welcome.

    Many thanks to this community.

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 25, 2019 at 10:26 am #22589

    Here is a screenshot:

    https://prntscr.com/ngo4ln

  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on April 25, 2019 at 4:16 pm #22601

    Hi Kristian,
    You can add the following css

    

.widget.invite-anyone p,
.widget.invite-anyone form {
  padding: 20px;
}

    That should make it a bit better.

    Reagards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 29, 2019 at 6:10 pm #22664

    Thank you Brajesh, and sorry for the late reply. I wasn’t very well but feel better now 🙂

    The code is great! thanks! but, is there a way I could adjust the left side too? it seems to only work on the right hand side 🙁

    Here’s the new screenshot:

    https://prntscr.com/nidytl

    Any CSS Suggestions my friend?

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 30, 2019 at 8:17 am #22681
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on April 30, 2019 at 12:09 pm #22693

    Please link me to a page showing the form.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 30, 2019 at 5:38 pm #22695

    Hey I already did in the last message, but here it is again: – (You should see the widget on the right after logging in):

    https://taipeiexpats.com/activity/

    it is titled: “INVITE FRIENDS TO JOIN TAIPEI EXPATS”

  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on April 30, 2019 at 5:43 pm #22696

    Try this

    
.widget-content.invite-anyone {
    padding: 20px;
}

.invite-anyone .widget-title {
   margin-bottom: 15px;
}

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on April 30, 2019 at 7:58 pm #22698

    It’s perfect! Brajesh, thank you. I even added some of my own to your amazing code to pad out the top text, too.

    The widget is looking and being awesome 😀

    Thanks again, sir!

  • Participant
    Level: Enlightened
    Posts: 46
    Kristian Yngve on May 1, 2019 at 8:50 am #22704

    Oh! sorry, Brajesh, just one last thing.

    I noticed the text is clumped together without any space below each line.

    What can I add to your plugin to provide a little bit between each text line?

    Thanks again, sir 🙂

You must be logged in to reply to this topic.

This topic is: not resolved