Usage

This extension allows you to apply specific styles to individual pages. To enable this feature, add script.data and/or style.data files to a folder with the same name as the page name and on the same directory level. Write custom CSS code in the style.data file and custom JS code in the script.data file:

.\
└── lot\
    └── page\
        ├── lorem-ipsum\
        │   ├── script.data
        │   └── style.data
        └── lorem-ipsum.page

These HTML classes are added to the root element if it has a class attribute, when the current page has custom CSS and/or custom JS data. You can use this feature to create a specific look or response on your site from the client side if the following classes are found in the root element:

is:art

Will be added if custom CSS or JS data of the current page is not empty.

not:art

Will be added if custom CSS and JS data of the current page is empty.

Example usage in CSS code:

.not\:art a {
  color: #00f;
}

Example usage in JS code:

if (document.documentElement.classList.contains('is:art')) {
    console.info('This page contains custom CSS/JS code.');
}

These additional conditional statements are available for use in layouts to show/hide elements on your site from the server side:

$site->is('art')

Returns true if the current page has custom CSS or JS.

$site->not('art')

Returns true if the current page has no custom CSS and JS.

Example usage in HTML/PHP code:

<?php if ($site->is('art')): ?>
  <p>
    <?= i('This page contains custom CSS/JS code.'); ?>
  </p>
<?php endif; ?>