dev

DPLforumBoardCustomization adds support for CSS styling individual DPLforum boards at Forum:Index.

Installation

Configuration

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!'
  }
];

Using configuration options with Fandom Developers Wiki scripts

The instructions on this page describe how to use configuration options with a script. Here on the Fandom Developers Wiki, many scripts provide optional configuration settings as a mean to alter or enhance the default behavior of the script. When installing configuration options in your JavaScript file, please note that they need to go above the import statement in order to work — unless the directions say otherwise. In case MediaWiki:ImportJS is used to load the scripts, it will be executed last.

Configuration options load too late, don't work
// 1. AjaxRC import statement
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:AjaxRC.js'
    ]
});

// 2. AjaxRC configuration option
window.ajaxRefresh = 30000;
Proper placement of configuration options
// 1. AjaxRC configuration option
window.ajaxRefresh = 30000;

// 2. AjaxRC import statement
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:AjaxRC.js'
    ]
});

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.
Text above can be found here (edit)