Custom CSS for Your Campaign

In order to make styling your campaign much easier, we've added the ability to specify custom CSS rules that will be applied to all your campaign pages. Before you get started, read the guidelines below and make sure you understand them.

Warnings

  • This is an advanced feature that requires a technical understanding of CSS, the language used for styling web pages. It allows for maximum flexibility, but isn't exactly easy.
  • Changing the CSS of your campaign won't change or delete your data (pages, characters, items, etc), but you may end up hiding the links to the data so no one can get to it.
  • With CSS you may make it impossible to edit and manage your campaign, by hiding or moving certain important links and control elements.
  • We highly recommend having Firebug or Chrome Developer Tools installed so you can manually edit the CSS on your pages in case you make a mistake that prevents you from further CSS edits.
  • We (the Obsidian Portal team) don't offer support or guidance in this, but plenty of people on the forums will help you if you get stuck.

General Guidelines

The main purpose of the custom CSS rules is to allow for styling your campaign to look how you want. It's also an Ascendant Only feature.

What the CSS rules are definitely NOT for is defacing Obsidian Portal or behaving in a malicious manner.

What You Can Style

It's best to stick to the "content" elements of your campaign when styling, things like the body of your wiki pages, characters, items, and so forth. Once you start straying into menus, sidebars, and other navigation/control elements, you run the risk of conflicting with our overall site design and improvements. The image below gives an idea of what you should and shouldn't style.

allowed_styling.jpg

Key

  • Red - Be extremely careful here. The links and logos must remain visible, clickable, and go to the right place. You can change the background colors, images (hopefully much easier in the future), and the campaign banner. Just don't mislead people or prevent them from using the site. It's not shown in the image, but the same applies to the overall site footer.
  • Yellow - Take caution here. We might modify the markup or completely change these areas with little or no notice. So, you may go to great pains to style this only to have us pull the carpet out from under you. Note: For the campaign header, the best way to style it is by uploading a banner image.
  • Green - Focus your efforts here. We'll do our best to not overly modify the markup in these areas without giving some advance warning, and when we do make changes we'll try to limit the impact.

The basic idea here is that we're going to keep making improvements to the site, and we want to do so in a way that will not overly conflict with your styling.

Custom Fonts

If you want to use custom fonts, you have 2 options: Typekit and Google Web Fonts. At this time, it's impossible to upload your own fonts, although this may be possible via Typekit.

Both will load the fonts and set up everything so that you can begin using them in your CSS. There is no need to declare a @font-face section in the CSS, as this is done automatically. Instead, just refer to the fonts by name in your standard font-family rules.

Google Web Fonts (GWF)

GWF is free, includes hundreds of fonts, and requires no signup. Just browse their catalogue, find the fonts you want, and add them to the font list in your campaign settings.

Typekit

Typekit is a paid service, but has a free option (allowing only 2 fonts). You'll need to sign up, find the fonts you want, and add them to your "Kit". Make sure the kit has "obsidianportal.com" as an allowed domain. Once you've added the fonts you want, you'll need to publish the kit. Take the kit ID (usually a series of letters, like "yhx2lvj") and paste that into Obsidian Portal where it asks for the kit id. Note: It can take a few minutes for your kit to be published out by Typekit, so don't panic if things don't work perfectly right away.

One Final Warning

Starting with our new homepage, we're slowly redesigning much of the site. We wanted to get the custom CSS feature launched in advance of this so people could move most of their styling into a single CSS rather than scattered throughout their pages, and therefore be better prepared to make changes as needed. We'll try to give warning before we make any major changes, but be prepared for some flux in 2012 and early 2013 as we move pages over to the new design.