Game Website Template with original illustrations

That's why I asked if there was anyone who had a wordpress version in the beginning^^ ;D

 

I used this template to create the website quaaludebottle.com but I can't figure out how to use the blog page. I would like to use the blog page template for the stories section of the site. Any help would be appreciated.

Also, I can't find where to post a question so I had no choice but to post it as a reply, sorry.

Thanks, Gary

 

I was wondering how I would go about adding sidebars to the game website template. I am a total novice when it comes to CSS and website design in general for that matter. I have been playing around with trying to add the banners myself but I am not really getting anywhere. Some guidance in the right direction would be amazing.

Code:

/*Website Template by freewebsitetemplates.com*/
@font-face {
    font-family: 'Philosopher-Regular';
    src: url('../fonts/Philosopher-Regular/Philosopher-Regular.eot');
    src: url('../fonts/Philosopher-Regular/Philosopher-Regular.woff') format('woff'), url('../fonts/Philosopher-Regular/Philosopher-Regular.ttf') format('truetype'), url('../fonts/Philosopher-Regular/Philosopher-Regular.svg') format('svg');
}
@font-face {
    font-family: 'Philosopher-Bold';
    src: url('../fonts/Philosopher-Bold/Philosopher-Bold.eot');
    src: url('../fonts/Philosopher-Bold/Philosopher-Bold.woff') format('woff'), url('../fonts/Philosopher-Bold/Philosopher-Bold.ttf') format('truetype'), url('../fonts/Philosopher-Bold/Philosopher-Bold.svg') format('svg');
}
body {
    background: url(../images/bg-body.jpg) repeat;
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    margin: 0;
    min-width: 960px;
    padding: 0;
}
#background {
    background: url(../images/bg-page.jpg) no-repeat top center;
    margin: 0;
    padding: 0;
}
#header {
    background: url(../images/bg-header2.png) repeat-x top center;
    margin: 0;
    padding: 0;
}
#header > div {
    background: url(../images/bg-header.png) no-repeat top center;
    margin: 0;
    padding: 0;
}
#header > div > div {
    height: 147px;
    margin: 0 auto;
    padding: 49px 0 0;
    position: relative;
    width: 960px;
    z-index: 5;
}
#header a.logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 540px;
}
#header a.logo img {
    border: 0;
    display: block;
}
#header ul {
    background: url(../images/bg-navigation.png) no-repeat center center;
    bottom: -106px;
    height: 98px;
    left: 19px;
    margin: 0 auto;
    overflow: hidden;
    padding: 9px 17px;
    position: absolute;
    width: 865px;
}
#header ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0 5px;
    padding: 0;
}
#header ul li a {
    background: url(../images/menu.png) no-repeat;
    color: #a8a8a8;
    display: block;
    font-family: 'Philosopher-Bold';
    font-size: 16px;
    font-weight: normal;
    height: 98px;
    letter-spacing: 0.07em;
    line-height: 104px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 163px;
}
#header ul li #menu1 {
    background-position: 0 0;
}
#header ul li #menu2 {
    background-position: -168px 0;
}
#header ul li #menu3 {
    background-position: -335px 0;
}
#header ul li #menu4 {
    background-position: -502px 0;
}
#header ul li #menu5 {
    background-position: -669px 0;
}
#header ul li a:hover, #header ul li.selected a {
    color: #fff;
}
#header ul li #menu1:hover, #header ul li.selected #menu1 {
    background-position: 0 -113px;
}
#header ul li #menu2:hover, #header ul li.selected #menu2 {
    background-position: -168px -113px;
}
#header ul li #menu3:hover, #header ul li.selected #menu3 {
    background-position: -335px -113px;
}
#header ul li #menu4:hover, #header ul li.selected #menu4 {
    background-position: -502px -113px;
}
#header ul li #menu5:hover, #header ul li.selected #menu5 {
    background-position: -669px -113px;
}
#body {
    background: url(../images/bg-body-header.png) no-repeat top center;
    margin: 0 auto;
    padding: 112px 0 0;
    width: 960px;
}
#body p {
    margin: 0;
    padding: 0;
}
#body p a {
    color: #797979;
}
#body p a:hover {
    color: #a3a3a3;
}
#body > div {
    background: url(../images/bg-body-footer.png) no-repeat bottom center;
    margin: 0;
    padding: 0 0 114px;
}
#body > div > div {
    background: url(../images/bg-body2.png) repeat-y top center;
    min-height: 400px;
    margin: 0;
    padding: 0;
}
#body div div .featured {
    height: 361px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 960px;
}
#body div div .featured img {
    display: block;
    left: 4px;
    position: absolute;
    top: -1px;
    z-index: 1;
    width: 950px;
}
#body div div .section {
    background: #0a0a0a url(../images/gradient.png) repeat-x bottom center;
    margin: 0 auto;
    overflow: hidden;
    padding: 102px 9px 22px 9px;
    width: 940px;
}
#body div div .section > div {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 10px;
    padding: 3px 0 0;
    width: 220px;
}
#body div div .section > div:first-child {
    width: 440px;
}
#body div div .section div h4 {
    background: #070707 url(../images/gradient2.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin: 0 0 1px;
    padding: 10px 19px;
}
#body div div .section div div {
    background: #181818;
    border: 1px solid #22272a;
    margin: 0;
    padding: 20px 19px;
}
#body div div .section div:first-child div {
    padding: 14px 19px 30px;
}
#body div div .section div div p {
    line-height: 24px;
    margin: 0;
    padding: 0;
}
#body div div .section div div p a {
    color: #727272;
}
#body div div .section div div p a.more {
    background: url(../images/bg-more.png) no-repeat center center;
    color: #bababa;
    display: inline-block;
    height: 23px;
    font-size: 10px;
    font-weight: normal;
    line-height: 22px;
    margin: 0 0 0 12px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    width: 70px;
}
#body div div .section div div p a:hover {
    color: #a3a3a3;
}
#body div div .section div div p a.more:hover {
    background: url(../images/bg-more-hover.png) no-repeat center center;
    color: #bababa;
}
#body div div .section div h3 {
    background: #070707 url(../images/gradient3.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-family: 'Philosopher-Bold';
    font-size: 16px;
    font-weight: normal;
    height: 50px;
    letter-spacing: 0.07em;
    line-height: 50px;
    margin: 0 0 1px;
    padding: 0 19px;
    text-transform: uppercase;
}
#body div div .section div div a.figure {
    border: 1px solid #22272a;
    display: block;
    margin: 0;
    padding: 0;
}
#body div div .section div div a.figure:hover {
    opacity: 0.8;
}
#body div div .section div div a.figure img {
    border: 1px solid #000;
    display: block;
}
#body div div .section div div span {
    background: #181a1a url(../images/gradient4.png) repeat-x bottom left;
    border-bottom: 1px solid #22272a;
    border-left: 1px solid #22272a;
    border-right: 1px solid #22272a;
    display: block;
    height: 38px;
}
#body div div .section div div span a {
    color: #a7a9ac;
    display: block;
    font-size: 12px;
    line-height: 38px;
    margin: 0;
    padding: 0 9px;
    text-align: center;
    text-decoration: none;
}
#body div div .section div div span a:hover {
    color: #fff;
}
#body .media, #body .games, #body .about, #body .blog {
    margin: 0;
    padding: 24px 0;
}
#body .media > div {
    margin: 0;
    overflow: hidden;
    padding: 0 10px;
}
#body .media > div > div {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 10px;
    padding: 3px 0 0;
    width: 450px;
}
#body .media h3 {
    background: #070707 url(../images/gradient3.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-family: 'Philosopher-Bold';
    font-size: 16px;
    font-weight: normal;
    height: 50px;
    letter-spacing: 0.07em;
    line-height: 50px;
    margin: 0 0 1px;
    padding: 0 19px;
    text-transform: uppercase;
}
#body .media ul {
    background: #181818;
    border: 1px solid #22272a;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
