Tip: Adding your custom CSS to an AppGini project

Sometimes people ask me where to put CSS rules in AppGini projects. On this page I describe the options and tell you how I usually do it.

Option 1: hooks/header-extras.php

One way is to insert the CSS code in the already existing hooks/header-extras.php file. Since this is a .php file (not a .css file), however, we have to tell the browser that the inserted code is style information. We do this via the <style>-tag:

<!-- file: hooks/header-extras.php ?>
    /* your CSS styles here */
    // PHP code, if any

Option 2: hooks/header-extras.css

For larger projects, I got used to writing my CSS specifications in a separate .css file. In addition to the additional .css file that has to be available on the server, I then have to make sure that it is also included. I include it in hooks/header-extras.php

Change in hooks/header-extras.php

<!-- file: hooks/header-extras.php -->
<link rel="stylesheet" href="<?=PREPEND_PATH?>hooks/header-extras.css" />

New file: hooks/header-extras.css

/* file: hooks/header-extras.css */

/* your CSS styles here */

Note: When including the .css file using the <link>-tag you have defined that this is a stylesheet. The browser then interprets the file-content as style information. You therefore do not have to embed the style information in a <style>-tag here.

Caution: Your browser will cache the CSS file in the local cache unless you have configured it differently. After making changes in included/linked/referenced .css files (and also in javascript files), when reloading the page, you must ensure that the files are newly fetched from the server and not loaded from the cache.

Do you like it?