Some stuff to get you started building your own custom theme!

what do I do????

If you want to get started with custom themes, head on over to /themes and hit that "New Theme" button. After naming it, you get taken to a page with a bunch of weird boxes. Here's what they do!

Parent theme

If you're not building on top of another another theme, you can leave this blank!

If you want to use a different theme as a starting point, paste in the entire theme name in that box with the username, like "Moonside/Saturn-Valley". After you save, this will change to big old string that points to a specific revision of a theme. This is so if a user changes a theme your theme is built on top of it won't change your theme!

Common, Daytime, Night CSS

PUT THEME HERE. This is the important stuff!

There's three CSS boxes because Postmill allows a toggable night mode. CSS that's used in both modes goes under Common, stuff only for the default mode under Daytime, and Night mode CSS goes under Night.

Comment

If you want to be good about documenting things. I don't know how to view these!!!!

Append to default style

A dangerous checkmark! The form explains it well, you should probably keep it checked.

Okay CSS is in!

The save button is "Edit Theme". If it's a sitewide theme you can just turn it on under User Settings and see how it looks! If it's a forum theme and you want to test it before applying it for good, also set it as your theme under User Settings and make sure it doesn't break anything. Then:

Apply a theme to a forum

Go to a forum that you moderate, then in the sidebar under Toolbox click "Appearance". Select theme from that dropdown! Those other links are just for convenience I guess.

Here's some theme starters!

Here's some stuff that I learned making the site's default themes, as well as the forum themes for Just Post etc.

Basic color changing

This changes the nav bar, buttons, links to comment pages, and reply links. [main color] is the color used the most, [alt color] is the one used on hover, behind inbox notification links, and inside the menu on mobile.

.site-nav, .pagination a, .subscribe-button__label, .subscribe-button__subscriber-count, .button {
  background-color: [main color];
}

.comment-nav-reply a, .submission-nav ul li:first-child a, .submission-permalink-nav a  {
  color: [main color];
}

.tabs__tab.tabs__tab--active {
  border-bottom: 3px solid [main color];
}

.pagination a:hover, .button:hover, .site-nav__item.dropdown-container.expanded, .site-nav__item.dropdown-container:not(.js):hover, .dropdown-menu>li>a:hover, .subscribe-button:hover .subscribe-button__label, .site-nav__item--has-notifications {
  background-color: [alt color];
}

@media (max-width: 768px) {
  .site-nav__inner, .site-nav__mobile-toggle--has-notifications {
    background-color: [alt color];
  }
}

Changing menu and button text color to black

In themes where the main color is too bright for white text, I need to make it black! Here's what I used:

.site-nav, .pagination a, .subscribe-button__label, .subscribe-button__subscriber-count, .button, .site-nav__link, .site-nav__logo {
 color: #000001;
}   

@media (max-width: 768px) {
    .site-nav__mobile-toggle {
        color: #000001;
    }
}

Okay that's all for now

Let me know if you need help changing anything else!