#body .media ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#body .media div div ul {
    padding: 8px;
}
#body .media div div ul li {
    border: 1px solid #22272a;
    display: block;
    float: left;
    margin: 8px 10px;
    padding: 0;
    width: 194px;
}
#body .media div div ul li a.figure {
    display: block;
    margin: 0;
    padding: 0;
}
#body .media div div ul li a.figure:hover {
    opacity: 0.8;
}
#body .media div div ul li a.figure img {
    border: 1px solid #000;
    display: block;
}
#body .media div div ul li span {
    background: #181a1a url(../images/gradient4.png) repeat-x bottom left;
    border-top: 1px solid #22272a;
    display: block;
    height: 38px;
}
#body .media div div ul li span a {
    color: #a7a9ac;
    display: block;
    font-size: 12px;
    line-height: 38px;
    margin: 0;
    padding: 0 9px;
    text-align: center;
    text-decoration: none;
}
#body .media div div ul li span a:hover {
    color: #fff;
}
#body .media .article {
    background: url(../images/border.gif) repeat-x top left;
    margin: 17px auto 0;
    padding: 3px 0 0;
    width: 920px
}
#body .media .article ul {
    padding: 0 10px;
}
#body .media .article ul li {
    display: block;
    float: left;
    margin: 0 9px;
    overflow: hidden;
    padding: 0 0 10px;
    width: 430px;
}
#body .media .article ul li a.figure {
    border: 1px solid #22272a;
    float: left;
    display: block;
    margin: 19px 13px 0 0;
    padding: 0;
}
#body .media .article ul li a.figure:hover {
    opacity: 0.8;
}
#body .media .article ul li a.figure img {
    border: 1px solid #000;
    display: block;
}
#body .media .article ul li p {
    font-size: 12px;
    line-height: 24px;
    padding: 13px 0 0;
}
#body .media .article ul li p a {
    color: #727272;
}
#body .media .article ul li p a:hover {
    color: #a3a3a3;
}
#body .games {
    overflow: hidden;
}
#body .games div {
    margin: 0;
    padding: 0;
}
#body .games h3 {
    background: #070707 url(../images/gradient3.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-family: 'Philosopher-Bold';
    font-size: 16px;
    font-weight: normal;
    height: 50px;
    letter-spacing: 0.07em;
    line-height: 50px;
    margin: 0 0 1px;
    padding: 0 19px;
    text-transform: uppercase;
}
#body .games div ul {
    background: #181818;
    border: 1px solid #22272a;
    margin: 0;
    padding: 0;
}
#body .games div ul li {
    border: 1px solid #22272a;
    list-style: none;
    margin: 0;
    padding: 0;
}
#body .games div ul li a.figure {
    display: block;
    margin: 0;
    padding: 0;
}
#body .games div ul li a.figure:hover {
    opacity: 0.8;
}
#body .games div ul li a.figure img {
    border: 1px solid #000;
    display: block;
}
#body .games div ul li span {
    background: #181a1a url(../images/gradient3.png) repeat-x bottom left;
    border-top: 1px solid #22272a;
    display: block;
}
#body .games div ul li span a {
    color: #a7a9ac;
    display: block;
    margin: 0;
    padding: 0 9px;
    text-decoration: none;
}
#body .games div ul li span a:hover {
    color: #fff;
}
#body .games .content {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 0 0 19px;
    padding: 3px 0 0;
    width: 470px;
}
#body .games .content ul {
    padding: 16px 19px 1px;
}
#body .games .content ul li {
    margin: 0 0 20px;
}
#body .games .content ul li span a {
    font-size: 14px;
    height: 48px;
    line-height: 48px;
}
#body .games .aside {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 0 0 30px;
    padding: 3px 0 0;
    width: 420px;
}
#body .games .aside ul {
*min-height: 568px;
    overflow: hidden;
    padding: 5px 8px 11px;
}
#body .games .aside ul li {
    float: left;
    margin: 11px 10px;
    width: 178px;
}
#body .games .aside ul li span a {
    font-size: 12px;
    height: 38px;
    line-height: 38px;
    text-align: center;
}
#body .games .article {
    clear: both;
    float: left;
    width: 960px;
}
#body .games .article p {
    font-size: 12px;
    line-height: 24px;
    padding: 11px 20px 0;
}
#body .games .article p a {
    color: #797979;
}
#body .games .article p a:hover {
    color: #a3a3a3;
}
#body .about {
    overflow: hidden;
}
#body .about ul {
    margin: 0;
    padding: 0;
}
#body .about ul li {
    background: url(../images/border.gif) repeat-x top left;
    list-style: none;
    margin: 0 0 20px;
    padding: 3px 0 0;
}
#body .about ul li h3 {
    background: #070707 url(../images/gradient3.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-family: 'Philosopher-Regular';
    font-size: 24px;
    font-weight: normal;
    height: 55px;
    line-height: 55px;
    margin: 0 0 1px;
    padding: 0 19px;
    text-transform: capitalize;
}
#body .about ul li div {
    background: #181818;
    border: 1px solid #22272a;
    margin: 0;
    min-height: 250px;
    padding: 11px 19px;
}
#body .about ul li div p {
    line-height: 24px;
    padding: 0 0 28px;
}
#body .about ul li div p span {
    font-size: 16px;
    text-transform: uppercase;
}
#body .about ul li div > span {
    text-transform: uppercase;
    line-height: 24px;
}
#body .about .content {
    float: left;
    margin: 0 0 0 20px;
    padding: 0;
    width: 560px;
}
#body .about .aside {
    float: left;
    margin: 0 0 0 20px;
    padding: 0;
    width: 340px;
}
#body .blog {
    overflow: hidden;
}
#body .blog ul {
    margin: 0;
    padding: 0;
}
#body .blog ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#body .blog .content {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 0 0;
    width: 610px;
}
#body .blog .content ul li {
    padding: 0 0 20px;
}
#body .blog .content ul li .header {
    background: #070707 url(../images/gradient5.png) repeat-x top center;
    border: 1px solid #22272a;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin: 0 0 1px;
    overflow: hidden;
    padding: 10px 18px 15px;
}
#body .blog .content ul li .header b {
    display: inline;
    float:left;
    line-height: 24px;
    margin: 0;
    padding: 0;
}
#body .blog .content ul li .header b a {
    color: #fff;
}
#body .blog .content ul li .header b a:hover {
    color: #727272;
}
#body .blog .content ul li .header span {
    background: #181818;
    border: 1px solid #22272a;
    border-radius: 4px;
    display: inline;
    float: left;
    margin: 0 0 0 34px;
    overflow: hidden;
    padding: 0;
}
#body .blog .content ul li .header span a {
    color: #bababa;
    display: block;
    float: left;
    font-size: 10px;
    height: 23px;
    line-height: 23px;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
}
#body .blog .content ul li .header span a:first-child {
    border-right: 1px solid #22272a;
}
#body .blog .content ul li .header span a:hover {
    color: #fff;
}
#body .blog .content ul li .article {
    background: #181818;
    border: 1px solid #22272a;
    margin: 0;
    overflow: hidden;
    padding: 14px 19px 19px;
}
#body .blog .content ul li .article a.figure {
    border: 1px solid #22272a;
    display: block;
    float: left;
    margin: 6px 20px 0 0;
    padding: 0;
}
#body .blog .content ul li .article a.figure:hover {
    opacity: 0.8;
}
#body .blog .content ul li .article a.figure img {
    border: 1px solid #000;
    display: block;
}
#body .blog .content ul li .article p {
    line-height: 24px;
}
#body .blog .content ul li .article p a.more {
    background: url("../images/bg-more.png") no-repeat center center;
    color: #bababa;
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
    height: 23px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    width: 70px;
}
#body .blog .content ul li .article p a.more:hover {
    color: #fff;
}
#body .blog .sidebar {
    background: url(../images/border.gif) repeat-x top left;
    float: left;
    margin: 0 0 0 30px;
    padding: 3px 0 0;
    width: 280px;
}
#body .blog .sidebar div {
    background: #070707 url(../images/gradient3.png) repeat-x top center;
    border: 1px solid #22272a;
    height: 48px;
    margin: 0 0 1px;
    overflow: hidden;
    padding: 0;
}
#body .blog .sidebar div span {
    display: block;
    float: left;
    margin: 0;
    padding: 8px 16px;
    width: 107px;
}
#body .blog .sidebar div span:first-child {
    background: url(../images/border2.gif) repeat-y right top;
}
#body .blog .sidebar div span a {
    color: #727272;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    width: 103px;
}
#body .blog .sidebar div span a:hover {
    color: #fff;
}
#body .blog .sidebar div span a.selected {
    color: #fff;
    background: #000;
    border: 1px solid #22272a;
    border-radius: 6px;
}
#body .blog .sidebar ul {
    border: 1px solid #22272a;
    background: #181818;
}
#body .blog .sidebar ul li {
    background: url(../images/border2.gif) repeat-x top left;
    padding: 9px 19px 11px;
}
#body .blog .sidebar ul li:first-child {
    background: none;
}
#body .blog .sidebar ul li > a {
    color: #727272;
    display: block;
    line-height: 24px;
    padding: 0 0 5px;
    text-decoration: none;
}
#body .blog .sidebar ul li > a:hover {
    color: #a3a3a3
}
#body .blog .sidebar ul li span {
    background: #181818;
    border: 1px solid #22272a;
    border-radius: 4px;
    display: inline-block;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
