Brill Making Blog

Graphics for you: Common Brill Sections

Here are a few brill graphics that you can use on your brills. These cover the basic sections that most brill are expected to have.

Why Brill

The most important part – why the thing isBrill.com. You don’t have to call it Why Brill, that’s just always been the internal name.

Brill links (normal and silly spellings)

Your brill links are a list of related things that people who agree the thing is brill will want to look at.

Brill list

A brill list is a list of things. Maybe a list of famous users, a list of reasons why the thing isBrill.com, or just some other list that fits really well.

Brill license for off-site use

This media by Matt is licensed under CC BY-SA 4.0

3 Examples of brill customisation done well

If you know enough CSS you can make your brill look like almost anything. However, a good brill should still look like it is part of isBrill. Here are some example customisations that work well.

Doctor Who isBrill.com

The Doctor who brill takes on the hardest of tasks, reimagining the iconic brill sign to fit the topic. While 99% of the time, I would say this is a bad idea, this example just works.

Tea isBrill.com

The tea brill takes a more subtle approach to customisation by quietly reworking some of the colours and text sizes. What in most cases is a weak page header has become a thematically coloured strong header.

Steampunk isBrill.com

The steampunk brill makes the most of background colour to really bring out the subtle brill-roll image but replaces the Brill-i-tude with a steampunk reimagining. With just a few tactical colour changes, this brill manages to feel very different without really changing very much.

Graphics for you: Related Brills

Here are two versions of a “related brills” graphic. One has a clear background and the other has a white background. For brill pages, you may hotlink them (not for anywhere else though).

Adding links to related brills can help visitors find what they are looking for. It also allows you so show that you know where you fit in the wider topic space.

Related Brills are brill dot com.

Brill license for off-site use

This media by Matt is licensed under CC BY-SA 4.0

Add a custom trivia class

You may notice that this and other brills have trivia or fun facts with their own decoration. This is how you can add those boxes to your brill.

First, add a fun fact paragraph. Ideally one not inside a group. Click “Advanced” and add “trivia” (no quotes) as a custom class.

Second, view your brill and hit customise. In Custom CSS add the following:

.trivia{
	border: 3px solid #C58E4C;
	padding:1em;
	background-color:white;
	border-radius: 25px;
	margin: 1em 0;
	font-size: 125%;
	color:#44190B !important;
}
.trivia strong {
	color:#44190B !important;
}

All of your specially classed “trivia” paragraphs now appear in a custom-coloured box. Change the hex codes to suit your brill.

How to put a YouTube video in your brillbox

The brillbox is where the featured image is shown. It is possible to override this and put a video in there instead.

Add two “Custom Fields”.

  1. brill_hero
  2. brill_hero_mime

Use the YouTube link for the brill_hero value and “oembed” (no quotes) for the brill_hero_mime value.

Like this:

Your brill-zones and brill-roll

The brill-roll is the sidebar where smaller snippets of information and various widgets can be added. It is made up of two parts – the brill-zone and the sidebar.

Sidebar

Content added to the sidebar appears on every page. This is good for things like menus and search widgets.

Brill-zones

Brill-zones are widget-enabled areas that exist per page. Every page (including the front page) has its own unique brill-zone. This allows you to add contextual content that compliments the main page.

Brill-zones are good for lists of links (blogrolls, for example) and fun facts.

Some things you might like to put in your Brill-zone

  • A list of links
  • Trivia and fun facts
  • Definitions
  • RSS feeds
  • Blog headlines

Top tip: Group your brill-roll items to put a nice border around them.