Basic Theme Modification: Logo and Header Text

wackdog

More at my Author Page!

Hello! I am wackdog. This is the first of possibly multiple basic guides on how to modify a theme for your own purposes, ranging from single page usage to full theme creation.

These guides focus entirely on quick implementation of specific changes. If you would like to learn more about general CSS, check out Fish's Absolute Beginner's Guide To CSS.

This specific guide will cover the modification of the logo and header titles.

The implementation of these changes is different depending on the base theme,¹ each base theme will be covered in it's own section.

---

Identifying the base theme

The first step is to understand what base theme you are using, or if you are using a custom theme already, what base theme it was built on. Here are some easy ways of doing so:

Sigma

On the theme page, it should usually just tell you that it is a Sigma theme. For example:

This is a Sigma theme by wackdog

This is a Sigma+ theme by wackdog

(If it doesn't clarify, or doesn't require a Black Highlighter or Basalt include, it is probably Sigma).

---

Black Highlighter

Black Highlighter will have its signature logo on the theme page, as well as a BHL include:

---

Basalt

Basalt will have its signature logo on the theme page, as well as an include:

---

Modifying Sigma

Logo

Within the Sigma CSS, the logo is the background image of the header, it can be changed as follows:

[[module CSS]]
#header {
    background-image: url(https://your-url-here.png);
}
[[/module]]

Change the bolded section to the URL of your image, this should be an SCP wiki link after you upload the image to the page.

---

Header

Header 1: "SCP Foundation"
This is located and can be changed as follows:

[[module CSS]]
#header h1 a span {
  line-height: 0px;
  max-height: 0px;
  color: transparent;
  text-shadow: none;
}
#header h1 a::before {
  content: "Your Foundation";
}
[[/module]]

Header 2: "Secure Contain Protect"
This is located and can be changed as follows:

[[module CSS]]
#header h2 span {
  line-height: 0px;
  max-height: 0px;
  color: transparent;
  text-shadow: none;
}
#header h2 span::before {
  content: "Something. Something. Something else.";
  color: #f0f0c0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
[[/module]]

---

Sigma+

Sigma+ uses variables instead:

[[module CSS]]
:root {
  --header-title: "Your Foundation";
  --header-subtitle: "Something, Something, Something else.";
  --sp_header-logo: url(https://your-url-here.png);
}
[[/module]]

---

Modifying Black Highlighter

BHL uses variables, which makes targeting our chosen elements easier:

Logo

The variable for changing the logo is:

[[module CSS]]
:root {
  --logo-image: url("https://your-url-here.png");
[[/module]]

---

Header

And the variables for changing the headers are:

[[module CSS]]
:root {
  --header-title: "Your Foundation.";
  --header-subtitle: "Something. Something. Something else.";
[[/module]]

---

Modifying Basalt

Basalt also uses variables, which makes targeting our chosen elements easier:

Logo

The variable for changing the logo is:

[[module CSS]]
:root {
  --logo: url("https://your-url-here.png");
[[/module]]

---

Header

And the variables for changing the headers are:

[[module CSS]]
:root {
  --title: "Your Foundation.";
  --subtitle: "Something - Something - Something else.";
[[/module]]

---

Final Notes

Quick tips and fixes.

• You do not have to create a new CSS module for each implementation. They can all share one CSS module.
• Make sure your CSS module is after your theme include.
• Try not to make either of your Header titles too long, as they will have trouble wrapping on mobile. Contact somebody in #writing-technical in the Official SCP Discord for help setting this up without causing issues on mobile.

Catch you next time, where we will cover modifying theme colours and colour palettes!

‡ Licensing / Citation

Cite this page as:

"Basic Theme Modification: Logo and Header Text" by wackdog, from the SCP Wiki. Source: https://scpwiki.com/basic-theme-modification. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Footnotes

1. A base theme is a core CSS layout and styling framework that defines fundamental structure and visuals, which other themes or article-specific styles can build on or extend, e.g. Sigma and BHL.