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 =)
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; }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;
}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.
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
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; }