#body .blog .sidebar ul li span a {
    color: #bababa;
    display: block;
    float: left;
    font-size: 10px;
    height: 23px;
    line-height: 23px;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
}
#body .blog .sidebar ul li span a:first-child {
    border-right: 1px solid #22272a;
}
#body .blog .sidebar ul li span a:hover {
    color: #fff;
}
#footer {
    background: url(../images/bg-footer2.png) repeat-x bottom left;
    margin: 0;
    padding: 0;
}
#footer > div {
    background: url(../images/bg-footer.png) no-repeat bottom center;
    margin: 0;
    text-align: center;
    padding: 73px 0 42px;
}
#footer ul {
    display: block;
    margin: 0 auto;
    padding: 0 0 65px;
    overflow: hidden;
    width: 351px;
}
#footer ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0 22px;
    padding: 0;
}
#footer ul li a {
    background: url(../images/icons.png) no-repeat;
    color: #fff;
    display: block;
    line-height: 73px;
    height: 73px;
    text-decoration: none;
    text-indent: -99999px;
    width: 73px;
}
#footer ul #facebook a {
    background-position: 0 0;
}
#footer ul #facebook a:hover {
    background-position: -78px 0;
}
#footer ul #twitter a {
    background-position: 0 -78px;
}
#footer ul #twitter a:hover {
    background-position: -78px -78px;
}
#footer ul #googleplus a {
    background-position: 0 -156px;
}
#footer ul #googleplus a:hover {
    background-position: -78px -156px;
}
#footer p {
    color: #4e5151;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: capitalize;
}

 

