A beginner’s guide: How to customize your new Discourse forum with CSS (Part 2)

Part 2 with CSS code snippets for Discourse forum customization.

 

Here’s a link to our forums if you would like to see or experience the live version.

ITEMS IN COMMON -> CSS


1. Removing items in the hamburger (horizontal) menu in the top right

/*Removes About in hamburger menu*/
.hamburger-panel a.about-link { display: none !important; }

 

2. Changing the category topic text colour

/*Making category topic writing green in menus*/
.topic-list th {
color: #2CC283;
font-weight: normal;
font-size: 1em;
}

 

3. Changing the size of the category description text

/*Front page category description writing smaller*/
.category-heading .category-logo { max-height: 70px; }
.category-heading p {
line-height: 1.5em;
font-size: 1.1em;
display: table-cell;
vertical-align: middle;
padding: 5px;
height: 65px;
}

 

4. Removing the subcategory links in the hamburger menu

/*Removes subcategory links from hamburger*\
.category-links .category-link.subcategory {
display: none;
}

 

5. Creating space in the centre and removing unnecessary info

/*getting rid of the centre bit on main page*/
.category-list .topics {
visibility: hidden;
}

 

6. Adjusting info in the pinned banner

/*BANNER*/
#banner {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
font-family: '$Brandon_med', sans-serif;
font-size: 14px;
line-height: 20px;
color: #fff;
background-color: #01212E;
}

 

7. Highlighting the category images on a dark theme

img.category-logo {
background: #0383b6;
margin-top: 15px;
}

 

ITEMS IN COMMON -> </head>:


8. Adding extra links in the hamburger menu at the bottom

api.decorateWidget('hamburger-menu:footerLinks', () => {
return { href: 'http://arrowheadgamestudios.com/contact/', rawLabel: 'AH Contact' };
})

 

ITEMS IN COMMON -> </body>:


9. Making a trackable member group in the menu

/*Adding a Developer Tracker group*\
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href')
}.property('href')
}); I18n.translations.en.js.filters.devtracker = { title: 'Dev Tracker', help: 'Developer Posts'}; Discourse.NavItem.reopenClass({
buildList : function(group, args) {
var list = this._super(group, args);
if(!group) {
list.push(Discourse.ExternalNavItem.create({href: 'https://community.arrowheadgs.com/groups/Dev/activity/posts', name: 'devtracker'}));
}
return list;
}
});

**Add an extra line at the start with “<script>” before the code begins and another final line with “</script>” at the very end.**

 

ITEMS IN DESKTOP -> CSS:


 10. Adding a background image site-wide

/*background image*/
html {
background: #01212e url(https://discourse-cdn-sjc1.com/standard6/uploads/arrowheadgs/original/1X/bc49ec7fc169ddfa59a46a035a84f886a194c314.jpg);
background-size: cover;
background-position: 50% 30px;
background-attachment: fixed;
}

 

11. Making the centre of the page white for readibility if you are using an image

/*Making background in the centre white*/
#main-outlet {
background-color: white;
padding-left: 50px;
padding-right: 50px;
}

 

12. Making a hover over highlight for easier navigation

.topic-list-item:hover {
background-color: #DDF7EC;
}

 

ITEMS IN MOBILE -> CSS:


13. Making the mobile logo smaller to take up less space

.d-header #site-logo {
max-width: 170px;
} .d-header #site-logo {
max-height: 60px;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.