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 [2023-03-16 13:47] – [Custom Styling with CSS] mattiasblocks: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 8: Line 16:
   * Global CSS, automatically loaded onto all Spots in a system using the //defaultSpotCSS// setting in the [[blocks:server_configuration_file|server configuration file]].   * Global CSS, automatically loaded onto all Spots in a system using the //defaultSpotCSS// setting in the [[blocks:server_configuration_file|server configuration file]].
  
-General and global CSS can be placed anywhere under the //public// directory. Avoid using a word processor or similar program to create this file, as it must be a plain text file. On MacOS you may want to use the free version of [[https://www.barebones.com/products/bbedit/download.html|BBEdit]], on Windows you can use [[https://notepad-plus-plus.org|Notepad++]] but even better use a code editor such as Visual Code.+General and global CSS can be placed anywhere under the //public// directory. Avoid using a word processor or similar program to create this file, as it must be a plain text file. On MacOS you may want to use the free version of [[https://www.barebones.com/products/bbedit/download.html|BBEdit]], on Windows you can use [[https://notepad-plus-plus.org|Notepad++]] but even better use a code editor such as [[blocks:drivers:tools#install_visual_studio_code|Microsoft's Visual Studio Code]].
  
 Block-specific CSS is placed inside a block's directory and referenced using a block-relative path beginning with a tilde character. The following //Custom CSS URL// will load a CSS file named styles.css in the block's directory: Block-specific CSS is placed inside a block's directory and referenced using a block-relative path beginning with a tilde character. The following //Custom CSS URL// will load a CSS file named styles.css in the block's directory:
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 =====