beaverbuilder / bb-code-settings

A simple plugin that adds CSS and JS settings to rows, columns, and modules
18 stars 2 forks source link

CSS didn't work #1

Closed tuanbbhero closed 4 years ago

tuanbbhero commented 5 years ago

Hi. I tried plugin with Text Editor Module. I pasted some content from jeffsum.com, then insert a link. Then use CSS a { color: green !important; } It works in Editing Mode, but not after saving (Done > Publish). Here is screen recorder video: https://www.loom.com/share/c1bb278f95a749c1a88862c011fa5475

I also tried with strong tag, it also had problems like a tag and finally, the plugin is great, it will help my current work.

fastlinemedia commented 5 years ago

@tuanbbhero thanks for the report. Can you send along the raw text content that you pasted into the editor? I can't recreate the issue on my end so I'm thinking inline styles might be at play here.

tuanbbhero commented 5 years ago

@fastlinemedia Here is content

<strong>You're a very talented</strong> young man, with your own clever thoughts and ideas. Do you need a <strong>manager?</strong> Yes, Yes, without the oops! Just my luck, no ice. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!

They're using our own satellites against us. And the clock is ticking. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!

Yeah, <a href="https://www.google.com" target="_blank" rel="noopener">but John, if</a> The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Remind me to thank John for a lovely weekend. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Remind me to thank John for a lovely weekend.

CSS I Used in Advanced Tab a { color: red !important; font-weight: bold; } a:hover { border-bottom: 1px solid currentColor; } strong { color: red; }

and Exported Module: https://janebb.xyz/wp-content/uploads/2019/10/beaverhero.WordPress.2019-10-15-1.zip

DavidWaumsley commented 5 years ago

Hello Justin,

Just to add to this I have found this CSS (below) works in the usual BB page layout, but not in the module, column or row options.

HTML: <div class= "pulse"></div> CSS: .pulse{ position: relative; width: 100px; height: 100px; border: none; box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7); border-radius: 50%; background-color: #e84c3d;
cursor: pointer; -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); }

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

fastlinemedia commented 5 years ago

Thanks!

@DavidWaumsley it looks like we were breaking keyframes. That has been fixed if you download a fresh copy from the repo homepage.

@tuanbbhero I tested that code and it worked as expected. Any chance you have a live page with an example of it not working?

DavidWaumsley commented 5 years ago

Many thanks Justin, That works now when in the page builder, but sadly not after publishing. This is the error my CSS editor picks up on:

http://cloud.wpcornershop.com/3457da6fcd48

fastlinemedia commented 5 years ago

Thanks @DavidWaumsley. Looks like our backend compiler for scoping CSS to the current node needed fixing too. I just pushed a fix. Let me know if you run into anything else.

DavidWaumsley commented 5 years ago

Thanks Justin. I will try it out.

I have just put out a first video and post in this plugin; https://www.beaverjunction.com/the-most-important-beaver-builder-addon-ever/

I'm locked out of Facebook or would have shared it with the Beaver Builder group.