Theme Elements
This allows you to apply styling to website elements on a global level, and adjust the responsive breakpoints (to ensure optimal user experience) for all your pages.
The styling targets HTML elements and not Cwicly blocks.
Global Style Paragraph <p>
Paragraph, <p> allows you to add global styling to the Margin & Padding of the paragraphs of your page.
Navigate to the Elements tab of the Gobal Styles tab.
Open the paragraph <p> tab.
Style Margin and Padding as required.
Before:
After:
Navigate to the Elements tab of the Gobal Styles tab.
Open the paragraph <p> tab.
Style Margin and Padding as required.
Global Style Link <a>
Link <a> allows you to style LInks <a> Globally.
You can pinpoint blocks with specific classes.
Navigate to the Elements tab in the Global Styles tab.
Open the Link tab.
Click "+" sign to add a Global Link.
Click Link window to open Link Panel.
Add link name, class and style as required.
Return to Links list
To return to the Links list, click the "Back" icon.
Delete Global Link
To delete a Global Links style, click on the "delete" icon.
Create a Global Link
In the Link tab of the Elements tab (Global Styles) set up the styles you require.
Global Link styles will not apply to styles that have already been added to the block..
Select the block to which you wish to apply the newly created Global Link.
Toggle Link icon on.
This will open the Link window.
Toggle "Active" on.
The Global Link styles you created will be applied to the selected block.
Global Style Image <img>
This allows you to Globally Style your image(s).
If you wish to style only Cwicly images globally, then add cc-img as the class.
Add Global Image Styles
Navigate to the Global Styles tab.
Open the Elements tab and then the Image <img> tab.
Click "+" sign to open Global Image Styles window.
Click Window to open Styles window.
Name your Global Image Styles.
Style your Global Image as required.
If you wish to target a particular class of image (for instance Cwicly: cc-img), add the class name of the images you wish to target for the Global Styles you have created.
The Image styles you have created will be automatically applied to all or class specified images.
Return to Global Image Styles List
When you have finished creating your Image styles.
Click the "back" icon to return to the Image styles list.
Remove Global Image Styles
Click "delete" icon next to Global Image Styles name.
Multiple Global Image Styles
You can create multiple Global Image Styles by applying a different class to each group of styles.
Create and apply Global Image Styles
Navigate to the Image tab of the Elements tab of the Global Styles tab.
Create your Global Image Styles as required.
The Global Image Styles will be applied to your image(s).
Global Style Buttons <button>
Allows you to style your buttons globally.
Add Global Button style
Navigate to the Global Styles tab.
Open the Elements tab and then the Image <button> tab.
Click "+" sign to open Global Button Style window.
Click Button window to open styling panel.
Input required Name into Global Button styles window.
Create required button styles using the available options.
Return to Global Button Style List
To return, click on the "back" icon.
Remove Global Button Styles
To remove Global Button Styles, click "delete" icon.
Create and Apply Global Button Styles
Global button styles will only be applied to blocks where the tag "button" is applied.
Create a Global Button style.
Select block to which want to apply a Global Button style.
Open the tag dropdown.
Make sure the tag "button" is applied.
Additional Global Button Styles
If you have more than one Button style, you will need to add the class of the block you want to style to the Class window in the Global Styles panel.
Select block to which you wish to apply Global Button styles.
Copy Class name.
Click "+" sign to open a new Global Button window.
Click new Button window to open styling panel.
Add the class of the block to which you want the button styles to be appied.
Create the Global Button styles you wish to apply.
Global Style Input <input>
Allows you to style <input> blocks globally.
Add Global Input Styles
Navigate to the Global Styles tab.
Open the Elements tab and then the Input <input> tab.
Click "+" sign to open Global Input Styles.
Click Input you want to style to open the Styles panel.
Add Input name.
Add Class if you have multiple Inputs or you want to target a specific class.
Choose type of input in dropdown.
Choose an Appearance from the dropdown if required.
Appearance may be used to control native appearance of UI controls, based on the particular operating system's theme.
Hide arrows (for number input) may be toggled on or off.
The input block styles may be set up from the Global Styles panel.
Return to Global Input styling List
To return, click on the "back" icon.
Remove Global Input styling
To remove Global Button Styles, click "delete" icon.
Global Style Select <select>
A Select component can be styled globally from the <select> tab of the Global Styles tab.
This allows you to globally style an option in a temporary modal menu.
Add Global Select Styles
Navigate to the Global Styles tab.
Open the Elements tab.
Open <select> tab.
Click "+" sign.
Click desired "Select" window to open the styles menu.
Name your Select Global Styles.
Add the Class of the Select element to which you wish the Styles to be added if necessary.
You will need to add a class if you have several Select Global styles.
Choose an Appearance in the dropdown as required.
Create required Global Styles from the Styles options.
Return to Global Select list
To return to list, Click on "Back" icon.
Remove Global Select Styles
To remove Global Select Styles, click "delete" icon.
Global Tooltips Theme styles <tooltip>
Tooltips Theme <tooltip> allows you to globally style tooltip themes.
Add Global Tooltips Theme Styles
Global Tooltips Theme styles allows you to add Tooltips globally to your page.
This allows you to create global Tooltip styles to showcase more information on an element when the user moves the mouse pointer over an element.
Open the Global Tooltips Theme styles tab in the Elements tab of the Global Styles tab.
Name your Global Tooltips Theme styles.
Create required styles using the styling options.
Add Global Tooltips Theme Styles to a block
Select block to which you wish to apply Global Tooltip Theme styles.
Navigate to the Advanced tab.
Open the Tooltips tab and make sure that "Active" is toggled on.
Find and select the Global Tooltips Theme styles that you wish to apply to the block in the Theme dropdown.
The Global Tooltips Theme styles should be applied to your block.
Last updated
