Problems understanding how to use Class/Global Class/ID properly

General
1

I know HTML/CSS very well.
Maybe thats the reason why i’ve some problems understanding the Cwicly concept for styling things.

Example of an elements class structure:

.iconbox
   .iconbox__icon
   .iconbox__heading
   .iconbox__text

Is using the elements CLASS field for adding these classes to my elements the right way? I would think so because this are the main classes. If i need more general classes (grid classes for example) i would use ‘Global Classes’. Then there is this ‘Additional Classes’ field. What is the best use case for that?

Another example would be a .my-section class where i would style my section border, shadow, paddings and so on. If i apply the .my-section class to the elements CLASS field then how to override padding for a particular Section? How would I apply stylings to its ID instead?

Maybe i am confused a bit. It has happened several times that i was a bit lost in the Cwicly UI even if everything makes sense at the end. Could be I am missing a thing so I would appreciate if someone could help me to get a better understanding of the topic.

Thanks in advance! :slight_smile:

2

Hi there @michelyweb,

Thanks for your message, and I’m sorry the class system in Cwicly doesn’t make sense to you.

  • The Class field holds the class for the specific block. We do recommend to keep this unique throughout your website. If you delete the block, you delete the class styles.
    In the near future you will be able to remove the class and id, but currently Class holds all the styles you apply to the block it is linked to.

  • The Additional Classes field is there to hold any additional class you want to add to your block. Its intended use was to list all classes that belong to all the other blocks on your installation.
    Why have this specific field?
    Simply because if you ever rename one of the block’s class, whatever page/post/template you’re on, that new class name will automatically be applied to blocks that may contain that specific class.
    From the Additional Classes field, you can also add a class name that hasn’t been created by a block and that you don’t want to have as a global class.

  • The Global Classes field is ONLY to be used for Global Classes created for that specific purpose (editable from the Global Classes panel). Every time you add/create a global class inside this field, you can edit in using the visual style editor wherever you are on the installation.
    It is not linked to a block and can only be removed from the Global Classes panel.

The separations are basically:

  • Class → block class

  • Additional Classes → any class that belongs to a block + any class that isn’t a block class or global class

  • Global Classes → editable globally using the style editor

Hope that helps a little. We will have a video tutorial going over this in the next few weeks.

1 Like
3

Hi @Louis,

thank you for the explanation which makes it more clear.
Sorry if I’m being a bit annoying with this. I need to understand the system behind a brilliant tool like Cwicly to master it. Looking forward to the video tutorial about the topic.

So if i am understand that correctly Design changes on block level are applied to the Block Class only. There is no way to decide that i want to apply them to a specific additional class. In page builders like Oxygen and Bricks you can select an applied class and then tweak its styles. Thats not the case with Cwicly.

The Additional Classes are more for interlinking Block stylings. If a Block Class is used as Additinoal Class in another Block, then I have to find and tweak the original Block, right? Is there a way to jump to the original Block or to find them easily if I need to change anything?

Another question: Is a manually added Additional Class with global custom CSS code a bad idea?

Thanks Louis and Team! Very happy to see the progress Cwicly made in the past months.

1 Like