This Forum has been archived

Forums: Admin Central Index Technical Help Customizing admin dashboard
Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 2702 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I want to change colours of the background, font and header of the admin dashboard. What should I add to my personal css to accomplish that? Thanks, Final Cannon 20:31, October 15, 2011 (UTC)

I suggest contacting Rappy 4187. I think he has a CSS changecode for that. :) — subtank (7alk) 20:47, October 15, 2011 (UTC)
.AdminDashboardChromedArticle {
    color: #FFFFFF;
    background: #000000;
}				/* Changes text color and background */

.AdminDashboardHeader {
    background-color: #000000;
    border-top: none;
}				/* Lower header bar */

    background-color: #000000;
    background-image: none;
}				/* Lower header bar */

Should give some basic control - you just need to adjust the colors. Of course there are a lot of other elements which don't fit, like white borders or shadows. More code is required to do away with those. Sovq 20:58, October 15, 2011 (UTC)

Here's some more advanced styling. The code below is used in the Wikia.css at BioShock Wiki. Example of what it looks like: [1] --Gardimuer { ʈalk } 22:47, October 15, 2011 (UTC)
/* General background color, borders, and box-shadow */
.WikiaArticle.AdminDashboardChromedArticle, .page-Special_AdminDashboard .WikiaArticle {
	-moz-box-shadow: 1px 1px 1px 0 #083256;
	-khtml-box-shadow: 1px 1px 1px 0 #083256;
	-webkit-box-shadow: 1px 1px 1px 0 #083256;
	box-shadow: 1px 1px 1px 0 #083256;
	background-color: #041B2E;
	border-bottom: 1px solid #083256;
	border-right: medium none;

/* Background and text color/weight of the active tab */
.AdminDashboardTabs {
	background: none repeat scroll 0 0 #041B2E;
	color: white;
	font-weight: bold;

/* Background color/gradient, borders, and shadow of the headings */
.AdminDashboardGeneralHeader, .AdminDashboard .admin-dashboard-content .control-section header {
	-moz-box-shadow: 0 2px 2px 0 #083256;
	-khtml-box-shadow: 0 2px 2px 0 #083256;
	-webkit-box-shadow: 0 2px 2px 0 #083256;
	box-shadow: 0 2px 2px 0 #083256;
	background-color: #EBEBEB;
	background-image: -moz-linear-gradient(center top , #041B2E 40%, #083256 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #041B2E), color-stop(100%, #083256));
	border-bottom: 1px solid #083256;
	border-top: 1px solid #083256;
.AdminDashboardGeneralHeader h1, .AdminDashboard .admin-dashboard-content .control-section header h1 { color: #CCDDFF;}
.AdminDashboardDrawer {
	background: none repeat scroll 0 0 #083256;
	border-left: 1px solid #0F5B9B;

/* Background color/gradient and border for the "Quick Stats" box */
.QuickStatsWidget .WikiaDataTable {
	background-color: #041B2E;
	background-image: -moz-linear-gradient(center top , #041B2E 40%, #083256 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #041B2E), color-stop(100%, #083256));
	border: 1px solid #083256;
Mostly it works great, however I cannot change the main body of the dashboard, which stays white (the part with features icons). List of special pages also stays white. Final Cannon 09:31, October 16, 2011 (UTC)
Applying a background color to .page-Special_AdminDashboard .WikiaArticle (like I listed in the code above) should work. The only reason I can think of that it wouldn't work is that you may have used the theme designer to style the page background color of the wiki, and therefore the theme designer css might be overriding your custom css. If that is the case, then you might be able to fix it by adding !important markers into the code, like so:
.WikiaArticle.AdminDashboardChromedArticle, .page-Special_AdminDashboard .WikiaArticle {
	-moz-box-shadow: 1px 1px 1px 0 #2D2D2D !important;
	-khtml-box-shadow: 1px 1px 1px 0 #2D2D2D !important;
	-webkit-box-shadow: 1px 1px 1px 0 #2D2D2D !important;
	box-shadow: 1px 1px 1px 0 #2D2D2D !important;
	background-color: #2D2D2D !important;
	color: #FFF !important;
        border-bottom: 1px solid #2D2D2D !important;
	border-right: medium none !important;
If that doesn't fix it, and you are desperate enough for a cure, you could temporarily make me an administrator of that wiki so that I can examine the admin dashboard there with Firebug. --Gardimuer { ʈalk } 03:38, October 17, 2011 (UTC)
Nope, that doesn't work. And yes, I used the theme designer, so that's propably the problem. Final Cannon 08:34, October 17, 2011 (UTC)

Theme Designer shouldn't be the problem, because the Wikia's CSS for Admin Dashboard overwrites Theme Designer customisation. When you customise the dashboard, you're only overwriting their CSS for the dashboard. ;) The part of the dashboard with the feature icons and the background to the advanced tab can be changed in this way:

.AdminDashboard .admin-dashboard-content .control-section .controls {background-color:#FFFFFF;background-image:none}

It goes without saying that you'll need to replace the background colour (#FFFFFF to the one you want. The background-image:none is important to overwrite Admin Dashboard's CSS, which uses a gradient. It's possible to keep that gradient but put it in a different colour, but it's much more complicated. :P

I also tested Gardimuer's CSS above and it does work for me, even without the !important calls. Did you remember to change the background colour (background-color: #2D2D2D)? The 888th Avatar (talk) 11:02, October 17, 2011 (UTC)

The part with icons is now changed, however advanced tab is still white. When I copy-pasted the whole BioSchock Wiki customisation that didn't work either. Here's my .css file - w:c:pl.digimonuniverse:Użytkownik:Final Cannon/wikia.css. Maybe you'll find an error. Final Cannon 14:24, October 17, 2011 (UTC)
Community content is available under CC-BY-SA unless otherwise noted.