General / Off-Topic Planet Coaster Forums improved design!

HapLifeMan

H
Hi everybody!

When I came here for the first time I was lost and I knew why instantly.
The design of the forum is ugly, radius corner everywhere, large border box in orange and font color white on black...
So I decided to transform the forum with a browser extension called Stylish.

The template is the same, I modified some CSS to beautify this forum because I will spend a lot of time here [yesnod]
And because I want to share my work: how to use my modified CSS version of the forum?

1. Download the extension Stylish from your favorite browser
2. Create a new CSS style
3. Click "Add to the domain" the fille the field with "forums.planetcoaster.com"
4. Add the code (below) to the textarea

Code: 
@import url(https://fonts.googleapis.com/css?family=Kanit:100,200,300);

* {
    border-radius: 0px !important;
    font-weight: 200 !important;
}

html {
    background-attachment: fixed;
}

body {
	font-family: 'Kanit';
}

.breadcrumb, .forumhead {
    border: none;
    padding: 5px 0px 3px 0px;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: none;
}

#toplinks {
    padding: 3px 10px;
    background: rgba(0 ,0, 0, 0.7) none;
}

.notices li {
    background: rgba(255, 255, 255, 0.7);
    padding: 15px;
    color: #333;
}

.navtabs {
    padding: 0;
}

.navbar_search {
    position: absolute;
}

.globalsearch > div {
    margin-top: -32px;
    margin-right: -20px;
}

.navbar_search input {
    margin-top: 8px;
    width: 170px !important;
    border: 1px solid #fff;
    border-radius: 4px !important;
    padding: 5px 10px;
    font-family: 'Kanit';
}

.globalsearch .searchbutton {
    position: absolute;
    z-index: 200;
    width: 25px !important;
    margin-left: -10px;
    margin-top: 10px;
}

.bbcode_container {
    margin-top: 20px;
}

.bbcode_container div.bbcode_quote {
    border: 1px solid #333;
    font-family: 'Kanit';
    color: #fff;
}

.bbcode_container .bbcode_quote_container {
    background: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #333 transparent transparent;
}

#pagetitle h1 {
    margin-bottom: 10px;
}

.newcontent_textcontrol {
    border: 1px solid #fff;
    background: rgba(0, 0, 0, 0.8);
}

.pagination span a {
    border: 1px solid #fff;
    font-family: 'Kanit';
    line-height: 15px;
    margin: 0px 3px;
}

.pagination span.prev_next a, .pagination span.first_last a {
    top: -3px;
    margin: 0px 3px;
}

.threadlisthead {
    font-family: 'Kanit';
    background: rgba(0, 0, 0, 0.8);
}

.toolsmenu {
    background: rgba(0, 0, 0, 0.8);
}

.threadbit * {
    background: #fff;
    box-sizing: border-box;
    color: #333;
}

.threadbit *:hover {
    color: #f27559;
}

.threadstatus {
    vertical-align: bottom;
}

.threadbit .threadtitle {
    width: 500px;
    height: 20px;
    overflow: hidden;
    margin-top: 7px;
}

.threadtitle a.title {
    vertical-align: top;
    font-size: 15px;
}

.threadmeta .author span {
    color: #ccc;
}

.threadbit .pagination {
    position: absolute;
    margin-top: 20px;
}

.threadbit .pagination a {
    padding: 2px 0px 0px 1px;
    border-radius: 50% !important;
    width: 20px;
    height: 20px;
    text-align: center;
    display: block;
}

.threadbit .sticky {
    border: none;
    border-left: 5px solid #FFDF00;
    background: #fff;
}
.threadbit .nonsticky, .threadbit .discussionrow {
    border: none;
    border-left: 5px solid #A6573A;
    background: #fff;
}

.threadbit .sticky:hover {
    box-sizing: border-box;
    border: none;
    border-left: 5px solid #FFDF00;
    background: #fff;
}

.threadbit .nonsticky:hover, .threadbit .discussionrow:hover {
    border: none;
    border-left: 5px solid #A6573A;
    box-sizing: border-box;
    background: #fff;
}

.threaddetailicons a img {
    position: absolute;
    top: 13px;
    right: 8px;
}

.forum_info .blockhead, .forum_info .blockbody {
    border: none;
    background: rgba(0, 0, 0, 0.7);
}

.button {
	border: 1px solid #fff;
    border-radius: 4px !important;
    padding: 3px 7px;
}

.button:hover {
	cursor: pointer !important;
}

.forum_info .options_block, .thread_info .options_block, .forum_info .options_block2, .thread_info .options_block2 {
    width: 50%;
    box-sizing: border-box;
    margin: 0;
}

.forum_info .blockhead {
    font-size: 16px;
    font-weight: 200;
    padding: 10px 15px;
}

#footer {
    font-family: 'Kanit';
    background: rgba(0, 0, 0, 0.7);
    padding: 9px 5px 10px 5px;
    border: none;
}

#footer img {
    margin-top: 3px;
}

textarea, select, input {
    border: 1px solid #fff;
    border-radius: 3px;
    font-family: 'Kanit';
}

body::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}
 
body::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.7);
    border: none;
}

5. Save and that's done!


Please tell me if you used, are using or will use this trick!
I'll sometimes post updates!

Thanks for your feedback :)



Screenshots:

Header: http://puu.sh/nSebt/bc336eda74.png
Forums and footer: http://puu.sh/nSegc/31e6fd826e.png
Categories: http://puu.sh/nSedT/85cce42b41.png
 
Last edited:

Brett C

Frontier
Oddly enough I've been working on a theme without the radiuses and borders. I hope to have it ready later this spring (as time allows). It'll go live when the blue theme / night theme goes live.
 
You must log in or register to reply here.
Back
Top Bottom