Share your custom CSS?

(Marcos P) #42

how to remove this button in footer of circleci css?


One cool tweak my colleague Tyler found on Discourse, customize the different types of onebox : quote, code, whitelist websites, twitter, amazon, etc.

Screenshot :


aside.quote .title {
    border-left: 5px solid #cc575d;

aside.onebox.whitelistedgeneric {
    border-left: 5px solid #43c461;

pre code {
    border-left: 5px solid #29303b;

aside.onebox.twitterstatus {
    border-left: 5px solid #25aae2;

aside.onebox.wikipedia {
    border-left: 5px solid #2b882b;
} {
    border-left: 5px solid #ff9900;

Tagging Style : I was not a fan of the presentation of the tags on latest. I wanted to use the width space and uppercase the tags with a smaller font size.

/* TAGS */

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
    text-transform : uppercase;
    font-size: 10px;
    color: #8694ab;

.topic-list-item .discourse-tags {
    display: inline;
    float: right;
    margin-right: 10px;
    font-size: 9px;

header .discourse-tag {
    color: #8694ab !important;

(Paul Nate) #45

Can you share ur CSS

(Marcos P) #46

your forum have a nice pallet of colors, congratulations! I do not usually like dark forums, but you chose good colors and stayed cool.

(Marco) #47

Ehi @Steven Can you share the color palette of your forum? It’s beautiful :blush:


Yes of course

There’s a lot of css customization too (1300+ lines) :sweat_smile:

(Marcos P) #49

I know well how

1857 :rolling_eyes:

(xiasummer) #50

I think each should also compare with a screenshot of the effects, could you please add one besides your CSS code?

(Sai Parthiv) #51

Would love if someone can share the CSS of :slight_smile:

(Pad Pors) #52

Nice Style :slight_smile:

may you share the css of the breadcrumb menu bar? thanks in advance.


.list-controls .category-breadcrumb > .badge-category{
        //border-radius: 15px;
        ol.category-breadcrumb {margin: 0;}
ol.category-breadcrumb li{
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #fbfbfb;
    font-weight: 700;}
    .list-controls .category-breadcrumb > .badge-category
    background-color: transparent !important;
padding: 7px 0 !important;
color: #343434 !important;
//font-size: 1.4rem;
   .list-controls .category-breadcrumb a.badge-category.category-dropdown-button
{padding-right: 5px !important;}
    .fa-caret-right:before{content: "\f105 ";} 
.fa-caret-down:before{content: "\f107 ";} 

(xiasummer) #53

I think we should make a clear list of what code will have what effect. Such “code + screenshot” mode.

Here in this post, I see a lot of discussing while found no clear posts. This is not a good way to use a discussion board.

(Chris Beach) #54

Make the desktop topic list less busy, and draw attention to the most recent poster by making previous posters semi-transparent:

.topic-list .posters a .avatar:not(.latest) {
    opacity: 0.4;

Customize Latest topic list posters

Did you know we could use differents colors on topic list, based on the categories ?

Here’s an example (I did this for the screen, I didn’t really made it pretty ^^) :

And the css, you just have to change IDCAT by… the id of the category :slight_smile:

tr.topic-list-item.category-IDCAT {
    background: #5C1604 !important;

(DjCyry) #56

Anyone have the css of ?

(Jay Pfaffman) #57

@HAWK might be able to help. Not the best way to tell her, but for a time, at least, it was impossible to access the top nav buttons (latest, categories, etc) on mobile (or my iPad, anyway).


Yup, I wrote it. Some info here. Feel free to bump that topic if you have questions.

Oh! I wasn’t aware of that. I’m not sure what I changed that would have affected that TBH. Perhaps the customer header. Is it still an issue?

(charles) #59

Can anyone share the css for this site with magazine card style layout? Is there a way to know if it is built with discourse?

(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.