🔥 Classify 4: A tiny plugin that brings CSS classes and +

[pictarbut1]

Hi

May I ask to upload here “Add css class name to an element and manipulate its properties via html element for beginners”? I spent hours in this issue without any success

[julienallard1]

hey @pictarbut1
not really sure I understand your request. It is explained in the first post how to add class to an element.

Here’s a link to a super simple demo. In preview mode, the yellow shape turns red when hovering it. https://bubble.io/page?type=page&name=classify-simple&id=tempjulien&tab=tabs-1

[pictarbut1]

Hi

Appreciate you quick reply

I’ve tried to implement your plugin - it doesn’t worked for me, although I’ve red about the ease of use this plugin. It’s probably because I used old project file. I’ll try again.

2 min later:

I found the mistake - applied the {addClass…} to the appearance dialog box.

[julienallard1]

[caeroa]

Hey @julienallard1 amazing plugin, I have been able to implemented some css background trick I wasn’t able to do it with just elementID.
Do yo happen to know if variables ( $ ), and ( &;after ), and ( &;before ) work with classify?

I am trying to implement some of this images effects:

Image Effects with CSS

but I have been able only to implement the ones who doesn’t use variables or before an dafter.

Cheers!!

[julienallard1]

Classify is only for assigning class names only. The variables you’re talking about are to be used with your CSS rules inside a tag.

[caeroa]

Thanks @julienallard1 , I was asking because the variables are not working for me. Maybe is something bubble related, but the plugin is working amazing

[julienallard1]

The demo you provided is displayed in SASS (SCSS) by default which is a language to write CSS more effectively but that needs to be compiled to CSS.

But the demo also offers the CSS version which should work fine in Bubble

[caeroa]

My bad, you are right, I am going to try the CSS version, thank yo so much.

[SerPounce]

@julienallard1, Hi, thank you for this free plug in.

I have been trying desperately to use it to remove the annoying padding in the bdk rich text editor output to no avail. Maybe you can advise what I am doing wrong.

Here is the output that I want to “unpad” (The boxes around “what the hell” and “what about now”)

Here is my HTML element (I jammed in any css that I felt might get rid of the padding):

Here is what I have as the ID attribute of the HTML:

Here is the ID attribute of the RTE output:

Any help is greatly appreciated.
SP

[julienallard1]

It would be easier to help if I could access your app (view only)… There could be several reasons.

[Edvard-D]

I’m trying to set a class in the ID Attribute field, and add additional classes as conditionals based on page width. The classes added as conditionals are working perfectly fine, but the class in the ID Attribute field isn’t being added. Without the conditionals I’m able to add classes in the ID Attribute field.

Any thoughts on why this might be happening?

[SerPounce]

Thanks @julienallard1. I PM’d you the deets. Very much appreciated.

[julienallard1]

This happens because when the element loads (on page load), there is a condition that is already true so the element never gets the chance to set the original ID attribute in the first place.
Conditions always have priority over standard settings.

You have to find a way to make all conditions false when the element loads, so the ID field gets applied (thus adding the class)…

[Edvard-D]

That’s too bad, but thanks for clarifying.

[julienallard1]

Or you can mention the standard class name to add into each conditions so it will be applied regardless which condition is true or not. It just makes the condition panel a bit messier…

[Edvard-D]

Yeah, that’s what I ended up doing. Was just hoping I’d be able to avoid it. Ah well, it works this way too. Thanks for the awesome plugin!

[SerPounce]

Thank you so much @julienallard1 for your amazing fast offline support and for helping me resolve the issue.

[julienallard1]

nice! glad it worked out!
You site is awesome, you must have spend a lot of time on it!

[SerPounce]

Thanks Julien. Yes, it’s been a labor of love for sure. But I’ve enjoyed every minute. Thankfully we have Bubble now so we can build our own inventions.