Commentator plugin

[Lucas Atkins]

Hi,

As many have suggested, use the plugin on Envato called Commentator for an easy sync between UserPro. I have and really like the plugin. However, the plugin author looks to have vanished and no longer supporting the plugin. I have one simple question, but I am unsure how to resolve it with my novice understanding of CSS. If you visit http://videogamemedia.com/screenshots/call-duty-advanced-warfare-screenshots-trailer-leaked/ and look at the comment it shows the user name and such dropping below and slightly behind the avatar. What CSS code can I correct or add via child theme to correct this error? Anyone that can help I would be very grateful!

Cheers,

[admin]

Is this css issue related to userpro or Commentator plugin? Because If it is related to commentator plugin, only the plugin author can give support regarding its elements.

[Lucas Atkins]

I’m not entirely sure. That’s what I was hoping to solve 🙂

Thanks,

[admin]

I’m fixing it in the inspector now, and will give you solution asap 🙂

[admin]

I tried this custom css in console and it solved the css problem:

#comments .comment {
padding: 0 20px 0 65px;
}

🙂

[Lucas Atkins]

Thank you very much!! You are awesome 😀

[admin]

You are welcome. 🙂

[test]

I am experiencing the EXACT SAME problem. I just bought the userpro plugin this morning.

Ahmed, can you please tell me exactly how did you fix the ‘avatar overlapping with username’ problem? Where do I have to make the css changes?

(ps: I am not at all technical).

To see the problem you can visit the following link:
http://www.consumerpolice.pk/ufone-feedback-complaints/

[test]

My theme is explicit. Quiet similar to Lucas’s theme (created by the same author).

[Anonymous]

@test try adding this to your custom CSS in your theme. This should solve your problem:

.commentator-comment-text {
padding: 25px 0px 15px 0px;
}

.commentator-comment-content .commentator-comment-header {
padding-left: 60px;
}

[test]

Totally Solved it. Thaaaaaaaank yooouuu POEM!!!! 🙂

[test]

@Poem – Also, when I install Userpro and Commentator plugin – The comments area goes further down and extra space is created on the page. Can I remove it somehow? Will be very grateful for your help!

Link: http://www.consumerpolice.pk/ufone-feedback-complaints/

[Anonymous]

It’s peem not poem 😉 . That extra space isn’t caused by UserPro, as you can see from the CSS below that is part of the commentator plugin:

#comments.commentator-area {
color: #333;
padding: 120px 20px;
font-size: 13px;
font-weight: 300;
position: relative;
z-index: 1;
}

What you need to do is add this to your custom CSS and it will remove the space:

#comments.commentator-area {
padding: 20px 20px;
}

Also to get future support from plugin author you need to login with your own profile and not the test profile. You also need to make sure you add your purchase code to your profile: have a read here for details on how to do it: http://userproplugin.com/userpro/forums/topic/please-read-the-support-rules-before-posting/

[test]

Oh sorry.

Thank yooooooooooooooooooooou Peem!!! You saved me hours of searches and support tickets. Won’t bug you more. May something great happen to you today for helping me with this. Cheers!

Ps: I’ll surely add my code. thx.

[Anonymous]

No problem, happy to help! If you are not doing so already I would strongly recommend using google dev tools on google chrome: https://developers.google.com/chrome-developer-tools/ . This is what I used to find the CSS that was causing that large space. All you need to do is right click on the element/area you are wanting to change then select inspect element which will bring up the CSS that affects that element. It’s a pretty vital tool to use when custom styling a theme or plugin.