"Brand" Your Admin Dashboard

At the moment this "howto" is not working! See also the discussion about the reason: click here to open the post

You can hide the Wikidot default logo that is displayed in your Admin Dashboard and insert a custom logo as a background image by using a bit of CSS and a copy of your logo image.

First, crop or resize the logo image you want to use so it's 50px high. Width doesn't really matter (within reason), but it will work best if you keep it around 300px or less.

Next, upload your logo to a page on your web site. If you're using CSS on its own page, that's a great place to upload it. If not, upload it to any page and keep track of where it is. Refresh the files list and click the info link next to your newly uploaded logo. Copy the path and file name for use in your CSS.

Finally, edit your custom CSS by adding the following:

/* hide the Wikidot logo image */
div > .wikidot-logo > img {
  display: none;
}
/* display my custom logo */
div > .wikidot-logo {
  width: 282px; /* matches my new background image */
  height: 50px; /* matches my new background image - max 50px to fit nicely */
  background: transparent url('/local--files/category:page-name/logo-image-file-name') no-repeat top left
}

Replace /local—files/category:page-name/logo-image-file-name with the path and file name of your logo.

If you need help editing or creating custom CSS, there are other How-To articles to help you. Or, ask for help in our friendly Community Forum!

Before

After