FANDOM


Question: Is it possible to build a template that uses parts of the wiki's color scheme, so that it will match color of whatever wiki you use it on?

Answer: To some extent, yes, it may be possible. This page will demonstrate an approach to solving this problem that requires the following:

  • A web browser with the ability to inspect the HTML and CSS source code of the current web page. (Recommended: Google Chrome or Mozilla Firefox)
  • Some knowledge of HTML
  • Some knowledge of CSS

ExampleEdit

Let's start straight out with an interesting example:

<div class="WikiHeader">
<div class="accent">
This background matches the color of the Wiki Navigation.
</div>
</div>

This background matches the color of the Wiki Navigation.

Where did that come from?Edit

Here is a quick breakdown of the thought process behind that code and why it should work:

  1. Right-click on the Wiki Navigation bar at the top of the page and choose Inspect element. This will open your developer tools — specifically, the element inspector, where you can look at the HTML source code for the web page, and track down CSS styles that are affecting different HTML elements.
  2. For a walkthrough in the Google Chrome web browser, click through the screenshots in the slideshow below:

Exploring the CSSEdit

One interesting block of code you saw in the screenshots above was this:

.WikiHeader .accent {
    background-color: #006cb0;
}

If you know CSS, then you know that this background will affect an element that has class="accent" which is inside of another element that has class="WikiHeader".

So what if we created such an element? Well, the result should be what you saw in the example above! Here it is again:

This background matches the color of the Wiki Navigation.

PitfallsEdit

Great, we've now created something that uses the color from Wikia's stylesheet. But there's more. Surely you didn't think the background-color property would be the only thing the stylesheet sets on our element?

Right-click on our "Example" element above and Inspect element so we can see what CSS is affecting it:

Wiki nav color demo 7

Further modificationEdit

Fortunately, "inline CSS" — which are CSS rules that are inside a style="" attribute, overrides CSS rules from stylesheets. That allows us to do stuff like this:

<div class="WikiHeader" style="margin: 0; padding: 0;">
<div class="accent">
This background matches the color of the Wiki Navigation. And we've overridden the normal margins and padding with some inline CSS rules.
</div>
</div>

This background matches the color of the Wiki Navigation. And we've overridden the normal margins and padding with some inline CSS rules.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.