# Global Classes

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHaCiC4Pw4keDRRzNIpvW%2FScreenshot%202023-08-31%20at%2011.29.39.png?alt=media&#x26;token=f131c344-d47e-4ef6-a3e7-7a330e9fa87e" alt=""><figcaption></figcaption></figure>

Global Classes allow you to visually create & manage your own classes independently from any block and apply them anywhere and everywhere. They can be created, removed or copied

{% hint style="warning" %}
A Global Class can only be removed directly from the global style sheet panel.
{% endhint %}

## Add

### From Global Stylesheet Panel

* Select a Cwicly block.
* Open the Global Classes and Style Sheets tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FocoNLdQp1yTBBJ0YPmqL%2FScreenshot%202023-08-31%20at%2011.42.16.png?alt=media\&token=06c59808-3158-46e1-b889-8eeef46f1e6b)

* Open Global Classes tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FwA0HxHj6WJiUOShv0EAu%2FScreenshot%202023-08-31%20at%2011.43.19.png?alt=media\&token=830eb172-ee33-4561-9e42-3fb4459ed982)

* Open All tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDPjN9Z21P9qHgrRNdq5B%2FScreenshot%202023-08-31%20at%2011.44.12.png?alt=media\&token=bea051c5-ca09-475d-a09c-e9ac4046c70a)

* Click ➕ to open the Add Global Class Modal.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZNCl0S5nNGjOYuXAi77Y%2FScreenshot%202023-08-31%20at%2011.47.58.png?alt=media\&token=c216d447-c44b-4bf1-a8f9-64c4c87b4010)

* Input Global Class name.
* Click Create.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxbnzjJV24OECNdVKyVAj%2FScreenshot%202023-08-31%20at%2011.50.24.png?alt=media&#x26;token=7ef9eb0f-4774-4815-8800-c430f58296c8" alt=""><figcaption></figcaption></figure>

Now you can set up your Global Style as required. You can modify the name, copy, paste, reset and delete your Styles.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMa40RIxiFq26o8E6nkSv%2FScreenshot%202023-08-31%20at%2011.54.48.png?alt=media\&token=b2af86f9-b405-4e74-82f7-8aaac2bcc827)

### From Block Inspector

* Select a Cwicly block.
* Open the Block Inspector tab.
* Open the Primary tab.
* Click ➕ under the Class/ID field to open the Classes modal.
* Input Global Class name or search for required Class.
* Click 'Create' or press enter to create.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FamnlJYTedL5862wNxWdt%2FScreenshot%202023-09-01%20at%2010.58.52.png?alt=media&#x26;token=b9d84dda-1004-46a0-8af9-27a64cfd32c1" alt=""><figcaption></figcaption></figure>

{% content-ref url="../../cwicly/classes-and-ids/global-block-classes" %}
[global-block-classes](https://docs.cwicly.com/cwicly/classes-and-ids/global-block-classes)
{% endcontent-ref %}

## Modify Name

* Modify name in Name field as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FzEHW3dg6oBLV8TZy6CGb%2FScreenshot%202023-08-31%20at%2011.58.09.png?alt=media\&token=4fd7b556-b452-4ac5-ae29-51af4d9fa19f)

## Copy Element or Styles

This property allows you to copy and element or style that you can paste as required.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Click the Copy icon next to the Element or Styles name you wish to reset.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FfqnmQw0wcW0mwp1h50Lq%2FScreenshot%202023-08-31%20at%2011.59.27.png?alt=media\&token=16055472-6b56-4217-8322-5753283ec8f1)

## Paste Styles

This property allows you to copy and element or style that you can paste as required.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Click the Paste icon next to the name where you wish to paste your Styles or Elements.
* Paste using keyboard shortcuts (Command V, Control V).

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fh5ouPOr6tkY3GKfAw0dG%2FScreenshot%202023-08-31%20at%2012.01.10.png?alt=media\&token=df08d5a4-8203-4624-84e5-930ee21ab413).    ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3brbRqKoxVRLIPfzuyWI%2FScreenshot%202023-09-01%20at%2011.05.26.png?alt=media\&token=2f681681-d743-4235-8e18-92d218939e7b) &#x20;

## Reset

A Class can be reset from the Block Inspector.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Click the Reset Class icon next to the Class name you wish to reset.

### ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FuZ8PAEil2fmIHFERkgGJ%2FScreenshot%202023-09-01%20at%2010.52.35.png?alt=media\&token=af7e7e26-3f84-4f09-9e02-f4eca9f57112)

## Delete

A Class can be removed from the Block Inspector.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Click the Delete Class icon next to the Class name you wish to delete.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F58sz9mMM1LI5GaIhWhnz%2FScreenshot%202023-09-01%20at%2011.00.49.png?alt=media\&token=fdc25c31-7b63-4efb-af02-11b824b1a6d6)

## Select Class Folder

If you have organised your classes into Folders, you can Select the appropriate folder in the Global Classes tab.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Click "Folders" to open the folder modal.
* Select required folder in the dropdown.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F8aTP6gHWy7xs1PhV9e3u%2FScreenshot%202023-09-01%20at%2011.14.22.png?alt=media\&token=f56d1c91-bc32-45b9-8874-81d5f310b739)

## Drag

