# 如何简单地用 CSS 交换页头标志，让你的网站看起来与工作相关！

**URL:** <https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972>\
**Category:** Support\
**Created:** [2019年三月7日 11:33 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972 "2019-03-07T11:33:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)\
**Post date:** [2019年三月7日 11:33 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/1 "2019-03-07T11:33:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年三月8日 00:00 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/2 "2019-03-08T00:00:18Z")

</div>

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

> **[Boss key](https://en.wikipedia.org/wiki/Boss_key)**
>
> A boss key, or boss button, is a special keyboard shortcut used in PC games or other programs to hide the program quickly, possibly displaying a special screen that appears to be a normal productivity program (such as a spreadsheet application). One of the earliest implementations was by Friendlyware, a suite of entertainment and general interest programs written in BASIC and sold with the original IBM AT and XT computers from 1982 to 1985. When activated (by pressing F10), an ASCII bar gra Th...

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年三月8日 06:19 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/3 "2019-03-08T06:19:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mixonepa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mixonepa/32/129720_2.png) [@Mixonepa](https://meta.discourse.org/u/Mixonepa)\
**Post date:** [2019年三月8日 07:34 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/4 "2019-03-08T07:34:06Z")

</div>

Shoot a sample question.

---

<div class="post-metadata">

**Author:** ![tempogain](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tempogain/32/134055_2.png) [@tempogain](https://meta.discourse.org/u/tempogain)\
**Post date:** [2019年六月11日 12:06 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/5 "2019-06-11T12:06:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2022年十一月13日 15:23 UTC](https://meta.discourse.org/t/how-to-simply-swap-the-header-logo-with-css-to-make-your-site-look-work-related/110972/6 "2022-11-13T15:23:10Z")

</div>