Invalid CSS shadows | WordPress.org
Skip to content
Forums
Skip to content
Forums
Plugin:
Popup Maker - Boost Sales, Conversions, Optins, Subscribers with the Ultimate WP Popup Builder
Invalid CSS shadows
Resolved
Tim Havinga
(@timhavinga)
8 years, 11 months ago
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)
Robert Gadon
(@yogaman5020)
8 years, 11 months ago
@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)
8 years, 11 months ago
@timhavinga
– Hmm, not sure how that would happen, to be clear here is the code used to generate that
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.
Thread Starter
Tim Havinga
(@timhavinga)
8 years, 11 months ago
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)
8 years, 11 months ago
@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.
Thread Starter
Tim Havinga
(@timhavinga)
8 years, 11 months ago
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
Thread Starter
Tim Havinga
(@timhavinga)
8 years, 11 months ago
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)
8 years, 11 months ago
@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.
Popup Maker - Boost Sales, Conversions, Optins, Subscribers with the Ultimate WP Popup Builder
Frequently Asked Questions
Support Threads
Active Topics
Unresolved Topics
Reviews
7 replies
3 participants
Last reply from:
Daniel Iser
Last activity:
8 years, 11 months ago
Status: resolved