Creating Custom Style Templates

A few weeks ago I created Template:Factorybox to mimic the in-game interface for SimCity BuildIt. I spent more time on it than most templates I've made in the past, but I think the end result is pretty satisfying. What I enjoy the most about using templates that look like images is that it's visually more appealing (and familiar if it looks like game interface), the text is searchable, and it's really easy to auto-generate categories based on input. The latter can be very helpful in wiki organization, though I didn't feel it was necessary on the Factorybox template.

So this is just a walkthrough, maybe some tips I've learned over the past few months working with wiki templates, etc. I'm not a programmer, I have a pretty basic understanding of HTML/CSS.

Styling the template

I'll use Template:Factorybox as the example.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales nunc sed turpis lobortis ultrices. Vivamus at lectus imperdiet, efficitur nisi tincidunt, finibus ante. Morbi commodo nunc nulla, id porta enim posuere nec.

I took an in-game screenshot of the tooltip interface to use as a reference. I wanted roughly the same look, gradient background and all, so this was the most tedious part.

I used a free color picker to grab the hex colors of the gradient from the screenshot. All you do is upload an image, select the color you want, and the tool generates that color in HEX or RGB. I didn't want to go all out, so I only grabbed a few colors, then adjusted them for a smoother gradient.

background: linear-gradient(#FFFFFF 0%, #EEF5FD 12%, #EAF4FD 23%, #EAF4FD 30%, #E0EEF9 50%, #CFE5F3 73%, #C3DDEE 96%, #9BB3C8 100%);

linear-gradient is used for Top to Bottom or Vertical gradients. The % after the HEX color is where I want that color to begin. Between 0-12% it's #FFFFFF (white) that fades into #EEF5FD (light blue), and so on.

border-radius: 15px; border: 1px solid #97A6B9;

border-radius creates the rounded borders

-webkit-box-shadow: 0px 1px 1px 2px rgba(198,207,218,1); -moz-box-shadow: 0px 1px 1px 2px rgba(198,207,218,1); box-shadow: 0px 1px 1px 2px rgba(198,207,218,1);

box-shadow creates the shadow outline around the template. The -webkit and -moz prefixes are for browser support. Generally custom styling is hit or miss, because some people may use unsupported browsers or outdated versions. All I can say is... that sucks.

width:280px; height:auto; padding:10px; font-family:Verdana; font-size:110%; float:left; margin-right:20px;

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales nunc sed turpis lobortis ultrices.

I then added some extra formatting. Since this template was primarily created for List of industrial buildings in SimCity BuildIt I thought it looked better to float left instead of the standard float right for infoboxes. Originally I wasn't planning on adding a slideshow for building images. Once I did, it didn't line up with the template on the page, so I shoved them both in a table.

So pro.

Anyway, with the majority of the styling done, I set up the template structure. That's pretty straightforward - the design needed two columns, so colspan="2" for the headers. Perhaps unnecessarily but I also decided to customize the <hr> tag.

<hr style="height:1px; border:0px; background-color:#9BB3C8;">

Normal Custom

So unnecessary.

To create the outlined text I used -webkit-text-stroke which was pretty fun to work with, and actually the first time I've used this on a template. The font I use (Arial) doesn't match whatever font SimCity BuildIt uses but I didn't care that much to try and narrow it down.

text-align:right; color:#FFF; font-weight:bold; font-size:18px; -webkit-text-stroke: 0.7px black; text-shadow: 0px 3px 1px #000, -1px 1px 1px #000;"

Google Fonts is a neat feature to use, but that requires .CSS access and more time searching for the right style, and again, I don't care that much about the font.

Anyway, hope this post was helpful or inspiring to make some nice templates.