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
Example[]
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?[]
Here is a quick breakdown of the thought process behind that code and why it should work:
- 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.
- For a walkthrough in the Google Chrome web browser, click through the screenshots in the slideshow below:
Exploring the CSS[]
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.
Pitfalls[]
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:
Further modification[]
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.