I am trying to write a stylesheet and have been hitting a few problems.
I really don't like the way the page doesn't scale with the window. I like to tile my desktop but this means I get half a page on the screen and a horizontal scroll bar. It must really suck for people who web browse on their phones. The forum is mainly text so scaling shouldn't be an issue. I tried to correct it but it got messy fast! I'm up to my elbows in divs. Is there an advantage to using divs over a table?
Wishlist:
* Remove page width restriction and make pages scale.
* Make thread subject/author divs clickable. (From looking at the code I think you are planning this anyway.)
* Give unique ID's to: forms, buttons.
* Use normal text inside buttons (prev., top, etc.) instead of anchors.
* Get rid of the '@' on 'last post'.
* Make the basic theme css shorter by grouping like elements, eg .messageItem, .threadItem.
I have just been trying to get to grips with the code, tidy things up and make a basic theme, hopefully it helps but I haven't gotten anything looking nice yet. There still seems to be a lot of stuff in the common.css that should really be part of the custom theme file, and vice versa, I have moved some of it.
Here are my edited .css files:
common.css
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial;
font-size: 0.9em;
background-color: #000;
}
.bold {
font-weight: bold;
}
h3 {
margin: 10px 0 10px 0;
color: #5c87c8;
}
p {
margin: 10px 0 10px 0;
}
ul {
margin: 0 0 0 20px;
}
ol {
margin: 0 0 0 20px;
}
input {
padding: 2px;
}
#wrapper {
width: 100%;
}
.xsmall{
font-size:8px;
}
.small {
font-size:11px;
}
.large {
font-size:18;
}
.xlarge {
font-size: 26px;
}
.CodeSnippet {
border: 1px solid #000;
background: white;
line-height: 24px;
padding: 4px;
}
.spoiler {
position: relative;
display: inline-block;
}
.spoilerOverlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url('images/spoilerBg.jpg') repeat white;
z-index: 100;
display: block;
}
.spoiler:hover {
color: #000;
background: none;
}
.popupMessageHolder {
width: 40%;
position: fixed;
top: 40%;
left: 30%;
margin: 0 auto;
z-index: 1000;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 5px #111;
}
.popupMessageHolder h2 {
text-align: center;
font-weight: normal;
}
#containerHeader {
height: 200px;
background: #191e32;
}
#containerMain {
margin-top: -20px;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 1024px;
min-height: 600px;
background: #fff;
}
#personalMessageHolder {
margin: 0 10px 0 10px;
overflow: hidden;
background: white;
}
.messageHeader>.author {
float: left;
width: 180px;
padding: 0 7px 0 15px;
display: inline-block;
}
.messageHeader>.message {
float: left;
}
.signature {
margin: 0 0 0 0;
padding: 10px 0 0 0;
font-size: 12px;
color: #121289;
}
.previewHolder {
display: none;
}
.previewHolder img{
display: inline !important;
}
.messageItemInnerHolder {
'box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.messageItem>.author {
float: left;
width: 180px;
padding: 0px 0px 10px 0px;
margin: 0 10px 0 0;
overflow: hidden;
}
.messageItem>.author>.authorName {
padding: 10px 10px 0px 10px;
margin: 0 0 10px 0;
font-size: 1.1em;
}
.messageItem>.author>.authorName>.authorLink {
color: black;
text-decoration: none;
font-weight: bold;
}
.messageItem>.author>.authorDetails {
padding: 0 10px 0 10px;
font-size: 0.9em;
}
.messageItem>.author>#authPreview {
padding: 0 10px 0 10px;
font-size: 0.9em;
}
.messageItem>.message {
margin: 0 0 0 180px;
border-left: 1px solid #8d8d8d;
}
.messageItem>.message img {
max-width: 90%;
}
.unread {
'background: #D5E4F3;
background: #b2cbdb;
}
.messageItem>.message>div{
padding: 0 0 20px 10px;
}
.BoardQuote {
background: #fff;
padding: 8px;
margin: 10px 20px 10px 10px;
font-size: 11px;
line-height: 17px;
color: black;
}
#messageHolder .postMessage {
overflow: hidden;
font-size: 12px;
color: white;
padding: 0px 10px 5px 10px;
}
#messageHolder .postMessage a {
color: white;
}
.messageItem>.message>.messageDetails {
padding: 7px 10px 7px 10px;
color: #a4a4a4;
margin: 0 0 10px 0;
font-size: 0.8em;
}
.messageItem>.message>.messageBody {
min-height: 240px;
}
.messageContents {
min-height: 150px;
margin: 0 10px 0 0;
}
#messageHolder,
#threadsHolder {
margin: -6px 0 0 0;
overflow: hidden;
}
.messageHeader,
.threadsHeader {
height: 30px;
line-height: 30px;
font-weight: bold;
}
.messageItemHolder,
.threadItemHolder {
padding: 2px 2px 0 2px;
}
.threadItemInnerHolder {
overflow:hidden;
}
.messageItem,
.threadItem {
min-height: 35px;
font-weight: normal;
overflow: hidden;
margin: 0 0 2px 0;
}
.threadItem:hover {
}
.threadItem a {
color: #2e6fdb;
text-decoration: none;
}
.threadItem a:hover {
color: #191e32;
text-decoration: underline;
}
.threadsHeader>.subject {
float: left;
padding: 0 0 0 10px;
}
.threadsHeader>.lastPost, .threadItem>.lastPost,
.threadsHeader>.views, .threadItem>.views,
.threadsHeader>.author, .threadItem>.author,
.threadsHeader>.posts, .threadItem>.posts {
float: right;
text-align: center;
vertical-align: middle;
min-height: inherit;
max-width: 15%;
}
.threadsHeader>.lastPost, .threadItem>.lastPost,
.threadsHeader>.author, .threadItem>.author {
width: 150px;
}
.threadsHeader>.views, .threadItem>.views,
.threadsHeader>.posts, .threadItem>.posts {
width: 80px;
}
.threadItem>.subject {
float: left;
overflow: hidden;
width:45%;
min-height: 35px;
font-size: 12px;
font-weight: bold;
}
.threadItem>.subject>.icon {
width: 24px;
float: left;
padding: 4px 5px 0 5px;
}
.threadItem>.subject>.mod {
width: 16px;
float: left;
padding: 10px 0 0 5px;
}
.threadItem>.subject>.rest {
float: left;
padding: 10px 0 10px 5px;
overflow: hidden;
}
.threadItem>.lastPost {
font-size: 10px;
}
.threadItem>.author {
overflow: hidden;
line-height: 16px;
font-size: 12px;
font-weight: bold;
}
.postFormHolder {
overflow: hidden;
margin: 12px 0 0 0;
}
.postForm {
}
.postFormHeader {
text-align: center;
font-weight: bold;
padding: 5px 0 5px 0;
}
.postFormContent {
padding: 6px;
}
#msgBody {
float: left;
}
.Moderator {
margin: 10px 0 10px 0;
}
/* TGC WEBSITE STYLES */
.navbar {
position: absolute;
width: 100%;
z-index: 1000;
top: 20px;
height: 60px;
background: #242424 url('images/gradient-white-T-60x60x35.png') repeat-x;
border-top: 1px solid #9b9b9b;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .8);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .8);
}
.tagLine {
font-size: 24px;
color: white;
text-decoration: none;
float: left;
line-height: 60px;
margin: 0 0 0 20px;
text-shadow: 1px 1px 4px #000;
font-weight: normal;
}
.tagLine:hover {
color: white;
text-decoration: none;
}
.utility {
float: right;
}
a.utilityLink {
display: block;
color: #fff;
font-size: 80%;
font-weight: 600;
text-align: center;
float: left;
border-left: 1px dotted #333;
padding-left: 10px;
padding-right: 10px;
height: 60px;
max-width: 80px;
text-decoration: none;
}
a.utilityLink img {
display: block;
margin: 0 auto;
margin-top: 5px;
opacity: 0.5;
}
a.utilityLink:hover {
background: #181818 url('../img/gradient-white-T-60x60x20.png') repeat-x;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 3px #ffffff;
}
a.utilityLinkActive {
display: block;
color: #fff;
font-size: 80%;
font-weight: 600;
text-align: center;
float: left;
border-left: 1px dotted #333;
padding-left: 10px;
padding-right: 10px;
height: 60px;
text-decoration: none;
background: #333 url('../img/gradient-white-T-60x60x35.png') repeat-x;
}
a.utilityLinkActive img {
display: block;
margin-top: 5px;
opacity: 1;
}
a.utilityLink:hover img {
opacity: 1;
}
customstyle.css
body {
background: #191e32;
}
img {
border: 0;
}
a {
color: #5c87c8;
text-decoration: none;
}
a:hover {
color: #191e32;
text-decoration: underline;
}
.messageHeader,
.threadsHeader {
height: 30px;
background: #222;
line-height: 30px;
font-weight: bold;
color: white;
}
.messageItemHolder,
.threadItemHolder {
background: #211f20;
}
/* need separate class for old threads/posts */
.messageItem,
.threadItem {
background: #bababa;
color: #222;
}
.newPosts {
background: #f5f5f5;
}
.newPostsSticky {
background: #F5D8B7;
}
.buttonHolder {
background: #aaa;
border: 2px solid #222;
border-bottom: none;
border-radius: 8px 8px 0 0;
color: #222;
cursor: pointer;
float: left;
font-weight: bold;
font-size: 11px;
height: 25px;
line-height: 25px;
margin: 0 0 6px 0px;
padding: 0px 11px;
text-decoration: none;
text-transform: uppercase;
}
.buttonHolder:hover {
background: #fff;
text-decoration: none;
}
/* this is messy, need more ids */
div div:nth-child(1) .buttonHolder {float: right;}
.buttonLight {
height: 25px;
line-height: 25px;
padding: 0 10px 0 10px;
margin: 0 5px 0 5px;
background: #5c87c8;
float: left;
font-weight: bold;
border-radius: 3px;
text-transform: uppercase;
font-size: 11px;
color: white !important;
cursor: pointer;
}
.buttonLight:hover {
background: #8bacdf;
}
.buttonLight a {
color: white;
text-decoration: none;
font-weight: bold;
}
.buttonLight a:hover {
text-decoration: none;
font-weight: bold;
}
input.button {
background: #aaa;
border: 2px solid #222;
border-radius: 5px;
color: #222;
cursor: pointer;
font-family: inherit;
font-weight: bold;
font-size: 11px;
height: 25px;
line-height: 25px;
margin: 2px 0 0px 0px;
padding: 0px 4px;
text-decoration: none;
text-transform: uppercase;
}
input.button:hover {
background: #fff;
}
#containerMain {
background: #fff;
border: 1px solid #eee;
-webkit-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, .4);
/* min-width: 860px; WHY?*/
z-index: 0;
}
#containerHeader {
background: url('images/headerBg.png') repeat #191e32;
background-position: top center;
}
#bannerContainer {
position: absolute;
top: 0px;
height: 180px;
width: 100%;
z-index: 0;
}
.searchFormButton {
font-size: 18px;
text-align:right;
cursor: pointer;
}
.forumStats {
margin: 20px 0 0 0;
}
.forumStats ul {
margin: 0 0 0 20px;
}
.forumOnline {
margin: 20px 0 0 0;
}
#footerContainer {
margin: 40px 0 0 0;
overflow: hidden;
}
#footerContainer>.footerItem {
float:right;
margin: 0 15px 0 15px;
}
.forumGroup {
margin: 0 0 0px 0;
}
.forumGroup a {
color: #5c87c8;
text-decoration: none;
}
.forumGroup a:hover {
color: #191e32;
text-decoration: underline;
}
.forumGroup h3 {
font-weight: bold;
color: #5c87c8;
}
.groupHeader {
margin: 10px 0 0 0;
height: 30px;
background: #191e32;
line-height: 30px;
font-weight: bold;
border-radius: 5px 5px 0 0;
color: white;
}
.groupHeader>.board {
float: left;
padding: 0 10px 0 10px;
}
.groupHeader>.topics {
width: 60px;
float:right;
text-align: center;
}
.groupHeader>.posts {
width: 60px;
float:right;
text-align: center;
}
.groupHeader>.last {
width: 180px;
float:right;
text-align: center;
}
.groupListingHolder {
padding: 5px 10px 10px 10px;
background: #191e32;
border-radius: 0 0 5px 5px;
}
.groupListingInnerHolder {
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.boardItem {
height: 55px;
color: #000;
font-size: 14px;
overflow: hidden;
background: #dedede;
margin: 0 0 2px 0;
}
.boardItem:hover {
}
.boardItem a {
color: #5c87c8;
text-decoration: none;
}
.boardItem a:hover {
color: #191e32;
text-decoration: underline;
}
.boardItem>.board {
float: left;
padding: 3px 0 0 5px;
overflow: hidden;
line-height: 16px;
width: calc(100% - 340px);
}
.boardItem>.topics {
width: 60px;
float:right;
text-align: center;
line-height: 55px;
overflow: hidden;
}
.boardItem>.posts {
width: 60px;
float:right;
text-align: center;
overflow: hidden;
line-height: 55px;
}
.boardItem>.last {
width: 180px;
float:right;
overflow: hidden;
text-align: center;
padding: 5px 0 5px 0;
font-size: 11px;
}
.postFormHeader {
text-align: center;
background: #222;
color: #fff;
font-weight: bold;
padding: 5px 0 5px 0;
}
.postForm {
border: 2px solid #222;
background: #ccc;
}
#forumBase {
margin: 20px 0 0 0;
color: #000;
}
#forumBase h3 {
font-weight: bold;
color: #5c87c8;
}
Formerly OBese87.
