How to simply swap the header logo with CSS to make your site look work related!

support
1

Can’t post to How-To category so thought I’d post here.

Lots of my users requested an alternative theme as the default made it obvious they were not on a work-related site. So I created a new theme they could choose so that if someone glanced at their screen it would look broadly work-related (‘Marketing Growth Hacking’).

I copied the default Light theme, uploaded the new banner and added this custom CSS:

/* Switches header */
.d-header #site-logo {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://your.logo.url/here.png) no-repeat;
  width: 461px; /* Width of new image */
  height: 45px; /* Height of new image */
  padding-left: 461px; /* Equal to width of new image */
}

Of course you should change the width/height/padding to match your new logo.

Hope this helps someone.

7 Likes
2

Heh… you need to add a Boss Key in a theme or plugin as well for full effect.

7 Likes
3

What’s next, a plugin which asks for the word from a specific page and line of the user manual? Or an “age check” which quizzes adult knowledge not on Wikipedia or Urban dictionary?

Actually I would quite like that.

1 Like
4

Shoot a sample question.

5

Thanks, works great on our Dark theme for aesthetic purposes.

1 Like