styling

Hi @litlbitl,

Try these styles:

.yikes-easy-mc-form input[type="text"], .yikes-easy-mc-form input[type="email"]  {
   padding: .6180469716em;
    background-color: #f2f2f2;
    color: #43454b;
    outline: 0;
    border: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.125);   
}

.yikes-easy-mc-form input[type="text"]:focus, .yikes-easy-mc-form input[type="email"]:focus {
    background-color: #e6e5e5;
    color: #2b2c30;
}

Let me know how that works for you.

Thank you,
Kevin.

Hi!

Nope, it does not work. But am I able to modify css in WP admin panel if it comes from outside of wordpress? Because I think the code you gave is ok, but it gets overwritten by plugin css later on… Or not?

Hello,

The CSS I gave you is not active on the page. At the moment, the issue is not the CSS being overwritten; the issue is that the CSS is not being added to the front end of your website.

Where are you trying to add/modify the CSS from? The Custom CSS portion of the customizer?

Hi again,

I removed the code since it had no effect.

But I added it again, as custom css. So the code is now active and it gets overwritten by plugin css, as I described earlier.

Seems we can only style those elements this way, that are not modified by the plugin css, so they stay as in custom css. Everything that has styling in plugin css is overwritten.

I see. We’ll add the !important flag to the styles that are being overwritten. That’s the border, the background color, and the padding. Change the CSS to this:

.yikes-easy-mc-form input[type="text"], .yikes-easy-mc-form input[type="email"]  {
   padding: .6180469716em !important;
    background-color: #f2f2f2 !important;
    color: #43454b;
    outline: 0;
    border: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.125);   
}

.yikes-easy-mc-form input[type="text"]:focus, .yikes-easy-mc-form input[type="email"]:focus {
    background-color: #e6e5e5;
    color: #2b2c30;
}

Excellent! That works perfect!

One thing though – I try to modify the focus css as well (with !important) flag. I can fix the background color, but not the border… Why?

Add outline: 0 !important;

Case closed! Thx for great support!

You’re welcome ??