Generating CSS
Uray Web Library (UWeb)
When an HTML page is generated using UWeb, it will use certain CSS classes defined by UWeb. These CSS definitions must be available, otherwise the page will not look correctly. This documentation page describes the various ways to make these CSS codes available.
The simplest way to do this is to use one of the pregenerated CSS files. A more flexible solution is to generate a custom CSS file using UWeb.
2.2.4. $sel_color, $sel_bgcolor
2.3.7. $button_highlight_color
2.3.14. $input_disabled_bgcolor
2.3.16. $input_disabled_border_color
Two CSS files are generated automatically by UWeb:
basic.css: this file contains the most basic styles, which is suitable for simple static webpages. For example, this documentation page uses basic.css. all.css: this file contains all UWeb styles with default configuration (e.g. colors). This may be too big for simple webpages. The intended way to use these files is to copy (or better, symlink) the selected CSS file next to the HTML file (renamed to e.g. uweb.css for clarity), and then set basic_page::css() to this file. (This is how these documentation pages use basic.css.)
There is a more flexible solution than using one of the pregenerated CSS files. Webpages can generate their own CSS files using the tools provided by UWeb. In this way, they can select exactly what styles they need, so the clients are not overloaded with unused CSS definitions (as they could be with all.css), and these styles can be customized, e.g. using different colors. Webpages can also add new CSS definitions to the same generated file (under the same license as UWeb, i.e. GPLv3), which may improve load speed, compared to multiple separate CSS files.
A CSS file can be generated by the following steps:
css.php). basic.css.php from UWeb (it contains templates for the basic UWeb style definitions, a superset of basic.css), and optionally also active.css.php. generate() at the end of the file to actually generate the CSS code. php css.php >my.css, either directly, or through a Makefile.) Here is a simple example:
<?php
// Configure the header comment
$project = "Some Website";
$author = "Uray M. János";
$date = "2024";
// Configure and include the basic styles
$bgcolor = "#000";
$color = "#CCE";
$link_color = [["#C82", "#EA3"], ["#A74", "#C95"]];
$title_color = "#D22";
$has_toc = false;
$has_menu = $has_footer = true;
require_once __DIR__."/uweb/basic.css.php";
// Configure and include the styles for dynamic elements (optionally)
$has_button_image = true;
$has_input = false;
require_once __DIR__."/uweb/active.css.php";
// Define some custom styles (optionally)
big_title("Some Website styles");
open();?><style>
.some-class {
text-align: center;
}
</style><?php close();
// Actually generate the content
generate();
The generated CSS file will start with a comment similar to this:
/* Stylesheet -- Some Website Generated by the Uray Web Library (UWeb). License: GPLv3 or later, see ... Uray M. János © 2024 */
Its content can be customized by the following variables.
The title of the CSS file in the header comment.
Default value: "Stylesheet"
The title of the project name (website name) in the header comment, e.g. "Some Website".
This variable is required.
The author of the project in the header comment.
Default value: "Uray M. János"
The copyright date of the project in the header comment, e.g. "2024" or "2020-2024".
This file contains the basic styles and tools for generating a CSS file. It must be included in the generating PHP file.
The following variables can be used to configure these basic styles (e.g. turn them on/off, or customize them).
The default basic.css (used by e.g. this documentation) is generated from the default values of all these settings (except where noted).
Text color of the website, in CSS format (e.g. "#000" or "black").
Background color of the website, in CSS format (e.g. "#FFF" or "white").
The alternative background color for certain special areas, e.g. the title box of the page (see the top of this documentation page), or popup dialogs.
Default value: $bgcolor if it was redefined
Color of selection (text and background color), i.e. parts of the page that are selected by the user.
Default value: $bgcolor and $color (i.e. inverse colors)
Include the styles for HTML links (<a href='...'>).
Default value: true
Color of HTML links (<a href='...'>).
It is either a CSS color value (string), an array of color values, or an array of arrays of color values, defining the colors for the various link types. More precisely, the following combinations are allowed:
$color: the same color for all link types; [$normal, $visited]: different colors for links that the user has already visited ($visited) and other links ($normal); [[$normal, $hover]]: different colors for links with the mouse cursor currently over them ($hover) and other links ($normal); [[$normal, $hover], [$visited, $visited_hover]]: different colors for all combinations of the two properties above. Include styles for the page title, i.e. <p class='title'> and <div class='title-box'>.
This is required by basic_page::make_title().
Default value: true
Color of the title, i.e. <p class='title'> (e.g. inside basic_page::make_title()).
Default value: $color if it was redefined, and red in the default style
Color of the subtitle, i.e. <p class='subtitle'> (e.g. inside basic_page::make_title()).
Default value: $title_color
Include styles for the HTML headings: <h1>, <h2>, …, <h6>.
Default value: true
Include styles for the table of contents, generated by print_toc_content().
Default value: $has_headings (which is true by default)
Colors of the HTML headings: <h1>, <h2>, …, <h6>.
It is either a single CSS color value (for all headings), or an array of 6 color values (index 0 for <h1>, 1 for <h2> etc.).
Default value: $title_color if it was redefined
Include style for the author, i.e. <p class='author'>.
This style can be used inside basic_page::make_title() (e.g. see the title box on the top of this documentation).
Default value: false (but true in basic.css)
Include styles for smaller text: <p class='info'>, <span class='info'>, <a class='small'>.
Default value: true
Include style for a collection of links in a line:
<p class='links'> <a href='page1.html'>Link 1</a> <a href='page2.html'>Link 2</a> <a href='page3.html'>Link 3</a> </p>
Default value: false
Include styles for HTML lists: <ul> and <ol>.
Default value: true
Include styles for fixed-width text (e.g. for program code): <code> and <pre>.
Default value: true
Color of fixed-width text: <code> and <pre>.
Default value: $color if it was redefined
Include style for table with grid: <table class='grid'>. (By default, <table> has no visible lines.)
Default value: true
Include style for a framed box with slightly different background: <div class='framed-box'>. (It looks similar to the title box at the top of this page, but it is not specifically for titles.)
Default value: false
Include style for a horizontal rule: <hr/>.
Default value: true
Include style for a full-width responsive image: <img class='full-width'/>. It will be displayed in its original size if it fits, otherwise it will be shrinked down exactly to the available width.
Default value: false
Include style for pale text (i.e. text with less intensive color): class='pale'.
Default value: false – but true if $pale_color is redefined
Color of pale text.
Default value: a color halfway between the default $color and the default $bgcolor
Include style for an error page (used by error_message), and a style for error messages: class='error-message' (which, by default, makes the text red and italic).
Default value: false – but true if $error_color is redefined
Color of error messages.
Default value: red
Include style for the menu, used by basic_menu.
Default value: false
Include style for the footer, used by basic_footer.
Default value: false
Include style for basic_page::bottom_space().
Default value: false (but true in basic.css)
This file contains styles for the dynamic functionalities of UWeb (e.g. buttons, input fields etc.), see js.html and active.php.
The following variables can be used to configure these styles.
Common color for disabled buttons and input fields. Disabled means that they cannot be interacted with by the user.
Default value: $pale_color
Note: it can be customized for buttons ($button_disabled_color) and input fields ($input_disabled_color) separately.
Common color for highlighted elements, e.g. submit buttons for changed forms (if data-highlight was set) and alerts.
Default value: $title_color
Include styles for pushable buttons (<button>).
Default value: true
Background color of buttons.
Default value: $bgcolor2
Border color of buttons.
The value is an array of [$dark, $light], containing the two color shades of the 3D-looking frame.
Text color of disabled buttons (<button disabled>).
Default value: $disabled_color
Text color of highlighted buttons, which can be set by class='highlight', or caused by the form attribute data-highlight.
Default value: $highlight_color
Color of the ellipsis (…) on buttons, which is shown when its action takes too much time (or it can also be set by class='loading').
Default value: the text color of the button
Include styles for image-based buttons (see button_image()).
Default value: false
Include styles for input fields: <input/>, <textarea> and <select>.
Default value: true
Background color of input fields.
Default value: white if $bgcolor was redefined
Text color of input fields.
Default value: inherit (i.e. use the current text color) if $color was redefined
Border color of input fields.
The value is an array of [$dark, $light], containing the two color shades of the 3D-looking frame.
Background color of disabled input fields (e.g. <input type='text' disabled/>).
Default value: $bgcolor
Text color of disabled input fields (e.g. <input type='text' disabled/>).
Default value: $disabled_color
Border color of disabled input fields (e.g. <input type='text' disabled/>).
The value is an array of [$dark, $light], containing the two color shades of the 3D-looking frame.
Default value: $input_border_color
Include styles for checkboxes (<input type='checkbox'/>) and radio buttons (<input type='radio'/>).
Default value: $has_input
Include styles for aligned input lines, see input_line(). For example:
<div class='input-lines'>
<div>
<div> Username: </div>
<div> <input type='text'/> </div>
</div>
<div>
<div> Password: </div>
<div> <input type='password'/> </div>
</div>
</div>
Default value: false
Include styles for checkbox containers (class='options', class='options-inline'), for example:
<div class='options'> <label> <input type='checkbox'/> First </label> <label> <input type='checkbox'/> Second </label> <label> <input type='checkbox'/> Third </label> </div>
Default value: false
Include styles for popup tooltips (data-tip). See also info_text() and qmark().
Note: tooltips also require $has_tooltip in JavaScript.
Default value: false
Color of the tooltip question marks generated by qmark().
Default value: the text color
Include styles for form marks, see show_mark(), <!mark> and input_error().
Default value: true
Color of the exclamation mark (!) in the form mark with type='error'.
Default value: $highlight_color
Color of the exclamation mark (!) in the form mark with type='info'.
Default value: the text color
Color of the checkmark (✔) in the form mark with type='success'.
Default value: green
Text color in the form mark with type='alert'.
Default value: $highlight_color
Include styles for popup dialog boxes, see show_popup() and <!popup>.
Default value: true
Include styles for dropdown boxes, see show_dropdown(), dropdown_menu() and data-action='dropdown'.
Note: dropdowns also require $has_dropdown in JavaScript.
Default value: false
Include styles for multi-tab content (class='tabbed-head' and class='tabbed-body'), see tabbed().
Note: this feature also requires $has_tabbed in JavaScript.
Default value: false
Custom CSS rules can be inserted into the generated CSS file like this:
open();?><style>
.some-class {
text-align: center;
}
</style><?php close();
The CSS content must be surrounded by the following code:
open() and close() calls, which prepare the content in between to be added to the CSS file. (It will be actually added when calling generate().) ?> and <?php to turn off PHP mode temporarily, so that the content is treated as text, not PHP code. (Note: the same effect could be achieved by using echo and putting the content into a string, but the former is recommended for better readability, see the next point.) <style> and end with </style> (which will be removed from the result). The main reason for these tags is that they let the text editor know that the inner text is CSS, so it can do e.g. syntax highlighting properly. But these tags also aid the CSS generator to do proper formatting and error detection. The CSS content can contain PHP code, using any of the variables described above, e.g.:
open();?><style>
.some-class {
color: <?=$error_color;?>;
}
</style><?php close();
The custom CSS content may be split into any number of blocks by open()/close() pairs. Adjacent blocks will be separated by empty lines in the generated CSS file.
The generated CSS blocks may be separated by comments for better readability, by using the functions title(), big_title() and title_opt().
Note that since these custom CSS styles will be added to the same file as UWeb's CSS, they will share the same license (GPLv3). If this is not desired, the custom CSS must be put into a separate file.
function open ($title = null);
Open a custom CSS block. It must be closed by a subsequent close().
$title: if given, the block is preceded by the given comment. It is equivalent to calling title($title) before open().
function close ();
Close the custom CSS block opened by the last open().
function title ($title);
Insert a title comment to the generated CSS file. It can be used to separate custom CSS blocks.
For example, title("Button styles") generates the following comment (separated by an empty line from both adjacent blocks):
/* Button styles */
function big_title ($title);
Insert a major title comment to the generated CSS file. This is more noticable than title(), so it can be used for higher-level separation.
For example, big_title("Dynamic elements") generates the following comment (separated by two empty lines from the previous block and one empty line from the next one):
/* Dynamic elements */ /* ---------------- */
function title_opt ($title);
Insert a title comment like title(), but only if there is any CSS block following this function call before the next title.
This can be useful if the subsequent CSS blocks appear conditionally, e.g. inside if statements. Then this title will only appear if those blocks are present.
function generate ();
Actually generate the CSS code.
This must be the last statement in the PHP file that generates the CSS file. Without this, no output is produced.