Add-ons / CSS Macro

This macro allows you to change a target element's styles.

Author ChapelR
Website https://twinelab.net/custom-macros-for-sugarcube-2/#/css-macro
Story format SugarCube 2
Last checked Mon Jul 22 2024
License Unlicense
Download css.zip

Index

Overview

This macro allows you to change a target element's styles.

Macros

<<css>>

<<css>>

Syntax: <<css selector styleRules>>

This macro is used to target a specific element on the page and alter it's CSS.

⚠️ Danger: Note that, in general, using CSS classes and the <<addclass>> macro and its siblings makes more sense, and is typically recommended over using this macro – this macro can be seen as a brute-force method.

⚠️ Warning: This macro should be considered a DOM macro, meaning the same rules that apply to macros like <<replace>> also apply to this one – see the usage notes below for more.

Arguments:

Examples:

@@#hello; HI THERE @@

<<link 'change now'>>
    <<css '#hello' 'color' 'pink' 'test-style' 'underline' 'font-size' '0.8rem'>>
<</link>>

<span id='change-me'>CHANGE ME!</span>
<<set _styles to {
    'display' : 'block',
    'background-color' : 'red',
    'color' : 'white'
}>>
<<done>> /* `<<done>>` is a custom macro in this collection, not a default SugarCube macro */
    <<css '#change-me' _styles>>
<</done>>

Usage notes

⚠️ DOM macro warning:

From the SugarCube docs:

All DOM macros require the elements to be manipulated to be on the page. As a consequence, you cannot use them directly within a passage to modify elements within said passage, since the elements they are targeting are still rendering and not yet on the page. You must, generally, use them with a interactive macro (e.g. <<link>>) or within the PassageDone special passage. Elements which are already part of the page, on the other hand, present no issues.

Live demo

Demo Twee code:

:: Start
<<button 'Change Style'>>
    <<css '#hello' 'text-decoration' 'underline' 'text-transform' 'uppercase' 'font-size' '1.2rem'>>
<</button>> @@#hello;Hi there!@@