II.6.e. Stylesheets (CSS)

All CSS related to element positioning and sizing is contained in the public/css/base.css file. Desktop-specific and mobile device-specific CSS are located in the public/css/desktop.css and public/css/mobile.css files, respectively. These files should not be modified.

Style-specific CSS is located in the rest of the files:

• public/css/burichan.css
• public/css/futaba.css
• public/css/neutron.css
• public/css/photon.css

These files contain selectors setting element colors, borders, fonts, etc. If you wish to add your own style, take a look at the above files as examples.

Note: You have to put a comment containing the style name at the very top of your custom CSS file. For example:

/*Gurochan*/

body {
    background-color: #EDDAD2;
    color: #800000;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 14px;
}

/*And so on*/

You also have to create a corresponding jQuery UI stylesheet using this constructor and place it into the public/css/3rdparty/jquery-ui/<style_name> directory, where <style_name> is the base name of your custom CSS file, not the user-visible style name your have put to the very top of the file.

To modifiy existing styles without modifying the stylesheets, just insert your custom stylesheet into the page, for example, in custom-header.jst:

<div style="display: none">
    <script type="text/javascript">
        (function() {
            var path = "custom/my-style-{{=it.settings.style}}.css";
            lord.createStylesheetLink(path, true);
            //"true" indicates to prepend the path with common prefix:
            //site.pathPrefix + "css/"
        })();
    </script>
</div>