This property allows you to reorganise and change the order of your Global Classes.

* Open Global Classes and Style Sheets tab.
* Open Global Classes tab.
* In "All", find the Global Classes you have added.
* Drag to reorder as required using the Drag icon.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FgLXwU7bhrSq4TDkQ22xj%2FScreenshot%202023-09-01%20at%2011.47.00.png?alt=media\&token=8fe118c0-983a-478e-8d2e-d5f2fdae58ad)

## Duplicate

The Duplicate property allows you to duplicate or clone an existing Global Class.

* Select a Cwicly block.
* Open the Global Classes and Style Sheets tab.
* Open Global Classes tab.
* Find desired Global Class.
* Click Duplicate icon to duplicate

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F95NpvOcJBhHZYdjKpLyY%2FScreenshot%202023-09-01%20at%2011.48.13.png?alt=media\&token=b2f785a5-c36e-40c1-8c69-3e61f9a53189).&#x20;

The duplicated or cloned Global Class will now appear in the Global Class list.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Ft1vq6AzSBTDmcwEWsqXu%2FScreenshot%202023-09-01%20at%2011.50.37.png?alt=media\&token=6b646bfd-f017-4c40-8d17-20d1db954643)

## Delete

The Delete property allows you to remove a Global Class.

* Open Global Classes tab.
* Find desired Global Class.
* Click the Delete icon to remove the Global Class.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGTnmAGRqSXo3AWgrKtFT%2FScreenshot%202023-09-01%20at%2011.49.31.png?alt=media\&token=97a1355a-7864-4321-8d93-022a72ad4a44)

## Global Classes Folders

You can create Folders to contain and organise your Global Classes.

* Open the Global Classes and Stylesheets tab.
* Open the Global Classes tab.
* Open Folders.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FOjfilh7gQBTzisPbuCe1%2FScreenshot%202023-09-01%20at%2011.53.25.png?alt=media\&token=8852f518-4052-4a7c-b262-116862d1adf9)

### Add

This property allows you to add Global Classes to a Folder to keep them organised.

* Open Folders.
* Click the "+" sign next to Global Classes Folders to open the "Add Global Class Folder" modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FiGBkYy3p5LTZ9a4IBev5%2FScreenshot%202023-09-01%20at%2011.55.36.png?alt=media&#x26;token=56773184-c30d-448f-a8ce-a486562b1fbe" alt=""><figcaption></figcaption></figure>

* Input a suitable folder name and then click Create.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhfNKPyaeV4pTj7Ijsist%2FScreenshot%202023-09-01%20at%2011.58.08.png?alt=media&#x26;token=2d6eb006-cc5a-42d0-b404-136075150e1a" alt=""><figcaption></figcaption></figure>

### Folder Search&#x20;

The Search property allows you to quickly locate your Global Class Folders using the Search bar.

* In the Folders tab, input Folder name in the Search bar to locate the required folder.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fx3zb5Y26QbatORRk1MPP%2FScreenshot%202023-09-01%20at%2012.06.06.png?alt=media\&token=fc0cba30-4a48-456a-a1aa-b53c692c9db7)

### Open&#x20;

You can open a Folder to modify the Folder name and visualise, modify or delete a Global Class contained in a Folder.

* In the Folders tab, click the Folder name you wish to open.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0MYS3RBYhpifTQnteRLm%2FScreenshot%202023-09-01%20at%2012.07.20.png?alt=media\&token=2fd1ea7f-4be0-4114-9d84-2a7cf809971e)

### Modify Name

* In the Name field, delete old name and input required name.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FC3omYBMiABXz5hENBc1e%2FScreenshot%202023-09-01%20at%2012.08.51.png?alt=media\&token=c41020b3-f629-477b-91fd-0f3cb0757e25)

### Global Class Search

Allows you to locate a Global Class within a specified folder.

* Open Folder you wish to search.
* Input required Global Class name into Search bar.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4ieiF8FCdgIYc5xQQNzZ%2FScreenshot%202023-09-01%20at%2012.11.17.png?alt=media\&token=ae706420-8a52-45d8-b5f4-43c9d5d9fe2d)

### Edit Global Class

You have the possibility of editing a Global Class from a Global Class Folders.

* Select the Global Class you wish to edit.
* Make the required changes from the modal.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0VYiCHXz9PRpFHvKETQn%2FScreenshot%202023-09-01%20at%2012.16.01.png?alt=media\&token=bd95d18a-05cb-4666-87f9-2bb6e7625e78).    ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FrPyM0xCBhf3FkAxZcG5B%2FScreenshot%202023-09-03%20at%2011.30.35.png?alt=media\&token=1efe5e4d-7143-4642-8a3b-ae70c7fadacd)

### Remove Global Class

From a Global Class Folder, you can remove a Global Class from the folder.

{% hint style="info" %}
When you remove a Global Class from a folder, it is only deleted from the folder but still exists.
{% endhint %}

* Find the Global Class you wish to remove.
* Click the "Remove from folder" icon to remove the Global Class from the folder.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FpAG2vW2rJiROEpgSp4LZ%2FScreenshot%202023-09-03%20at%2011.31.11.png?alt=media\&token=a34b8409-4f44-4056-86e0-e504e764cb77)
