Editing Your Theme

So you want to edit your default theme? How scandalous.

Anyhow, you can do this by editing the CSS files in the style folder.

main.css

The main.css file is the file that is link in every page of your site. Here, you can link other CSS files that you may create or download.

By default, the file default.css is linked. That's the file that holds not only your theme, but the basic structure of your site. You can edit pieces of this file though.

/* Main CSS */
@import "default.css";

/*  You can import your own css files if you'd like here and
    then it'll be automatically used in your site.
*/

default.css

At the top of the default.css file is a section of variables. These variables is what decides the basics of your site's theme. All of the variables are described via comments so you know which is which.

Here's an example of what it'll look like. This is taken from the Stars theme, so it may not have the same values as yours.

:root {
    --font-size     : 1.1em; /* Main text size */
    --title-size    : 36px; /* Page title font */

    --text-color    : #eee; /* Main text color */
    --accent-color  : #97e89c; /* The color used for links */
    --title-color   : #dcdede; /* Used for titles */

    --bg-color      : #666; /* Background color */
    --back-color    : #111111DD; /* Background color of main area */
    --bg-image      : url("../images/background.webp"); /* This is the image that's repeated in the background */

    --font-main     : sans-serif; /* The font used for almost everything */
    --font-title    : sans-serif; /* The font used for page titles */
    --text-indent   : 0em; /* The width of paragraph indents. Just put `0px` if you don't want any. */

    --hr-style      : dotted; /* Horizontal line style */
}