Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Add
  • From Global Stylesheet Panel
  • From Block Inspector
  • Modify Name
  • Copy Element or Styles
  • Paste Styles
  • Reset
  • Delete
  • Select Class Folder
  • Drag
  • Duplicate
  • Delete
  • Global Classes Folders
  • Add
  • Folder Search
  • Open
  • Modify Name
  • Global Class Search
  • Edit Global Class
  • Remove Global Class

Was this helpful?

  1. Global Styles
  2. Global Classes & Stylesheets

Global Classes

Last updated 1 year ago

Was this helpful?

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

A Global Class can only be removed directly from the global style sheet panel.

Add

From Global Stylesheet Panel

  • Select a Cwicly block.

  • Open the Global Classes and Style Sheets tab.

  • Open Global Classes tab.

  • Open All tab.

  • Click ➕ to open the Add Global Class Modal.

  • Input Global Class name.

  • Click Create.

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

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.

Modify Name

  • Modify name in Name field as required.

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.

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).

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.

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.

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.

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.

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

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

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.

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.

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.

  • Input a suitable folder name and then click Create.

Folder Search

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.

Open

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.

Modify Name

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

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.

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.

Remove Global Class

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

When you remove a Global Class from a folder, it is only deleted from the folder but still exists.

  • Find the Global Class you wish to remove.

  • Click the "Remove from folder" icon to remove the Global Class from the folder.

.

.

.

🌐
Global/Block Classes