PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
blocks:custom_styling [2024-11-09 20:48] – VSCode naming adminblocks:custom_styling [2026-01-19 09:47] (current) – Added note on non-latin fonts admin
Line 1: Line 1:
 ====== Custom Styling with CSS ====== ====== Custom Styling with CSS ======
-As everything in Blocks is based on standard HTML5 web technologies, you can use common techniques such as CSS and web fonts to change the look of buttons, panels and blocks in general. There’s a multitude of tutorials and documentation available on the web describing how CSS works, so here we will only look at how to incorporate such styling into Blocks, and give a few examples of what the results can look like.  There's also some examples of ready-made styles and associated test blocks found om our [[https://github.com/pixilab/blocks-css|github repository]]..+As everything in Blocks is based on standard HTML5 web technologies, you can use common techniques such as CSS and web fonts to change the look of buttons, panels and blocks in general.  
 + 
 +There’s plenty of tutorials on the web on how CSS works, so here we will only look at how to incorporate such styling into Blocks, giving a few examples of what the result can look like.  
 + 
 +{{ :blocks:css:cssdemo.png?nolink |}} 
 + 
 +{{ :blocks:css:cssdemo.zip |Here's a block}} demonstrating how to accomplisg the styling shown above. Download the ZIP and import it straight into Blocks using the "Import ZIP file" on the Block menu (do not unpack the ZIP before importing it). 
 + 
 +Find some mode examples of ready-made styles, fonts and associated test blocks found om our [[https://github.com/pixilab/blocks-css|github repository]].
  
 To apply custom styling, first create a CSS file, placing it under the //public// directory mentioned above under “Server Configuration”. CSS may be referenced and loaded in three different ways: To apply custom styling, first create a CSS file, placing it under the //public// directory mentioned above under “Server Configuration”. CSS may be referenced and loaded in three different ways:
Line 154: Line 162:
 You can only apply a single style file to a block. This is specified at the root level of the block. To use styles from multiple sources, combine them all into a single CSS file. You can also apply a CSS file globally, making it available to all blocks without any additional effort. This is done using the //defaultSpotCSS// setting in the [[blocks:server_configuration_file|server configuration file]]. You can only apply a single style file to a block. This is specified at the root level of the block. To use styles from multiple sources, combine them all into a single CSS file. You can also apply a CSS file globally, making it available to all blocks without any additional effort. This is done using the //defaultSpotCSS// setting in the [[blocks:server_configuration_file|server configuration file]].
  
 +==== Using non-Latin Fonts ====
 +If your target audience speaks a language using non-latin characters, such as japanes or korean, you need to provide the relevant fonts containing those character sets. [[blocks:custom_styling:non-latin-fonts|This application note]] describes how that can be done in a way that makes such fonts usable everywhere in Blocks.
 ===== Globally Applied Classes ===== ===== Globally Applied Classes =====