TwistedTwigleg's Notes - TwistedTwigleg/vanilla-bootstrap GitHub Wiki

TwistedTwigleg's Notes

These are just notes that I've written down as I have gone along. These are mainly meant for my own reference, but because it may help others, I have decided to put them here on the wiki.

This is a modified version of the Bootstrap Vanilla forum theme by Kasperisager.

The primary changes is the addition of a new themes: Godot_Lightly and Godot_Darkly.

The Godot_Lightly theme is a heavily edited version of the Darkly theme that is designed to mirror the color and style of GodotEngine.org as closely as possible. You can find the pages we are using as reference on this issue here: link

The Godot_Darkly theme will eventually be a dark version of the Godot_Lightly theme. Right now it is only a slightly modified version of the Darkly theme. Once Godot_Lightly is finished or closer to being complete, I'll see about working on Godot_Darkly.

Both themes are still very much works in progress!

Check out the test forum on RandomMomentania for an idea of what the theme looks like. Note that the theme has additions specific to the plugins included on the test server. These plugins are as follows:

• Role Titles
• Tags Extended (in-house plugin from old forums)
• Theme Changer

Installing into Vanilla notes

I wanted to write down some things I noticed while working on this theme:

• The theme folder HAS to be named bootstrap or Bootstrap. On my computer, I had to call it boostrap with no uppercase letters, despite what I found on the internet. However, it appears that the naming issue might be specific to my computer or something.
• default.master in the views folder is responsible for the layout of the main page.
• To make a new theme, it is easiest to copy one of the themes in the bower_components/bootswatch folder and make adjustments from there. For a new theme, you also need to add a .LESS file with the same name as the folder of your theme in bower_components/bootswatch.

CSS/LESS notes

A interesting thing I found is that you can also check various elements within a HTML class, outside of the class itself.

Many of the Vanilla stuff uses something like <div id="form"> and generally if they have a class, it is a class used extensively. This makes editing the specific element you want interesting, since styling the class will style elements all over the site.

To get around it, you can do something like this, which I didn't know about until searching the internet and experimentation:

div[id="form"]
{
  background-color: #ff0;
}
div
{
  &[id="form"]
  {
    background-color: #ff0;
  }
}

I have no idea if this is CSS or LESS specific, but I didn't know this existed until just recently. Given how much Vanilla seems to use IDs, this can be very helpful for styling specific elements.

---