How do I change the background color of a personal MediaWiki installation? The whole background, i.e. every pixel that displays as white, I would like to display as pink instead. That includes tabs, borders, icons, tables, menus, preformatted text, etc. Nicole Sharp (talk) 02:10, 15 April 2017 (UTC)
Topic on Project:Support desk
I have gone ahead and created the page "nontechnical introduction to customizing MediaWiki." If anyone can help with how to fill in the rest of the background color, it would be appreciated, thanks! Nicole Sharp (talk) 12:13, 15 April 2017 (UTC)
Thanks for creating documentation. However, your Nontechnical introduction is actually technical. :) I propose to delete https://www.mediawiki.org/wiki/Talk:Nontechnical_introduction_to_customizing_MediaWiki as existing documentation should be improved instead of adding new documentation on seperate pages...
I replied at "[[Talk:Nontechnical introduction to customizing MediaWiki]]Talk:Customizing MediaWiki for beginners." Nicole Sharp (talk) 16:11, 16 April 2017 (UTC), updated 18:23, 16 April 2017 (UTC)
There might be some useful information for you here:
https://www.hostknox.com/knowledgebase/681/How-to-change-background-colors-in-MediaWiki.html
Note that the hyperlinked articles in the above link have broken URLs, just remove "clients/" from the URLs for them to work.
Yes, I have already been to that page. I tried using all of the attributes listed there, but they still do not cover the tabs or the searchbox. Nicole Sharp (talk) 10:29, 17 April 2017 (UTC)
The following code from HostKnox still has gaps in the background color:
body {background: #e6ffb4}
#content {background: #e6ffb4}
#bodyContent {background: #e6ffb4}
#firstHeading {background: #e6ffb4}
#catlinks {background: #e6ffb4}
#mw-head-base {background: #e6ffb4}
#mw-panel {background: #e6ffb4}
#p-logo {background: #e6ffb4}
#p-navigation {background: #e6ffb4}
#p-tb {background: #e6ffb4}
#p-tb-label {background: #e6ffb4}
#p-tb .body {background: #e6ffb4}
#footer {background: #e6ffb4}
Note that the CSS used for the DarkVector skin is able to colorize the tabs and searchbox, but I still don't know which attributes the author used to do that: and . Nicole Sharp (talk) 10:29, 17 April 2017 (UTC)
In https://github.com/dolfinus/DarkVector/blob/master/darkvector.less, have you already looked at #searchInput for searchbox and #p-cactions for tabs.
In case you didn't already know this, to find the names of CSS elements, you can hit F12 while a webpage is opened. This will open browser developer tools, which includes a selection tool to which allows a user to select a web page element and have its name pop out. Shortcut key on Chrome (Ctrl + Shft + C).
Those attributes don't work. I got the searchbox and some more elements with:
body {background: aqua}
/* background color for the bottom and left of each page, up to behind half of the logo */
#mw-page-base {background: aqua}
/* background color for behind the top half of the logo and at the top of each page */
.mw-body {background: aqua}
/* background color for page content (excluding tables, images, and preformatted text) */
pre, tt, code {background: aqua}
/* background color for preformatted text */
div#simpleSearch {background: aqua}
/* background color for searchbox */
div.thumbinner {background: aqua}
/* background color for transparent images and image captions */
table.wikitable {background: aqua}
/* background color for tables (excluding ! table items) */
#toc {background: aqua}
/* background color for page table of contents */
/* additional attributes from list at HostKnox.com */
#content {background: aqua}
#bodyContent {background: aqua}
#firstHeading {background: aqua}
#catlinks {background: aqua}
#mw-head-base {background: aqua}
#mw-panel {background: aqua}
#p-logo {background: aqua}
#p-navigation {background: aqua}
#p-tb {background: aqua}
#p-tb-label {background: aqua}
#p-tb .body {background: aqua}
#footer {background: aqua}
The only parts still not colorized are table labels and the tabs for "Message," "Discussion," "Read," "View source," and "View history." I finished going through anything that looked relevant in the DarkVector skin, so not sure what the attributes for those might be. Nicole Sharp (talk) 21:53, 17 April 2017 (UTC)