Updated CSS Tools Plugin - now from Zeroqode

Hey Bubblers,
this is just a quick note that @jarrad has updated his very popular CSS tools plugin which is now managed by Zeroqode.
here is the list of improvements, he has made:

  • CSS Tool is much lighter now - its roughly half the size
  • no longer requires any ID’s
  • works in RG’s to add the class to the cell’s outermost element & groups without the need for the checkbox
  • it no longer has the change size without time (set time to 0 for right away)
  • the resize window height & width outputs are a lot more fluid
  • add style to head is far lighter
  • orientation is more responsive
  • all init states now return values & it returns the language of the browser now too.

Here is the plugin page: CSS Tools Plugin for Bubble | Zeroqode
and a demo page: https://zeroqode-demo-01.bubbleapps.io/css-tool

Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

2 Likes

Hi @levon,
I precisely need the feature that allows to change size, but without time dependence, and I just read in your post that you removed that: why? would it be possible to put it back?

Thanks!

we didn’t remove it. If you don’t have time dependance simply set 0 for it to fire away immediately

Ok, thank you @levon for your reply!
I tried to apply the feature but it doesn’t work as I expect: I have a few groups inside one main group and I want to resize all the groups at the same time when an icon is clicked but the result is that only the main group size changes.

Here is a link if you have time to take a look at it, it would help to know if I missed something:

Hi @levon - I purchased your resize and move plugin (which I believe has some of these same elements in it) in the hopes of addressing an issue I’m having with dynamic image widths.

The issue i’m having now is that I can change the image width, but all it’s doing is stretching the image rather than resizing the image to fit the new width. I’ve looked for a way to refresh the data in the image element, but am not having any luck. Happy to chat offline if that’s easier.

Hi Brian,
did you try putting the image as a group background and then change groups’ height or width? that may do the trick

Hi @levon,

Any chance to get an answer to my question?

1 Like

Does anybody know of some good tutorials that cover how to use the plugin? I tried looking over the editor supplied by zero code but find things confusing as a non-coder.

For example:

I have no idea what .woohoo is or .woohoo::after

I am unable to find anything that has an element with those ids or names. I am hoping to be able to grab some code from

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

and start playing around with it in bubble using the CSS Tools.

I think if I am able to understand how the code needs to be changed from the above link to be registered by bubble using the plugin, I would be able to learn how to change the code by learning a bit more.

I basically understand there is a need to use the element id attribute to use in the css code to reference the elements on the page to be changed, but unsure of how to get that portion. I really don’t have any idea of how to change the code around.

Any pointers or references ( hopefully audio and video tutorials ) would be greatly appreciated.

Cheers

Hi @boston85719 Did you finally figure out how to use the plugin ? Any video ou tutorial to share ?

No I abandoned this plugin. Instead I use classify plugin. After installing it I spent a few weeks learning through google how to make use of CSS as well as scouring the bubble forum for any and all tidbits that were relevant to my needs. I don’t have any tutorial in mind that I used as I used so many different sources to learn how CSS works and how to apply it to my use cases.

1 Like

Hello, friends.

Apologies for the inconvenience you are all facing, using the CSS Tools plugin demo page. :pray:

We will schedule the demo page optimization works to make it be more understandable and handy for all our users. We hope to inform you about the end of the plugin demo page/documentation works soon :slightly_smiling_face:

Thank you all for your patience.
Regards,
Zeroqode Team

Hello everyone! @boston85719 @ulrich_00132

Thanks for your feedback and support. We’ve updated the plugin with new features, as well updated the demo page for representation - https://zeroqode-demo-01.bubbleapps.io/css-tool
Also we created documentation to start working with the plugin which can be found here - https://zeroqode.com/plugin/css-tools-1528970497931x299713501226598400
with examples to get started and setup. :slight_smile:

Thanks for patience and understanding :pray:

Regards,
Zeroqode Team.

Anyone know if there is a way to use CSS tools to change the width of a specific RG cell?

Hello, @eLPDev !

Thank you for reaching out.

Yes, you have such an option using this plugin. In order to do that, you need to know the ID of that specific RG and the class name of the cell, where you want to change the width. And using our CSS plugin you can change it there.

Please, also refer to the documentation to find more info about plugin setup. You can find it here https://docs.zeroqode.com/plugins/css-tools-plugin

Please, let us know if you need anything else.

Best regards.

The instructions do not show images in the “Workflow example” section.

I must say that the demo and documentation is very difficult to understand. I’ve been trying for hours, but I still can’t get the plugin to work.

2 Likes

Hello, @MarkusB! Thanks for reaching out.
Please accept our sincere apologies for the late reply. :pray:

Oh, sorry for this. We will fix this issue asap.


We are sorry for this situation also. Unfortunately, to be able to use some plugins, it might need at least beginner skills in some coding areas (CSS/JSON/JS related plugins, etc). Still, we tried to provide the best documentation for the free plugin. :slightly_smiling_face:

Please, if you feel something might be improved or you have faced some flaws on our demo page/doc - let us know. We will do our best to fix those points. Images in the documentation we will fix in short terms.

Regards,
Zeroqode Support

It’s nice to know that it’s me who’s stupid, not your documentation is insufficient :+1:

@MarkusB,

Apologies, we did not mean that. It is fair that our documentation and demo page might be in some cases difficult for understanding, but we strive to improve it as much as possible. :pray:

By the way, we have updated images in the doc. Hope it helps!
https://docs.zeroqode.com/plugins/css-tools-plugin#workflow-example

Please let us know if there’s anything else you’d like us to change in the demo/doc to make it better. We will highly appreciate the feedback.

Regards,
Zeroqode Support