Support » Plugin: Simple Custom CSS » quotation marks get turned into HTML entities

  • Resolved Dion

    (@pyxelfish)


    When I enter quotation marks (e.g input[placeholder=”Your email address”]) they come out in the CSS as HTML entities (e.g. input[placeholder='Your email address']). This invalidates my code. Is it possible to change this?

    The reason I am styling a form input field based only on its placeholder is because that’s the only attribute that differentiates it from another input field – I am dealing with two forms in different languages, and the translated text in one is longer than the original text in the other, so I need to adjust the size, margins etc as a result.

    http://wordpress.org/plugins/simple-custom-css/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author John Regan

    (@johnregan3)

    Hi Dion!

    This is a bit tricky. I’m using an escaping function ( esc_html() ) on the output to prevent major destruction that can be caused by errors in the input. That’s why the double quotes are being converted.

    I’m sure you have a good reason, but I’m curious as to why you can’t add a class to the input to differentiate it from the other. That would be the best solution for this problem.

    Could you give me some more information on that?

    Thanks!

    The forms are generated by plugins, I wouldn’t know how to edit the plugins to insert a new class.

    Plugin Author John Regan

    (@johnregan3)

    Hmmm. That’s a tough one. We shouldn’t ever directly edit plugins, because our work can be deleted when they are updated (You probably already know that. I’m just writing it here in case someone else views this thread).

    One hacky method around this is to use jQuery to target that input, then add a class that way. Something like

    jQuery( ‘input’ ).each( function() {
    if ( jQuery( this ).attr( ‘placeholder’ ) == ‘Your email address’ ) {
    jQuery( this ).addClass( ‘myclass’ );
    }

    Then in your CSS you can do something like:

    input.myclass {
    –some style–
    }

    Of course this is hacky — not the optimal way to do it, but it should get the job done in a pinch. Also, keep in mind that this is untested code, so you may have to fudge with it to get it to work.

    Anyway, I just wanted to take a shot at solving this issue. Thanks again for using this Plugin!

    John

    Plugin Author John Regan

    (@johnregan3)

    Shoot. I just realized I forgot my closing brackets on the jQuery. It should be more like:

    jQuery( ‘input’ ).each( function() {
    if ( jQuery( this ).attr( ‘placeholder’ ) == ‘Your email address’ ) {
    jQuery( this ).addClass( ‘myclass’ );
    }
    });

    Another side effect to stripping quotes is that I can’t add a pseudo class such as:

    .somediv:before {
      content: "";
    }

    Hi John,

    Thanks for your response, sorry I didn’t get back to you before. I know basically nothing about jQuery or javascript, so I don’t know how to implement your suggestion, or even how to read the code so I can replace placeholders with the correct information (though I can probably learn that if I read up on it). Would I put your code inside <script> tags in Custom CSS, or somewhere else?

    Plugin Author John Regan

    (@johnregan3)

    Hi Dion,

    In my first response to this thread, I mentioned that I use an escaping function due to security concerns. I’ve had a few other people mention that they’d like to use double quotes in their CSS, so I plan to include an option to disable this function in my next release. I can’t say exactly when that will be, but it is top priority for my next release. I think it will help your situation quite a bit.

    Thanks!

    John

    OK thanks John! I’ll look out for it!

    Plugin Author John Regan

    (@johnregan3)

    Marking as resolved

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘quotation marks get turned into HTML entities’ is closed to new replies.