Hi Terranova,

I'm sorry to say that you have no other choice but to be good with CSS if you are looking to develop websites on your own. Can't run away from that.

Having said that, I'll given you a head start w.r.t. adding a sidebar to the template. I'll be attaching an augmented index.html as well as css/style.css files with this post. Replace the original files with these and you'll see a sidebar to the right when viewing the page. You'll still need to perform some fine-tuning work after that. I'll leave that to you.

Basically, what was modified in the 2 files are:

index.html:

1. In line 37: added id="content" to the <DIV> tag in order to uniquely identify this tag from style.css
2. Appended
   
   Code:

   <div id="sidebar">
   Your Sidebar here!
   Note that with ....
   </div>

css/style.css: Appended the following styles to shorten the width of the content block and also specifying the width of the sidebar block

Code:

#content {
    display: inline-block;
    width: 700px;
    overflow-x: scroll;  /* remove this line after you've modify content left of the sidebar to fit to 700px (original was 960px) */
}

#sidebar {
    display: inlne-block;
    width: 260px;
    float: right;
}

Regards,

Yen

 

Shouldn't the copyright at the bottom page be a Copyright symbol of &copy; instead of a @? Because on the template its an @ and i just thought it might have been a mistake maybe........ and sorry if i am wrong.

 

Hi Skyler,

