A few simple customization examples for newbies

themes-discussion

(ljpp) #1

I want to give something back to a great open source project. Note that this is not anything special, and most of the codied is actually copied from the her examples on this forum. So very basic stuff that even someone who is clueless about CSS (like me) can apply to your Discourse installation, to give it a bit more customized look & feel.

I have applied these patches to two sites:

  • Tappara.co (a hockey fan forum in Finnish, much bigger than Meta. Currently in public testing perioid)
  • cd-rw.org (a quiet vintage tech site brought back to life)

Header shadow and stripe:

/*header stripe, shadow*/
.d-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
border-bottom: 3px solid #ff6600;
}

Boosting the shadow adds a little 3D-effect to the header, but what I really like is the stripe to match the key color of your logo or brand. Replace the #ff6600 (Orange) with the color you need.

Adjust background colors, get rid of pure whites

// natural white background for content, light blue for margins
body:before {
    display: inline-block;
    width: 1125px;
    min-height: 100%;
    height: inherit;
    background-color: #FDFBF9;
    content: " ";
    position: fixed;
    left: 50%;
    right: 0;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

// compatibility for all devices
@media (max-width: 1139px) and (min-width: 1000px)
{
    body:before {
        width: 1010px;
    }
}

body {
    background-color: #e6e6e6;
}

By default DIscourse is disturbingly white. This patch gives you two colors adjust. Dim the content background slightly, and add something a bit darker to fill the excess space on the sides. Use one of the many color combo generators on the web (Google it) to find shades that are compatible with your brand colors.

Increase logo size

#site-logo.logo-big {
    max-height: 50px;
    max-width: 186px;
    margin-top: -5px;
}

.logo-small {
    max-height: 50px;
    max-width: 50px;
    margin-top: -5px;
}

If you have a good logo, it doesn’t hurt to boost the size just a bit.

Slight shadow around the content

body.docked::before{
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}

Just a little depth addd to bring the content up front.

Reduce clutter

If your forum is quiet, then the Discourse default view is great to make it look more busy than it actually is. But if your forum is actually a busy one, it gives you a crapload of avatars and makes your eyes bleed. For a busy forum have a look at the Sam’s Minimal theme, but note that you need to be on the 1.5 beta branch or newer.

Thats it. Hopefully some Discourse newcomer finds these useful. I hope you like them. And I am more than interested in hearing more suggestions how to pimp these sites for even better looks.


Theme Gallery / Skin
Battle Axe - A free theme by the Tappara.co hockey community
(RĂ©gis Hanol) #2

How is it bigger than meta?

meta.discourse.org

tappara.co


(ljpp) #3

Well we both have 1.2K messages during the last 7 days, but we were not even open yet. It was just project talk how are we going to do things, as we are moving in from here: Tappara.co

Meta’s user count is vastly bigger, but we expect to have massive post and traffic numbers, if the transition from Tappara.info is a success.

Okay, much bigger may have been an overstatement. Our traffics are not at all similar. And besides, that point is very off-topic.


(Daniela) #4

You have a syntax error, probably on the same stylesheet of avatar Sam's personal "minimal" topic list design
This is the reason your avatar is still round. Take a look in your css.


(ljpp) #5

Very cool @Trash, thanks! It was supposed to be a 1:1 copy of Sam’s Minimal, but apparently my fingers have hit the keyboard accidently at some point, or something.

Re-applied Sam’s patch and squares are back.

It’s too bad that @sam implementation does not work with stable branch. In fact, Discourse should ship it with the baseline and allow admin (or user?) to select in between complex and simple view.

Has anyone ported Minimal to work on Stable (1.4.3)?