DPLforumBoardCustomization

DPLforumBoardCustomization adds support for CSS styling individual DPLforum boards at Forum:Index.
== ==
== ==
The board names are stored in objects inside the window.dplforumBoards array.
Variable 	Description 	Default values 	Required
boardName 	Name of the board. Non- english letter characters should be replaced with dashes or underscores.	help-desk, watercooler	Yes
boardDescription	A brief description of the board. 	none 	No
The default configuration is:
window.dplforumBoards = [
 { boardName: 'help-desk' },
 { boardName: 'watercooler' }
];
The following is an example configuration which corresponds to the image in the infobox.
window.dplforumBoards = [
 {
 boardName: 'news-announcements',
 boardDescription: 'Wiki newsletters and announcements from the moderator team.'
 },
 {
 boardName: 'general-discussion',
 boardDescription: 'Got a question about the fanon tribes? Need help navigating the wiki? Want to share something exciting? This is the spot!'
 },
 {
 boardName: 'roleplay',
 boardDescription: 'Come here to RP with everyone!'
 },
 {
 boardName: 'contests-requests-games',
 boardDescription: 'This is the place where you can create new exciting events, games to play with your friends, or threads for art requests!'
 },
 {
 boardName: 'promotions-demotions',
 boardDescription: 'Looking to get someone promoted or demoted? This is where it all happens. Look at Help:Promotion and Help:Demotion for more details.'
 },
 {
 boardName: 'wiki-improvement',
 boardDescription: 'Have a suggestion for improving the wiki? See here!'
 }
];
== CSS configuration ==
Two CSS classes are applied to each td with class forum_title. The first class, js-dplforum-board is applied to all boards. The second is only applied to one of the boards and is in the form of js-dplforum-board__${boardName}. Board descriptions are p tags with the class js-dplforum-board__description.
The following is an example configuration which corresponds to the image in the infobox:
.js-dplforum-board {
 padding-left: 80px;
 height: 70px;
 background-size: 70px 70px;
 background-position: 5px center;
 background-repeat: no-repeat;
 font-size: larger;
}
.js-dplforum-board__news-announcements { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/d/d1/NewsAndAnnouncements_Lori.png"); }
.js-dplforum-board__general-discussion { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/c/cf/QuestionsandAnswers_Lori.png") ; }
.js-dplforum-board__roleplay { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/d/d0/Roleplaying_Lori.png") ; }
.js-dplforum-board__contests-requests-games { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/0/08/FunandGames_Lori.png") ; }
.js-dplforum-board__promotions-demotions { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/b/bd/Promotions_Lori.png") ; }
.js-dplforum-board__wiki-improvement { background-image: url("https://vignette.wikia.nocookie.net/wingsoffirefanon/images/6/66/WikiImprovement_Lori.png") ; }
== Changelog ==
Version	Description
1.3.0 	Remove usage of innerHtml, use classList when adding multiple classes, Formatting.
1.2.0 	Replaced usage of the less supported .forEach method with a for loop.
1.1.1 	Replaced usage of the unsupported ES6 let with var.
1.1.0 	Added support for board descriptions.
1.0.0 	Initial release.