You are right. It should be &copy;
Thank you for pointing that out.

Regards,

Yen

 

Hi @mundana, I read both of your posts. I think both threads/links posted have provided details of how to make certain changes/edits to the templates—technically speaking, these are tutorials?

If you are referring to step-by-step guides, we're getting there.

 

Hi, I used this template as a little personal site for games I play.
I know I didn't do much to it but I had a great time editing this template and would like to thank you guys.

Spoiler: Template Preview

Site is hosted on Google Drive | Link: F2P Games @ JoelsGaming

 

Hi and welcome to FWT, Joel!

Glad to hear you found this template useful it's really nice of you to share your site link! Do stick around and join in some of the conversations on our forum – we'll be more than happy to help you if you have any questions or suggestions for us. We're all friendly folks here

 

Thanks this template really helped me .. I did change a few things on it though. I love the fact that you have a photoshop file and everything layed out to help. Awseome job.

 

Welcome to FWT, @IvyKitten! Good to hear our templates could be of use to you Would you want to share your website link so we can see what you've done with it?

 

I'm still in the middle of building mine you can see it here and post suggestions in BLAH BLAH section.

Thank you guys for an awesome Template.

 

Hello,

you did a really good job with this template, thanks for that!
But could anyone change the menu-picture for me? I want all the categories in red, so it fits to my page.

Greez, Topschi

 

@ishkey Yes, thank you very much, Sir!

 

Hey @Topschi can you please post the link to our website when done so that we can check it out..

 

Also is possible to get a new file with more social icons in it?
Pinterest
Linkdin

 

Hey @bdgold I think you me 'Your' Website, don't you?

Made some little changes to the CSS and in the General code.. Like changed the Footer a bit and some positioning / hiding unneccessary stuff.

=> http://dirtpark.1x.de

Check it out.

Greez, Topschi

 

@bdgold Something like this?