Theme Changelog

Display

Theme > Version: ModernBB

Colors & CSS

Important Note: Please see the javascript code management for the font import. Why is it there and not in this section, you ask? Because 1) google fonts are old and outdated, and 2) forumotion is stupid and appends all of your CSS to the very end of their own file, therefore you cannot use @import rules within the CSS. If github is ever down however, the fonts will fallback to forumotion's google font imports. What that means is no fancy ligatures and font features that are set in my own CSS files, but the fonts will still display, just not quite how I intend them to.

Title/Main font face: 'Inter', sans-serif
Code font face: 'JetBrains Mono', Courier, Courier New, monospace
Main font size: 14 Text color, Quote font color: #000000 █

Link, visited link color: #426B19 █
Active, hover link color: #71A642 █

Background, body line background: #EDEBCA █
Background color 1, 2, 3, Rollover, thanked message color: #F1F2E4 █
Buttons, code, quote color: #EBEADD █
Drop-down menu, form fields and header border color: #7C9662 █

Header background color: #ABCC8A █
Editor background (toolbar): #C2D4B0 █
Editor background (textarea): #FBFFF7 █

Forum line color: #7A9C5E █
Row line color: #D2E8BC █
Category header background color: #789957 █
Category background, category border color: #7A9C5E █

Stylesheet

Code:

/* Begin a11y reset */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  /* Font scales based on user preferences with a proper line height - overrides the default set in the font/color settings to allow those with larger default sizes to read comfortably */
  font-size: 100%;
  line-height: 1.5;
}

body {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  /* Spacing based on character width - word spacing should be roughly 3x letter spacing. This makes font readable for those with blurred vision/dyslexics */
  letter-spacing: .08ch;
  word-spacing: 0.24ch;
}

a:link, a:visited {
  text-decoration-skip-ink: auto;
}

a:hover, a:focus, a:active {
  text-decoration: none;
}

/* Remove outline from links and other objects that shouldn't recieve focus */
[tabindex="-1"]:focus {
  outline: none!important;
}

/* HTML5 Element Display Fallback */
section, article, aside, details, figure, figcaption,
footer, header, hgroup, menu, nav {
  display: block;
}

summary h2, summary h3, summary h4, summary h5, summary h6 {
  display: inline-block;
}

/* Anywhere from 50-70 characters is the optimal line width for reading */
p {
  max-width: 70ch;
}

/* Cursor change to better show elements that are clickable */
summary, button, select, [type="reset"], [type="button"], [type="submit"], [type="radio"], [type="checkbox"], ::file-selector-button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.sceditor-container textarea, .sceditor-container textarea:focus, .sceditor-container textarea:focus-within {
  outline: revert;
  resize: both;
}
/* End a11y reset */

.navbar li:has(> a[href*="/faq"], > a[href*="/images"], > a[href*="/gallery"], > a[href*="/calendar"]) {display:none;
}

#wrap {max-width: 1800px;}

h1.page-title {
  font-size: 2.4rem;
}

h3 a:visited, .h3 a:link, a.forumtitle:link, a.forumtitle:visited {
  color: #426b19;
}

.module .h3 {
  background: #7a9c5e;
  color: #ffffff;
}

.forabg.hidden {
  background: rgba(122, 156, 54, 0.6)
}

.profile-icons a:hover, .profile-icons a.selected, .profile-icons span:hover, .profile-icons span.selected {
  background: #71A642;
}
.btn-delete a:hover {
  background-color: #F44336;
}

.codebox.spoiler::before {
  content: '\f133';
}

#ptrafic_close, #ptrafic_open {
  display: none;
}

Structure & Hierarchy

Split categories on index: medium
Display links of sub-forums: Yes
Display the "Who is online" forum module: On root index only

General

Configuration

Forum Width: 100%
Profile position in the messages: Left

Modules

Javascript codes management

Create a new javascript:
Title: Font imports
Placement: In all the pages

Code:

document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<link rel=\"stylesheet\" href=\"https://beechface.github.io/wcc/styles/fontInter.css\" />");
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<link rel=\"stylesheet\" href=\"https://beechface.github.io/wcc/styles/fontJetBrains.css\" />");

Forum Widgets Management

Column 1 (left): 200px
Column 3 (Right): 0
Space between: 5 (both)

Create a Widget:
Widget Name/Title: Navigation

Code:

<a href="/">Rules</a><br />
<a href="/">And</a><br />
<a href="/">Other</a><br />
<a href="/">Links</a><br />
<a href="/">Here</a><br />


Left Column: -Login -Navigation, other stuff if desired