wangguard css integration

[Tomas Tamayo]

Hey guys,

I was thinking on fixing it in my child theme. But wangguard is a good plugin that worths, so I decided to request this here.

In wall activity the button of wangguard has not the same css style than the rest of the buttons. I attach you a capture.

Regards!!

[Varun Dubey]

Hi @tomastd
You can include specific css for it with class id wangguard-user-report
like this and also use :before
.wangguard-user-report{
}
.wangguard-user-report:before{
}
Regards
Varun Dubey

[Tomas Tamayo]

I have some problems with it.
In firefox inspector I can change the element{} and it works, but when I write it in wordpress custom CSS it doesn’t work. I attach a screen capture to show what I’m doing.

I copied the CSS from the “spam” button.
.wangguard-user-report:before{
margin: 0px 5px;
color: #FFF;
background: #CCC none repeat scroll 0% 0%;
border-radius: 3px;
font-size: 12px;
padding: 3px 5px;
position: relative;
width: auto;
top: -1px;
line-height: 1;
letter-spacing: 0px;
}

Thanks

[Varun Dubey]

Hi @tomastd

please try to use !important after each to override

Regards

[Tomas Tamayo]

Sorry, not working.
Any other option?
Thaks a lot!

[Tomas Tamayo]

Any help with this?
I have tryed editing custom.css in the child theme but it didn’t work either.

The class is class=”button wangguard-user-report”. Should I change something in de code?

.wangguard-user-report:before{
margin: 0px 5px !important;
color: #FFF !important;
background: #CCC none repeat scroll 0% 0% !important;
border-radius: 3px !important;
font-size: 12px !important;
padding: 3px 5px !important;
position: relative !important;
width: auto !important;
top: -1px !important;
line-height: 1 !important;
letter-spacing: 0px !important;
}

Thank you!

[Varun Dubey]

Hi @tomastd, use following code

.wangguard-user-report{
margin: 0px 5px !important;
color: #FFF !important;
background: #CCC none repeat scroll 0% 0% !important;
border-radius: 3px !important;
font-size: 12px !important;
padding: 3px 5px !important;
position: relative !important;
width: auto !important;
top: -1px !important;
line-height: 1 !important;
letter-spacing: 0px !important;
}

Regards
Varun Dubey

[Tomas Tamayo]

Working!!!

Even if it is easy to customize, I propose to be fixed by default in next theme updates.

Thanks a lot.

[Varun Dubey]

Thanks for your suggestion, i will include to our suggestion list.
I will close this topic.
Regards
Varun Dubey

[Tomas Tamayo]

Sorri Varun.
In member´s profile cover button options the CSS are the same we touched for the wall. Is anyway to solve this issue?

The class in the cover is defined as class=”wangguard-user-report wangguard-user-report-id-12″
The class in the wall is defined as class=”button wangguard-user-report”

Instead of using .wangguard-user-report{} can we write something to affect only to the concatenated class=”button wangguard-user-report”?

Thanks!

[Varun Dubey]

Hi @tomastd, let me check on that, i will update you shortly
Regards

[Tomas Tamayo]

I got it! 😉

Using .wangguard-user-report.button{} works fine. No need to use “!Important”.

Here is the code I used in custom CSS.

Regards!

.wangguard-user-report.button {
margin: 0px 5px;
color: #FFF;
background: #CCC none repeat scroll 0% 0% ;
border-radius: 3px;
font-size: 12px;
padding: 3px 5px;
position: relative;
width: auto;
top: -1px;
line-height: 1;
letter-spacing: 0px;
}

[Varun Dubey]

Thanks 🙂