Board Thread:Support Requests - Designing Your Wikia/@comment-24741716-20151122202219/@comment-4731443-20151123023344

So I can get it to work just fine locally. Using it on Wikia seems like it will work as well, but some CSS will need to be added to your Wikia.css so I can't test the final result on-site.

Here are the steps to set it up.

1. Prepare images. You will need one for the header and one for the main box, with the following requirements for both:
 * Should be .PNG or .GIF files to allow transparency.
 * Transparent background outside the border.
 * Your background color(s) of choice inside the border.
 * They can be smaller than your actual content since they will be stretched as needed. Just try to give them the same proportions as the expected result so they stretch evenly (e.g. 40 x 100px would make an appropriate header background for an 80 x 200 px header).
 * Cut the images as tightly as you can around the border so you don't have too much empty space.
 * Just to be clear, the main box image should not include the heading box, but only its own rectangle. The heading will be placed on top using CSS.

Here's an example:

2. Upload images to your wiki and note the direct URLs to the full-size images.

3. Add the following CSS (replace the two URLs with those of your images, keeping the quotes): .druid-main { position: relative; max-width: 400px; margin-top: 20px; border: 10px solid transparent; border-image: url("LINK TO BACKGROUND IMAGE MAIN") 10 round; } .druid-main-content { background-color: #f8ddbb; padding: 30px 15px 15px 15px; } .druid-head { position: absolute; max-width: 170px; left: 50%; transform: translate(-50%, -65%); border: 10px solid transparent; border-image: url("LINK TO BACKGROUND IMAGE HEAD") 10 round; text-align: center; } .druid-head-inner { background-color: #FFFFFF; padding: 3px; } .druid-head-text { padding: 0px 10px; }

4. Create a page/template with the following structure (it would be best to remove indentation and line breaks so Wikia doesn't insert paragraphs, but I'm leaving them here so you can look at the structure): Header text Main text/content.

Notes:
 * I used "druid" as a class prefix but you can change it to anything you like that won't conflict with existing classes. Just make sure to remain consistent between the code and the CSS declarations.
 * The CSS and styling will need to be adjusted to better suit your tastes, but this should be a good basis for the structure. For better mobile integration, text styling should be done on the template using wikitext.