< regClientScript ‌ index ‌ addEventListener >

regClientCSS

Registers a CSS stylesheet - this stylesheet is loaded at the beginning of the head of the page.

Usage:

string regClientCSS($src); (show formatting legend)

This loads a CSS stylesheet with specific styling for elements generated by a snippet. This function call would be made in the snippet code before returning the final snippet value.

You can pass either the path to an external .css file, a header link tag or an actual block of css code.

Example 1

$src = "assets/snippets/mySnippet/style/mySnippet.css";
$modx->regClientCSS($src);

The CSS file is added to the document's head in the form

<style type='text/css'>@import:url($src)</style>

Example 2

$link = '<link rel="stylesheet" type="text/css" href="assets/snippets/mySnippet/style/mySnippet.css" />';
$modx->regClientCSS($link);

The entire string is inserted into the head of the document.

Example 3

$style = '<style type="text/css">\n
  #mySnip_main { background:yellow; }\n
</style>';
$modx->recClientCSS($style);

Again, this will insert the entire string into the head of the document.

Note

It is a good idea to make sure all of the tag elements your snippet generates are given specific Id and Class names to avoid conflict with the main site template's CSS. For example, an enclosing div tag could be given the Id "<div id='mySnip_main'>" and the snippet's CSS file would contain

#mySnip_main { background:yellow; }

with little chance that this would affect anything besides your snippet's div container.

< regClientScript ‌ index ‌ addEventListener >