I've been trying to style Joomlaboard in CSS, to make it look like a professional forum. I like Joomlaboard, it's fast, and it's not larded with features that slow down other forums, and it's integrated with Joomla and CB and various messaging components, and doesn't require a bridge. Nice stuff.
But it's ugly.
So here's some CSS that makes it look a lot better...at least in IE and Firefox on my machine.
Need feedback on this before releasing it. To install, just go to your admin backend, then components, then Joomlaboard, then click the Edit CSS File Button. Replace the CSS there with the CSS below. Make sure you backup your old CSS.
Here's a some tips:
1) Let Joomlaboard have the full width of your template. That is, don't publish modules on either side of Joomlaboard. Looks much more professinal this way.
2) When entering the description of a forum, enter a space and then the HTML symbol code for a bullet and then a space. The HTML symbol code for bullet is & b u l l ; <-take out spaces, otherwise Joomlaboard displays this as a bullet.
Let me know.
/******************************************************/
/* Simpleboard CSS File */
/* These days, Simpleboard uses the Template CSS file */
/* It's adviced that you do not change this CSS file */
/* Unless you know what you are doing... If you need */
/* to change tableheader colours, or anything, look */
/* in the template CSS file first... here there are */
/* only definitions that are necessary but don't fit */
/* the template CSS'es.. */
/******************************************************/
#joomlaboard {
font-family: Arial, Verdana, sans-serif;
font-weight:normal;
color:#3572ab;
}
#joomlaboard ul{
font-family: Arial, Verdana, sans-serif;
margin-left:30px;
}
#joomlaboard a {
font-family: Arial, Verdana, sans-serif;
font-weight:normal;
text-align:center;
padding:2px;
padding-left:10px;
padding-right:10px;
border-left:1px dotted #9ba5c7;
border-top:1px dotted #9ba5c7;
border-bottom:1px dotted #9ba5c7;
border-right:1px dotted #9ba5c7;
background:#dce6f4;
color:#3572ab;
text-decoration:none;
text-transform:uppercase;
}
#joomlaboard div.sb_footer {
font-family: Arial, Verdana, sans-serif;
font-size: 9pt;
text-align: center;
margin-top:20px;
background:#dce6f4;
border-top:1px dotted #0053a2;
height:60px;
line-height:25px;
}
#joomlaboard table div.sb_footer a {
background:#dce6f4;
margin-top:20px;
}
#joomlaboard table td {
padding:3px;
}
/* Post History */
.sb_review_table {
font-family: Arial, Verdana, sans-serif;
background-color:#F3F3F3;
text-align: left;
}
.sb_review_header {
font-family: Arial, Verdana, sans-serif;
background-color:#7188b7;
color:#ffffff;
}
.sb_review_body0 {
font-family: Arial, Verdana, sans-serif;
color:#404040;
background-color:#eaecf0;
}
.sb_review_body1 {
font-family: Arial, Verdana, sans-serif;
color:#404040;
background-color:#e9ecf1;
}
.sb_review_quote {
padding:5px;
border: 1px solid #000000;
background-color:#cbd2df;
color:#ffffff;
font-size: 9px;
display: block;
}
/*** header related ***/
#sb_header {
width:100%;
line-height:140%;
}
#sb_header h1 {
margin: 0px;
font-size:12px;
font-weight:bold;
text-align:center;
padding:10px;
color:#3572ab;
background:#dce6f4;
border-bottom:1px dotted #0053a2;
}
#sb_header .sb_menu {
text-align:center;
margin:0;
}
#sb_header .sb_menu a {
font-family: Arial, Verdana, sans-serif;
font-weight:normal;
text-align:center;
margin:3px;
padding:4px;
padding-left:10px;
padding-right:10px;
border-left:1px dotted #9ba5c7;
border-top:1px dotted #9ba5c7;
border-bottom:1px dotted #9ba5c7;
border-right:1px dotted #9ba5c7;
background:#dce6f4;
color:#3572ab;
text-decoration:none;
text-transform:uppercase;
}
#sb_header .sb_menu a:hover {
color:#FFF;
background:#3572ab;
border:1px solid #000;
}
#sb_header .sb_search {
margin:10px;
width:28%;
}
div.spacer {
clear:both;
}
/* Quote & Code blocks */
td pre {
background-color: #e6e6e6;
border: 1px solid #000000;
overflow: scroll;
width: 350px;
}
.sb_quote {
padding:5px;
border: 1px solid #000000;
background-color:#e6e6e6;
color:#000000;
font-family: Arial, Verdana, sans-serif;
font-size: 9px;
display: block;
}
/*new and not_new notifications */
.sb_new {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF0000;
}
.sb_notnew {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #C0C0C0;
}
/*file attachments */
.sb_file_attachment {
BACKGROUND: url(emoticons/file.png) no-repeat;
padding-top: 2px;
padding-left: 35px;
border: 1px solid #000000;
background-color:#ededed;
color:#000000;
font-family: Arial, Verdana, sans-serif;
font-size: 9px;
}
/* write.html.php */
.image_hide {
position: relative;
visibility: visible;
font-size: 9px;
font-family: Arial, Sans Serif;
}
.file_hide {
position: relative;
visibility: visible;
font-size: 9px;
font-family: Arial, Sans Serif;
}
.general {
position: relative;
visibility: visible;
font-size: 9px;
font-family: Arial, Sans Serif
}
/* post message layout */
.sb_leftcolumn {
width: 200px;
text-align: right;
}
/*avatar picture */
.sb_avatar {
text-align: center;
margin-top: 3px;
margin-bottom: 3px;
display: block;
}
/* message body */
.sb_messagebody {
background:#dce6f4;
border:1px dotted #0053a2;
display: block;
padding: 10px;
margin: 4px;
margin: 4px;
}
/* signature */
.sb_signature {
border-top: thin dashed silver;
margin-bottom: 4px;
padding-top: 4px;
margin-top: 4px;
display: block;
}
#searchbox {
text-align: right;
padding-top: 10px;
}
/* category names */
#joomlaboard TH.sb_catname, #joomlaboard h3.contentheading {
padding: 5px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:white;
border-style:none;
background:#7ea2c0;;
text-align: center;
text-transform:uppercase;
}
span.contentheading {
padding: 10px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:white;
border-style:none;
background:#7ea2c0;;
text-align: center;
text-transform:uppercase;
line-height:300%
}
#joomlaboard table TH.sb_catname a {
border-style:none;
background:none;
color:white;
}
#joomlaboard {
border:1px solid #0053a2;
background:#eff2f9;
}
#joomlaboard .createdate {
font-family: Arial, "Lucida Grande", Tahoma, Helvetica, sans-serif;
font-size: 10px;
color:#3572ab;
font-weight:bold;
padding-left:3px;
padding-right:3px;
padding-top:1px;
padding-bottom:2px;
line-height:120%;
}
#joomlaboard .inputbox, #joomlaboard select.button, #joomlaboard input.button {
font-family: Arial, "Lucida Grande", Tahoma, Helvetica, sans-serif;
font-size: 14px;
color:#3572ab;
font-weight:normal;
padding:3px;
background:#dce6f4;
border:1px dotted #0053a2;
}
#joomlaboard input.button {
border:1px solid #b6c2da;
}
#joomlaboard .inputbox {
width:225px;
}
.sectiontableheader {
font-family: Arial, Verdana, sans-serif;
height:12px;
padding:2px;
color:#3572ab;
background:#e4eaf6;
}
.sectiontableentry1 td {
font-family: Arial, Verdana, sans-serif;
background:#e7ecf7;
padding:5px;
margin-top:5px;
}
.sectiontableentry2 td {
font-family: Arial, Verdana, sans-serif;
background:#eff2f9;
padding:5px;
margin-top:5px;
}
.sectiontableentry1 a, .sectiontableentry2 a {
font-family: Arial, Verdana, sans-serif;
font-weight:normal;
font-size:120%;
text-align:center;
margin:3px;
padding:2px;
padding-left:10px;
padding-right:10px;
border-left:1px dotted #9ba5c7;
border-top:1px dotted #9ba5c7;
border-bottom:1px dotted #9ba5c7;
border-right:1px dotted #9ba5c7;
background:#dce6f4;
color:#3572ab;
text-transform: uppercase;
text-decoration:none;
line-height:160%;
}
.sectiontableentry1 a:hover, .sectiontableentry2 a:hover {
color:#FFF;
background:#3572ab;
}
#joomlaboard table.contentpane{
border-collapse: collapse;
width:100%;
}
#joomlaboard table.contentpane a{
font-family: Arial, Verdana, sans-serif;
font-weight:normal;
font-size:120%;
text-align:center;
margin:3px;
padding:2px;
padding-left:5px;
color:#3572ab;
text-transform: uppercase;
text-decoration:none;
border-style:none;
background:none;
}
#joomlaboard table.contentpane a:hover {
}
th.jbheader { font-size:16px; padding:8px 0 8px 0;}
td.jbheader { font-size:16px; padding:8px 0 8px 0; font-weight:bold;}
#joomlaboard div.jb_pathway {
padding:8px 5px 0px 7px;
font-size:11px;
margin-bottom:0px;
font-weight:normal;
color:#3572ab;
}
#joomlaboard div.jb_pathway a.jb_pathway {
font-family: Arial, Verdana, sans-serif;
font-size:11px;
font-weight:normal;
color:#3572ab;
border-style:none;
background:none;
text-transform:none;
}
Post edited by: Raj, at: 2007/04/15 21:22
Post edited by: Raj, at: 2007/04/15 21:24
