Wikia

Community Central

Comments3

Styling PortableInfoboxes with Javascript

TK-999 July 1, 2015 User blog:TK-999

Wikia is currently working on a new portable infobox system, intended to streamline viewing experiences for desktop and mobile users alike. One significant caveat of this feature is that it is more complicated to customize than traditional infobox templates, which impacts user-defined customization. This blog post aims to guide admins on constructing a template–JS combination that will permit seamless application of user-defined options, such as color schemes.

Setup

Templates

The principal issue to address is making the user's parameters available to Javascript; HTML 5 data- attributes are an excellent solution for this. On the Star Wars Fanon Wiki, we have the {{CustomInfoboxColors}} template for this purpose, which looks like this:

<div id="custom-infobox-colors"
	data-title-background="#{{{1}}}"
	data-heading-background="#{{{2}}}"
	data-title-text="#{{{3}}}"
	data-heading-text="#{{{4}}}"
></div>

This allows users to specify hexadecimal color codes as template arguments, which are then made available on the element as invisible data attributes.

Javascript

Now it's time to use Javascript to obtain and utilize the user-defined data. Since site JS is loaded in the <head> element, it gets executed immediately, without waiting for the page to be rendered, so no weird styling hiccups or abrupt changes should occur. To ensure that the styling is applied seamlessly, it's best to use native Javascript instead of the jQuery library; vanilla operations are significantly faster than jQuery's.

Here is the JS we use at Star Wars Fanon to apply user-defined colorization from the above template:

	// Support for user-defined infobox colorization
	var dataElement = document.getElementById('custom-infobox-colors');
	if (dataElement) {
	    var titleBg = dataElement.getAttribute('data-title-background'),
	        headingBg = dataElement.getAttribute('data-heading-background'),
	        titleText = dataElement.getAttribute('data-title-text'),
	        headingText = dataElement.getAttribute('data-heading-text');
	    var infoboxTitle = document.getElementsByClassName('item-type-title')[0];
	    infoboxTitle.style.background = titleBg;
	    infoboxTitle.getElementsByTagName('h2')[0].style.color = titleText;
	    var subHeadings = document.getElementsByClassName('portable-infobox-header-background');
	    for (var i = 0; i < subHeadings.length; i++) {
	        subHeadings[i].style.background = headingBg;
	       subHeadings[i].style.color = headingText;
	    }
 
	    document.getElementsByClassName('portable-infobox')[0].style["border-bottom"] = '16px solid ' + titleBg;
	}

Summary

Although CSS is a powerful tool for working with the new infoboxes, especially when creating their basic themes, Javascript also has its fair share of use cases, especially when you have to work with user-defined data, or need to dynamically apply styling that would otherwise require a disproportionate amount of CSS rules. An example of the latter is applying borders to infoboxes on Monobook: this way, you don't have to create separate CSS rules for each infobox theme.

Please add your thoughts below. If you wish to comment on the feature itself, please use the dedicated forum thread instead.

Around Wikia's network

Random Wiki