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
  • CSS Code
  • Edit in Modal
  • Word Wrap
  • Beautify
  • Close Modal
  • Copy
  • Remove
  • Activate/Deactivate
  • Search Global Stylesheets
  • Select Folder
  • Folders
  • Add
  • Search
  • Remove
  • Open
  • Modify name
  • Search
  • Edit

Was this helpful?

  1. Global Styles
  2. Global Classes & Stylesheets

Global Stylesheets

Last updated 1 year ago

Was this helpful?

The Global Stylesheets property allows you to add your own custom CSS rules when you are unable to find exactly what you need.

You can create as many global stylesheets as required.!!! You can create as many global stylesheets as required !!!

The stylesheets are deactivated by default to allow you to try things out before applying them and to have keep a few styles in reserve.

No need to minify or prefix your properties, Cwicly creates a minified version of your stylesheet for optimised delivery on the frontend.

Add

This allows you to add a new Global Stylesheet.

  • Open the Cwicly Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open the All tab.

  • Click ➕ to add a new Global Stylesheet.

  • Input a suitable name.

  • Click "Create".

  • Click name to open code modal.

CSS Code

The Global Stylesheets property allows you to add your own custom CSS rules when you are unable to find exactly what you need.

  • Input required CSS code.

Edit in Modal

This property allows you to edit your CSS code in modal.

  • Click name to open code modal.

  • Click Edit in Modal to edit your CSS code.

Word Wrap

This property allows you to wrap long words on to the next line of code.

  • Click name to open code modal.

  • Click Word Wrap.

Beautify

This property allows you to have your code automatically cleaned up and made pretty.

  • Click name to open code modal.

  • Click Beautify.

Close Modal

  • Click Back to close modal.

Copy

  • Open the Cwicly Global Classes and Stylesheets tab.

  • Open the Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Find desired Global Stylesheet.

  • Click to open CCS code.

  • Click Copy icon to copy.

Remove

You can remove the Global Stylesheet in two ways.

  • Open the Cwicly Global Classes and Stylesheets tab.

  • Open the Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Find desired Global Stylesheet.

  • Click 🗑 (trash) to remove.

  • Alternately,

  • Find desired Global Stylesheet.

  • Click to open CCS code.

  • Click Bin icon to remove.

Activate/Deactivate

The Global Stylesheet can be activated/deactivated in two ways

  • Open the Cwicly Global Classes and Stylesheets tab.

  • Open the Global Classes and Stylesheets tab.

  • Open Stylesheets tab.

  • Find desired Global Stylesheet.

  • Click button to activate/deactivate.

  • Alternately,

  • Find desired Global Stylesheet.

  • Click to open CCS code.

  • Click activate/deactivate to activate/deactivate Global Stylesheet.

Search Global Stylesheets

To speed up your workflow, the Search bar allows you to find a Global Stylesheet rapidly and efficiently.

  • In the Global Stylesheets tab, find the Search bar.

  • Input the name of the Global Stylesheet you wish to locate.

Select Folder

This property allows you to select the Folder to which you wish to add a particular Global Stylesheet.

  • Open the Global Stylesheet which you wish to add to a folder.

  • Click "Select folder"...

  • Input name of folder (or select in dropdown) to which you wish a Global Stylesheet to be added.

Folders

From here you can add a Global Stylesheet Folder, search for a particular Folder and visualise, reposition or delete existing Folders.

  • Open Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open Folders tab.

Add

This property allows you to create a new Global Stylesheet Folder.

  • Open Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open Folders tab.

  • Find Global Stylesheets Folders and click "+" to open the Add Global Stylesheets Folder modal.

  • Input a suitable name and click Create.

Search

The search property allows you to locate a required Global Stylesheet Folder.

  • Open Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open Folders tab.

  • Input a Folder name in the Search bar.

Remove

The Remove property allows you to delete a Global Stylesheet Folder.

This does not delete the individual Global Stylesheets.

  • Open Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open Folders tab.

  • Click Remove icon next to Global Stylesheet Folder to be deleted.

Open

  • Open Global Classes and Stylesheets tab.

  • Open Global Stylesheets tab.

  • Open Folders tab.

  • Click Global Stylesheet Folder to be opened.

Modify name

You can change the name as required.

Search

The Search property allows you to locate a Global Stylesheet Folder.

  • Input Global Stylesheet Folder name into Search bar.

Edit

You can edit a Global Stylesheet Folder by selecting the required Folder in the list.

  • Open Folders.

  • Select required Folder in the list.

  • You can now edit the CSS as required.

See

🌐
CSS Code