Share your custom CSS?

(Pad Pors) #60

I think this topic will help:

(charles) #61

I tried your suggestion with plugin and added css then enabled it. Only shows single column and with all the extra info. Doesn’t show anything like what is pictured from Tom.

(Pad Pors) #62
.topic-intro {display: none}

this will remove the avatar and name of the poster. otherwise you may right-click on them and click on inspect elements and see the name of the <dic class= "LOOK HERE"> and then remove this class from your css with the above line.

about the number of columns it depends on the width of your screen and width of the column, reduce max-width from 350px to 300 px and you may see more than one column.

(DjCyry) #63

I will share my custom css , with many modifications like feverbee . Enjoy !

css_merkador.txt (221.3 KB)

(Mitchell Krog) #64

Very nice @djcyry I will tweak it a bit and see. I looked at GitHub - circleci/discourse-styles: Less styles for mentioned by @levlaz but can not make sense of how to import that into Discourse. There’s a build folder mentioned but not there, anyone managed to install the CSS from circleci and can give some clearer instructions?

(Chris Beach) #65

Making private message threads look less like regular topics (after several user complaints):



.archetype-private_message .d-header {
  background-color: #d6f0d6 
.archetype-private_message #topic-title h1 a, 
.archetype-private_message .extra-info-wrapper h1 a,
.archetype-private_message .private-message-map h3,
.user-menu .notifications .fa-envelope-o,
.private-message-glyph {
  color: #306f30 
.private-message-glyph {
  font-size: 30px; margin-right: 10px; margin-left: 10px;
.archetype-private_message #topic-footer-buttons button.create,
.archetype-private_message #reply-control .btn-primary {
color: white; background-color: #306f30
#main-outlet > .private_message #topic { 
  background-color: #f0fff0;
.archetype-private_message .private-message-map h3:after {
  content: " (Private)";
.archetype-private_message .topic-post button.create:after,
.archetype-private_message #topic-footer-buttons button.create:after,
.archetype-private_message #reply-control .btn-primary:after {
  content: " Privately";
.archetype-private_message #suggested-topics,
.archetype-private_message .topic-map ul:first-child,
.archetype-private_message .topic-map nav.buttons { 
    display: none; 

Change color of private messages
Change Text on a Button (Reply Privately)

I see some requests regarding the about page. If you want to customize your about page, there are some tricks already available, here are my example :

I added a background on each part of this page and used a little icon on the titles. It’s light and easy and it adds some style to this page.

I use a dark theme, so for a light one, you just have to change the color on the background-color with anything else.

section.about.admins {
    border-top: 1px solid #5294e2;
    padding: 10px;
    background-color: #3b4252;
    margin-top: 30px;
section.about.admins h3::before, section.about.moderators h3::before {
    font-family: "FontAwesome";
    content: "\f0c0";
    margin-right: 8px;

section.about.moderators {
    padding: 10px;
    background-color: #434c5e;

section.about.stats {
    padding: 10px;
    background-color: #3b4252;
section.about.stats h3::before {
    font-family: "FontAwesome";
    content: "\f080";
    margin-right: 8px;
} {
    padding: 10px;
    background-color: #434c5e;
} h3::before {
    font-family: "FontAwesome";
    content: "\f003";
    margin-right: 8px;

(DjCyry) #67

You have it here :

(DjCyry) #68

I think that style have some bugs , i dont remember .
If you install it and fix it , can you please share it with me ? thanks .

(Mitchell Krog) #69

I used that as a base and customised it quite a bit (not 100% perfect yet though)
see here - Custom CSS for Discourse

(Arpit Jalan) #70

That is neat! This change is now included in core via:

We want to include this change in core as well but not sure which background color/shade to use so that it looks good on all themes (dark/light). I am looking into it.

(Daniel Rangga) #71

Hello Everyone

Can you tell me where i can put css rules ? i can’t find the area for add css rule


(Barry van Oudtshoorn) #72

You’ll need to:

  1. Click on the hamburger menu
  2. Click on “Admin”
  3. Select “Customize”
  4. Add a new theme
  5. Edit the CSS/HTML
  6. Enable it

You’ll probably also want to edit the theme’s name. :wink:

(Daniel Rangga) #73

Thank you @barryvan, finally.

do you know If we want to call google fonts script and font awesome script inside the head or footer, where is the section to put script ?

(Sam Saffron) split this topic #74

A post was split to a new topic: Add a custom fontawesome icon to your tag

(DjCyry) #75

Anyone from for share their css design ? :grin: its awesome .

(Joe) #76

New spinner

Default spinner:

default discourse loading spinner

New spinner:

new loading spinner design


.spinner {
    height: 35px;
    width: 35px;
    border: none;
    box-shadow: inset 0 1px 1px #009688 /* change the color to your liking */;

How do I change the html and css code of the loader?

As my theme is space related i did want a more spacy spinner.

This is the result:

$spinner-size: 100px;
.loading-container {
    position: relative;
        width: $spinner-size;
        height: $spinner-size;
        margin: auto;
        position: absolute;
        left: calc(50% - #{$spinner-size / 2});
        top: $spinner-size;
        color: $tertiary;
        border: none;
        // iam based on vincent theme, with default you dont need this line
        box-shadow: none !important; 
        animation: color-bubble 2s linear 0s infinite;
        &:after, &:before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: 100%;
            box-shadow: 0 0 0 3px;
            animation: spinner-bubble 1.3s linear 0s infinite;
            margin: auto;
            width: $spinner-size;
            height: $spinner-size;
            opacity: 0;
            animation: spinner-bubble 1.3s linear 2s infinite;

@keyframes spinner-bubble{
        width: 10px;
        height: 10px;
        opacity: .8;
        width: $spinner-size;
        height: $spinner-size;
        opacity: 0;

@keyframes color-bubble{
    0%{color: $primary;}
    33%{color: $secondary;}
    66%{color: $tertiary;}
    100%{color: $quaternary;}

How do I change the html and css code of the loader?
(Josh) #78

Useful for new communities without a lot of posts:

/* hide cateogies see */

span.category-name,a.badge-wrapper.bullet,ol.category-breadcrumb,.topic-list .category.sortable, .topic-list .category, .category-links.clearfix,.select-box .select-box-header,.list-controls .category-breadcrumb {
    display: none;
div.category-input {
    display: none !important;

Now I’m trying to show categories for .staff using :not

(Emilio F Castillo) #79

what are the stops needed to take in order to get this set up? where would we paste the code etc…?