Theme Elements
Last updated
Last updated
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.
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.
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.
To return to the Links list, click the "Back" icon.
To delete a Global Links style, click on the "delete" icon.
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.
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.
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.
When you have finished creating your Image styles.
Click the "back" icon to return to the Image styles list.
Click "delete" icon next to Global Image Styles name.
You can create multiple Global Image Styles by applying a different class to each group of 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).
Allows you to style your buttons globally.
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.
To return, click on the "back" icon.
To remove Global Button Styles, click "delete" icon.
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.
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.
Allows you to style <input> blocks globally.
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.
To return, click on the "back" icon.
To remove Global Button Styles, click "delete" icon.
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.
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.
To return to list, Click on "Back" icon.
To remove Global Select Styles, click "delete" icon.
Tooltips Theme <tooltip> allows you to globally style tooltip themes.
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.
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.