Links

Relative Styling

In Cwicly, relative styling refers to the exclusive feature where you, the builder, can target the style of children blocks from the parent block, and modify their styles from said parent’s editor panel. Any and every block can be targeted in the rule editor.
Basically, it is visual CSS Rules.
You no longer need to write CSS and code blindly when trying to apply styling from blocks.
In layman terms, to illustrate this term let’s use the example of genetics. If two parents are redheads, their child will receive the redhead gene. So a gene/style is exclusively passed down/targetable from the parent.
Add
Primary Tab
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Select the + symbol, that redirects you to the Design Tab
  4. 4.
    Open the Rules Editor
  5. 5.
    Add desired rules
  6. 6.
    Open the Relative Styling Editor by selecting the relative style
  7. 7.
    Add styling in the Relative Styling Editor
Design Tab
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Go to the Design Tab
  4. 4.
    Find the Relative Styling Tab
  5. 5.
    Add new Relative Style
  6. 6.
    Open the Rules Editor
  7. 7.
    Add desired rules
  8. 8.
    Open the Relative Styling Editor by selecting the relative style
  9. 9.
    Add styling in the Relative Styling Editor
How To - Relative Styling

Cheat sheet

Useful list of Relative Style rules that we commonly use.

Target child from parent block

Combinator
Selector type
Selector
Descendant " "
Class
child-class-name-here

Selected styling

Combinator
Selector type
Selector
--
Class
selected

Disabled styling

Combinator
Selector type
Selector
--
Attribute
disabled