Overwrite CSS of Instaemail plugin popup

Question

I am using instaemail plugin on my wordpress for sending a post by email and I am trying to customize popup window, but seems that I can not overwrite Id or I don't know how to do it. Same popup you can find on link above if you click on email (try it)

I had success with changing wraper color and classes by putting in style.css

div#pf-email-wrapper {
    background-color: rgba(09, 85, 3, 0.50);
}

but how to change (overwrite URL)

.email-sprite{
  background: url('/images/email/email-app-sprite.png') no-repeat;
}

or change color of

.pf-email label {
  color:#356da9; }

So the CSS in style.css would overwrite default CSS of Instamail script It is not problem in priority It is in calling the class in style.css probably

P.S. Is there any plugin which for "send to friend" button and to customization of popup and customization of email template

Answer 1

This is a CSS-related question, more than a Wordpress related one. In your case all the rules that apply for normal CSS overriding are usable to solve your problem:

• Cascade: Apply the rules with the same specificity (same number and types of selectors) after the rules written by your plugin. The way to achieve this depends on which hook your plugin uses to enqueue its styles; you can look at the source code and check for that and then use the priority argument of the hook to achieve proper cascading.
• Specificity: Simply be more specific than the rule you want to overwrite. Read more about specificity.
• Use !important: add !important after the rule you want to display and you will win all specificity/cascade wars… ever. Hence, this is not really recommended when you have other options.
• Use inline styles: This is strongly not recommended, because it's usually a bad practice. I am putting it out there just for the sake of completeness, hence I will not elaborate on that.