Custom Site Headers

While you can do a lot of cool stuff just by changing the Bootswatch theme of your website, it's always nice to add a custom look. The easiest by far is to put a custom header on important pages.

First, be aware that any of the Bootstrap Wrapper features shown on Lotar's Wiki are available on your wiki. You can do a lot for your design just by using those features as they stand.

If we combine the jumbotron wrapper with some quick CSS, we can get something very nice looking.

First, wrap your page heading in the *jumbotron* tags. Even by itself, this should produce a dramatic page header.

Next, find a background image that you like and is appropriate for your campaign. Google image search is great for this kind of thing. You may also want to edit the image with a tool like The Gimp to crop it or scale it down. For a variety of reasons, large uploads are not allowed to game wikis, so you either need to shrink it to under 2MB or find suitable hosting for your image.

Now edit your site's CSS file /css:userall

Put the following text into the CSS file:

.jumbotron {
  background-image: url(http://your.image.site/image.png);
}

If your background is dark and your text is light, add color: white; inside of the braces. If you have the opposite problem, add color: black;.

Save the CSS file, then visit your page. You will need to refresh your browser. If you don't see the background image, you will need to convince your browser to dump all of it's browsing data, or at least cached web pages. This is different with each browser on each operating system, and changes from version to version, so you're on your own figuring that one out.