Basic Theme Modification: Logo and Header Text

Link to article: Basic Theme Modification: Logo and Header Text.

img {
    margin: 1em 0em 1em;
}
h1 {
  margin-top: 2em;
}

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

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

#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);
}

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

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

:root {
  --header-title: "Your Foundation.";
  --header-subtitle: "Something. Something. Something else.";

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

:root {
  --title: "Your Foundation.";
  --subtitle: "Something - Something - Something else.";

(none)

(none)

[[include :scp-wiki:component:toggle-sidebar]]
[[include :scp-wiki:component:croqstyle]]
[[module CSS]]
img {
    margin: 1em 0em 1em;
}
h1 {
  margin-top: 2em;
}
[[/module]]
[[>]]
[[module rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=wackdog]]
More at my [http://scp-wiki.wikidot.com/wackdog| Author Page]!
[[include :scp-wiki:component:author-label-source end=--]]
@@ @@
Hello! I am [[*user 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 [https://scp-wiki.wikidot.com/fish-s-absolute-beginner-s-guide-to-css Fish's Absolute Beginner's Guide To CSS.]

This specific guide will cover the modification of the **logo** and **header titles.**
[[=image annotate.png]]
The implementation of these changes is different depending on the **base theme**,[[footnote]]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.[[/footnote]] each base theme will be covered in it's own section.

[[toc]]
----
[[=]]
+ 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 [https://scp-wiki.wikidot.com/theme:site Sigma] theme by [[*user wackdog]]

> This is a [https://scp-wiki.wikidot.com/component:sigma-plus Sigma+] theme by [[*user 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:
[[image bhl-include.png]]
----

[[=]]
+++ Basalt
[[/=]]
Basalt will have its signature logo on the theme page, as well as an include:
[[image basalt-title.png]]
----
[[=]]
+ Modifying Sigma
[[/=]]
[[=]]
+++ Logo
[[/=]]
[[image sigma-logo.png]]
Within the Sigma CSS, the logo is the background image of the header, it can be changed as follows:
[[code type="css"]]
[[module CSS]]
#header {
    background-image: url(https://your-url-here.png);
}
[[/module]]
[[/code]]
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
[[/=]]
[[image sigma-header.png]]
**Header 1: "SCP Foundation"**
This is located and can be changed as follows:
[[code type="css"]]
[[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]]
[[/code]]

**Header 2: "Secure Contain Protect"**
This is located and can be changed as follows:
[[code type="css"]]
[[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]]
[[/code]]
----
[[=]]
+++ Sigma+
Sigma+ uses variables instead:
[[/=]]
[[code type="css"]]
[[module CSS]]
:root {
  --header-title: "Your Foundation";
  --header-subtitle: "Something, Something, Something else.";
  --sp_header-logo: url(https://your-url-here.png);
}
[[/module]]
[[/code]]
----
[[=]]
+ Modifying Black Highlighter
BHL uses variables, which makes targeting our chosen elements easier:
[[/=]]
[[=]]
+++ Logo
[[/=]]
[[image bhl-logo.png]]
The variable for changing the logo is:
[[code type="css"]]
[[module CSS]]
:root {
  --logo-image: url("https://your-url-here.png");
[[/module]]
[[/code]]
----
[[=]]
+++ Header
[[/=]]
[[image bhl-header.png]]
And the variables for changing the headers are:
[[code type="css"]]
[[module CSS]]
:root {
  --header-title: "Your Foundation.";
  --header-subtitle: "Something. Something. Something else.";
[[/module]]
[[/code]]
----
[[=]]
+ Modifying Basalt
Basalt also uses variables, which makes targeting our chosen elements easier:
[[/=]]
[[=]]
+++ Logo
[[/=]]
[[=image basalt-logo.png]]
The variable for changing the logo is:
[[code type="css"]]
[[module CSS]]
:root {
  --logo: url("https://your-url-here.png");
[[/module]]
[[/code]]
----
[[=]]
+++ Header
[[/=]]
[[=image basalt-header.png]]
And the variables for changing the headers are:
[[code type="css"]]
[[module CSS]]
:root {
  --title: "Your Foundation.";
  --subtitle: "Something - Something - Something else.";
[[/module]]
[[/code]]

----

[[=]]
+ 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 [https://discord.com/invite/scp 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!
@@ @@
@@ @@


@@ @@
@@ @@


@@ @@
[[include :scp-wiki:component:license-box]]
[[include :scp-wiki:component:license-box-end]]

Basic Theme Modification: Logo and Header Text

Module Styles

Inline Styles

Includes

CSS Classes

Page Source