# šŸ”„ Classify 4: A tiny plugin that brings CSS classes and + **URL:** \ **Category:** Showcase\ **Created:** [September 23, 2019, 1:20pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741 "2019-09-23T13:20:06Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![pictarbut1](https://avatars.discourse-cdn.com/v4/letter/p/5e9695/32.png) [@pictarbut1](https://forum.bubble.io/u/pictarbut1)\ **Post date:** [May 14, 2020, 9:05am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/25 "2020-05-14T09:05:09Z")
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 ā˜¹ ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [May 14, 2020, 12:13pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/26 "2020-05-14T12:13:22Z")
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](https://bubble.io/page?type=page&name=classify-simple&id=tempjulien&tab=tabs-1) ---
**Author:** ![pictarbut1](https://avatars.discourse-cdn.com/v4/letter/p/5e9695/32.png) [@pictarbut1](https://forum.bubble.io/u/pictarbut1)\ **Post date:** [May 14, 2020, 12:34pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/27 "2020-05-14T12:34:10Z")
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. ![Screenshot 2020-05-14 15.38.23](https://us1.discourse-cdn.com/bubble/original/3X/9/e/9e3e9d284fc1e694b515007e94db91a3067b6b42.png) ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [May 14, 2020, 3:19pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/28 "2020-05-14T15:19:35Z")
šŸ¤™ ---
**Author:** ![caeroa](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/caeroa/32/9696_2.png) [@caeroa](https://forum.bubble.io/u/caeroa)\ **Post date:** [May 18, 2020, 9:17pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/29 "2020-05-18T21:17:49Z")
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](https://bennettfeely.com/image-effects/)** > > A collection of CSS snippets to create fast, complex image effects for websites but I have been able only to implement the ones who doesnā€™t use variables or before an dafter. Cheers!! ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [May 19, 2020, 1:59pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/30 "2020-05-19T13:59:21Z")
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. ---
**Author:** ![caeroa](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/caeroa/32/9696_2.png) [@caeroa](https://forum.bubble.io/u/caeroa)\ **Post date:** [May 19, 2020, 8:50pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/31 "2020-05-19T20:50:01Z")
Thanks @julienallard1 , I was asking because the variables are not working for me. Maybe is something bubble related, but the plugin is working amazing ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [May 20, 2020, 10:45am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/32 "2020-05-20T10:45:38Z")
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 ![Screen Shot 2020-05-20 at 06.43.38](https://us1.discourse-cdn.com/bubble/original/3X/a/2/a210beddb2d3a4b2bfda80e2c6e9ce3fa5d35ba8.png) ---
**Author:** ![caeroa](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/caeroa/32/9696_2.png) [@caeroa](https://forum.bubble.io/u/caeroa)\ **Post date:** [May 20, 2020, 2:48pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/33 "2020-05-20T14:48:30Z")
My bad, you are right, I am going to try the CSS version, thank yo so much. ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [June 8, 2020, 7:34pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/34 "2020-06-08T19:34:58Z")
@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ā€) ![Screen Shot 2020-06-08 at 3.21.08 PM](https://us1.discourse-cdn.com/bubble/original/3X/4/6/46f0b03ea767732dd12e9e0fc44478b690678728.png) Here is my HTML element (I jammed in any css that I felt might get rid of the padding): ![Screen Shot 2020-06-08 at 3.28.01 PM](https://us1.discourse-cdn.com/bubble/original/3X/0/7/07d87ac64f4b610e1eb2d122ab0cf7f106c24f3d.png) Here is what I have as the ID attribute of the HTML: ![Screen Shot 2020-06-08 at 3.33.22 PM](https://us1.discourse-cdn.com/bubble/original/3X/4/6/46eb62e464d1e04e95f79e4b2068e48aed9d33b0.png) Here is the ID attribute of the RTE output: ![Screen Shot 2020-06-08 at 3.27.48 PM](https://us1.discourse-cdn.com/bubble/original/3X/e/1/e147b6d80b939779827fd53b65a52dc8d25dd95e.png) Any help is greatly appreciated. SP ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [June 8, 2020, 9:56pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/35 "2020-06-08T21:56:44Z")
It would be easier to help if I could access your app (view only)ā€¦ There could be several reasons. ---
**Author:** ![Edvard-D](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edvard-d/32/62646_2.png) [@Edvard-D](https://forum.bubble.io/u/Edvard-D)\ **Post date:** [June 9, 2020, 7:10am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/36 "2020-06-09T07:10:51Z")
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? ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [June 9, 2020, 10:59am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/37 "2020-06-09T10:59:52Z")
Thanks @julienallard1. I PMā€™d you the deets. Very much appreciated. ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [June 9, 2020, 11:59am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/38 "2020-06-09T11:59:23Z")
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)ā€¦ ---
**Author:** ![Edvard-D](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edvard-d/32/62646_2.png) [@Edvard-D](https://forum.bubble.io/u/Edvard-D)\ **Post date:** [June 9, 2020, 1:14pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/39 "2020-06-09T13:14:10Z")
Thatā€™s too bad, but thanks for clarifying. ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [June 9, 2020, 2:52pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/40 "2020-06-09T14:52:12Z")
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ā€¦ ---
**Author:** ![Edvard-D](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edvard-d/32/62646_2.png) [@Edvard-D](https://forum.bubble.io/u/Edvard-D)\ **Post date:** [June 10, 2020, 8:52am UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/41 "2020-06-10T08:52:03Z")
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! ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [June 10, 2020, 7:26pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/42 "2020-06-10T19:26:04Z")
Thank you so much @julienallard1 for your amazing fast offline support and for helping me resolve the issue. ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [June 10, 2020, 8:01pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/43 "2020-06-10T20:01:37Z")
nice! glad it worked out! You site is awesome, you must have spend a lot of time on it! ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [June 10, 2020, 8:03pm UTC](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741/44 "2020-06-10T20:03:32Z")
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. [Previous page](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741.md?page=1) [Next page](https://forum.bubble.io/t/classify-4-a-tiny-plugin-that-brings-css-classes-and/67741.md?page=3)