Making Custom Themes

This is currently a work in progress and likely to be subject to complete rewrites.

= Custom Themes =

This page contains community-researched content aiming to provide a relatively easy to use Theme template, as well as a database of IDs for more indepth modification.

This is an expert guide. There will be quite a bit of hand-holding, because CSS is a satanic spawn of devastation.

All these sites will be useful for you as you work on themes:
 * W3Schools' CSS tutorials
 * Color-Hex

Things to keep in mind:


 * // means a comment. Everything after it will not be parsed. You MUST remove all commented code and text before squishing your theme.
 * You MUST squish your theme using this tool. If you don't, your theme will break.
 * As a result, KEEP A WORKING COPY, AND A COMPRESSED COPY. Editing a compressed copy sucks and will frustrate you.


 * Template
 * Template Explanation
 * Font Block
 * Prose Mirror
 * Backgrounds and Borders
 * Colors Block
 * Finishing your Theme


 * Template without Explication Comments
 * List of all Element IDs

Template
Before you start, save this template to a text file and give it a good read.

Terrified yet? GOOD.

⬆ Return to Page Top

Template Explanation
Okay, you've read this, and you're still probably confused. Let's go down the template, part by part.

Name field
Simply replace "YOUR THEME NAME HERE" with the name of your font. Keep the quotes.

Font Block
You can safely ignore 99% of the font block. The only parts that are important are the following:

Simply replace the all-caps text with the name of font of your choosing. Don't touch the backslash and the quote.

Font Notes

 * Not all fonts are available on all devices. To be sure it'll always work, only use fonts that are available in the font selector, or provide a "stock fonts" version of your theme that uses these.


 * You can use heading fonts for the text font, and vice versa. Just because they're not in the same drop down doesn't mean they can't be used.


 * Make sure you pick fonts that are legible. Your theme should be comfortable to use.


 * You'll notice something that reads "DO NOT CHANGE" "THOSE FONTS". Leave those alone. Themes break when fonts are changed after they're set up. Specifically, the header font.

⬆ Return to Page Top

Prose Mirror
You'll have noticed something called ProseMirror. This is basically what formats the text in the main text box.

First of all, it is commented out. If you're not using it, remove all of it before squishing your theme. If you want to use it, remove the slashes.

This one looks more complex but is actually really simple.

The Padding parameters here will add a bit of space between the text box frame and the text itself. The order appears to be UP, RIGHT, DOWN, LEFT. By default this is set to a small indent on the left.

Now you have four identifiers. Each identifier is a type of text, same as the different colors used in highlighting. The names should be obvious enough.

If you only want the shadowing to affect certain types, remove all the ones you want unaffected.

The shadow's arguments are vertical and horizontal offsets, shadow blur distance, and the hex color off the shadow. The second set defines the secondary shadow that it will fade to.

You can add  between the curly braces as well to make that type of text underlined, and   to italicize the text.

If you wish to have different types of formatting, simply separate them like this:

Backgrounds and Borders
This is where strange IDs start showing up. All of them are documented in the template, and several more exist. Only the most important ones are already in the template.

If you want to one of these elements to just use its normal BG color settings, just remove the line containing it.

All the background settings are set explicitly in this block, but if you know what you're doing, you can use the  shorthand for all of them.

Setting a color as Background
By default the background is a color. It can be set in different formats. RGB(A), or Hexadecimal.

I suggest using Hexadecimal because it takes a lot less space, and also, ColorHex exists. Use it. It's amazing.

A Hex color can have either six or eight digits. The digits in Hexadecimal are 0123456789ABCDEF. The maximum value of FF is thus 256 in decimal.

Hex is read in pairs, hence the RR GG BB AA nomenclature. They take values of 00 to FF. RR for red, GG for Green, BB for Blue.

Now, what is AA? This specifies the level of transparency. FF is fully opaque and 00 is completely transparent and thus invisible. Be mindful not to abuse transparency as it can break things.

Setting an Image as Background
To set an image as background, use

You'll notice it is already present for the main site background. Replace "BACKGROUND DIRECT LINK HERE" with the direct link (i.e with the file extension) to your image.

If your background needs to be stretched to fit: add

If your background needs to be tiled: add

The Fade-in Fade-out Effect
You may have noticed I skipped over this monstrosity:

First of all, this is commented out, so you can delete it if you don't want to use it.

What it does is create a fade in from the very top of the main text box, and a fade out at the very bottom.

There's only two things that really need to be edited there: the percentages. The first one indicates how much distance the fade-in takes. The second indicates where the fade-out begins.

The lower the first value, the smaller the fade-in, the higher the first value, the bigger the fade-in.

The higher the second value, the smaller the fade-out, the lower the second value, the bigger the fade-out.

Borders
All of these elements can be given Borders. Those are really simple, so I won't explain them, this site does it pretty well. Just specify the thickness in px, style, and color.

Be very mindful what you give borders to. A lot of the IDs are reused for multiple things, so this can put borders in odd places.

⬆ Return to Page Top

Colors Block
The colors block specifies all the default Background Colors (bg0-bg3), as well as all the font colors.

All of these are specified in Hex. If you've gotten this far, this is the easiest part. Just use Color-Hex and compose your palette.

There are things to keep in mind:


 * BG colors can take RRGGBB or RRGGBBAA. Transparency is both useful and dangerous:


 * If your BGs are transparent, Define your popup colors!,   and   in the background block. If those have transparency, they will be very hard to read.


 * If BG0 has transparency, the AI Module display has a fade that will break, making module titles impossible to read. To fix that, you need to add  in the background block.


 * Text colors must mesh well with your BG colors or they will be illegible. Always remember the rules of DARK ON BRIGHT or BRIGHT ON DARK.


 * Never use pitch black for backgrounds. Very uncomfortable for the user's eyes, and looks terrible on most monitors.


 * Make your font colors discernible from each other, not shades of each other. What I suggest is make pairs of colors: One for User/prompt and one for AI/Edited. Choose one color for each. Then, select two of the component colors. Raise one and decrease the other to complete the pair.

⬆ Return to Page Top

Finishing your Theme
You did it? You filled everything? Great! Now you need to do a few things.

1. Delete ALL comments. All of them. Every single one. If it has //, it must go.

2. Paste your code inside this, and click "Remove". Then, copy paste the compressed text, and save it to a new file.

3. Import that new file from the theme menu, and CLICK SAVE CHANGES.

4. Profit!

If it didn't work, check how much did work. Usually something broke somewhere because of a missing semicolon, parenthesis, comma or curly brace. If an element was updated but one was not, then it broke around that area in the file.

⬆ Return to Page Top