Support » Plugin: Popup Maker - Popup Forms, Opt-ins & More » Invalid CSS shadows

  • Resolved Tim Havinga

    (@timhavinga)


    I am using a popup with a drop shadow. However, the shadow is not rendered because the generated CSS is incorrect. It reads for instance:

    box-shadow: 0px 0px 10px 5px rgba( 2, 2, 2, 0,5 );

    The 0,5 should be 0.5.
    In the popup preview, the CSS is generated correctly.
    The same is true for text shadows.

Viewing 7 replies - 1 through 7 (of 7 total)
  • @timhavinga I don’t know whether the CSS property-values you cite above are rendered by inline CSS from the plugin (which would be set using JavaScript). Can you post a URL link to your site and tell us what event triggers the popup? Am I correct to assume that the box-shadow is assigned to a popup container? Please provide more detail on which class attributes are being targeted with the ‘box-shadow’ property.

    Plugin Author Daniel Iser

    (@danieliser)

    @timhavinga – Hmm, not sure how that would happen, to be clear here is the code used to generate that https://github.com/PopupMaker/Popup-Maker/blob/master/includes/css-functions.php#L30

    It simply divides your chosen opacity by 100, which would never result in a comma value. It appears something is corrupting the output after that. A link would be helpful.

    Sorry, I don’t have a public website to link to.

    @yogaman5020: Yes, I set a shadow on the popup container. In fact, I altered the existing Enterprise Blue theme. Here’s the complete generated inline CSS:

    /* Popup Theme 39293: Enterprise Blue */
    .pum-theme-39293, .pum-theme-enterprise-blue { background-color: rgba( 0, 0, 0, 0 ) } 
    .pum-theme-39293 .pum-container, .pum-theme-enterprise-blue .pum-container { padding: 24px; border-radius: 5px; border: 1px none #000000; box-shadow: 0px 0px 10px 5px rgba( 2, 2, 2, 0,5 ); background-color: rgba( 247, 247, 247, 1 ) } 
    .pum-theme-39293 .pum-title, .pum-theme-enterprise-blue .pum-title { color: #fa3135; text-align: left; text-shadow: 0px 0px 0px rgba( 2, 2, 2, 0,23 ); font-family: inherit; font-weight: 600; font-size: 20px; line-height: 32px } 
    .pum-theme-39293 .pum-content, .pum-theme-enterprise-blue .pum-content { color: #2d2d2d; font-family: inherit } 
    .pum-theme-39293 .pum-content + .pum-close, .pum-theme-enterprise-blue .pum-content + .pum-close { height: 24px; width: 24px; left: auto; right: 4px; bottom: auto; top: 4px; padding: 4px; color: #ffffff; font-family: inherit; font-size: 16px; line-height: 16px; border: 1px none #ffffff; border-radius: 42px; box-shadow: 0px 0px 0px 0px rgba( 2, 2, 2, 0,23 ); text-shadow: 0px 0px 0px rgba( 0, 0, 0, 0,23 ); background-color: rgba( 49, 91, 124, 1 ) } 

    As you can see, all rgba()-functions with a decimal part are outputted with a comma instead of a period.

    I think this is a locale issue. I live in the Netherlands, where it is custom to write decimal numbers with a comma instead of the (US/UK) dot.

    A solution would be to use PHPs number_format()-function on said line.

    Plugin Author Daniel Iser

    (@danieliser)

    @timhavinga – Good call, did some research and in fact number_format is not locale aware, so it will force the expected value. Added a credit in the changelogs.

    This is working for me, can you test it works as expected for you?

    I just added number_format before the existing (

    function popmake_get_rgba_value( $hex, $opacity = 100 ) {
    	return 'rgba( ' . implode( ', ', popmake_hex2rgb( strval( $hex ) ) ) . ', ' . number_format( intval( $opacity ) / 100 ) . ' )';
    }

    Let me know if that solves it for you. This will be in the 1.6.1 update tonight, so if that doesn’t work we will keep digging.

    Caution! According to the documentation, the default value for the number of decimals is 0. This is not what you want in this situation, every decimal number will be rounded to either 0 or 1.
    I suggest a value of 2 for the decimals parameter.

    Aside from this, yes, the number is formatted correctly using number_format.

    Just saw your commit where you included the decimals parameter, excellent.

    Note that you are currently using three parameters, while the doc states:

    This function accepts either one, two, or four parameters (not three)

    I suggest using just two.

    Plugin Author Daniel Iser

    (@danieliser)

    @timhavinga – Thanks yea we got it corrected.

    Closing this now as we got it resolve finally.

    Take care, Please take a moment to click that it Works and to rate and review the plugin or support.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Invalid CSS shadows’ is closed to new replies.