CSS Recipes

This guide is designed to give you some copy/paste CSS you can add to your site for common features a game site may want =)

Hide Top Menu Bar

If you want a one page site and do not need the top menu, you can hide it with CSS:

#menu-bar-container { display: none; }

Sticky Top Menu

To make your menu bar stay stuck to the top of the page as you scroll, you can add this CSS to your site:

#menu-bar {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

Highlighting Official Responses

A common feature on gaming sites is to color code forum posts and comments from your team members a different color than regular users, for example Blizzard's blue posts.  This helps to make your posts stand out more, and also lets your users know more easily when an official member is responding.

On ManaKeep you can enable this on your site with some simple CSS:

/* news comments */
.article_comment.official > .box .user_title { color: #166bc5; }
.article_comment.official > .box .comment_entry { color: #166bc5; }

/* forum posts */
.forum_post.official .user_title { color: #166bc5; }
.forum_post.official .post_entry { color: #166bc5; }

The first line for each section colors the user title to a special color (if you want say your titles like Developer, Designer, etc. to be blue).  The second line colors your actual entry.

Multi-Color Home Page Blocks

Want the blocks on your home page to have different background colors like our ManaKeep home page?  Its quite easy =)

/* color the second block green */
.page-home .block:nth-child(2) { background-color: green; }

/* color the 4th block blue */
.page-home .block:nth-child(4) { background-color: blue; }


The .page-home class targets only your home page, to target other pages you will want to change this class; the class is based on the page name, so for example if you have a page called About you wanted to target, you would use the class .page-about

Loading Bar

When you switch pages a loading bar is shown at the top of the browser, you can change its color here to match your theme.

.turbolinks-progress-bar { background-color: #16c56b; }