TRANSPARENT BASECAMP THEME
CSS CODE TO MAKE ALL BACKGROUNDS & BORDERS TRANSPARENT
ALL REFERENCES FOR TEXT & LINKS
Pratically loading the Basecamp theme in the site and pasting the code below in your blank custom CSS box, all the site will come transparent; you have to add a background image in the body {} block; all the text & links colors will be shown as black; look at the original code reported above to make other changes.
/*-------------BASECAMP THEME---------------*/
/*MAIN*/
body {
background:#ffffff none;
color:#000000;
font-family:Arial,sans-serif;
font-size:13px;
} /* HEADER */
table.globalnav {
background:transparent none;
border:none;
}
.header {
border:none;
background:transparent none;
}
/* title and nav bar */
body h1#page_owner_title {
background:transparent none repeat scroll 0%;
color:#000000;
font-size:20px;
font-weight:bold;
}
/* NAVIGATION BAR */
div#subnavc {
background:transparent none;
}
div#subnav {
}
/*Active Link in navigation bar*/
a.toptsel, a.toptsel:link, a.toptsel:visited {
background:transparent none;
color:#000000;
font-size:11px;
font-weight:bold;
text-align:left;
}
/*Links in navigation bar*/
a.topt, a.topt:link, a.topt:visited {
background:transparent none;
color:#000000;
font-size:11px;
font-weight:bold;
}
/*link when mouse over*/
a.topt:hover {
background:transparent none;
color:#000000;
font-size:11px;
font-weight:bold;
}
/* content - ITEM BOXES */
div.itembox {
border-style:none;
color:#000000;
font-size:12px;
}
/*box for every thumb in photo box*/
div.album {
background:transparent none;
border:1px none #EDECEC;
text-align:left;
}
/*title in photo box*/
div.album span.albumtitle {
color:#000000;
}
/*text size inside title boxes*/
.itemboxsub .cattitle {
font-size:18px;
}
/*text inside the title*/
td.cattitle {
color:#000000;
font-weight:bold;
text-align:left;
}
/* date of the post inside the title box*/
td.itemsubsub {
background:transparent none;
color:#000000;
font-size:10px;
font-weight:normal;
text-align:right;
}
/*text size in boxes body and post date*/
.album {
font-size:10px;
}
/*Post Date (inside title boxez)*/
span.update {
background:transparent none;
color:#000000;
font-size:10px;
font-weight:normal;
text-align:center;
}
div.viewmore a.add, div.viewmorealbum a.add {
}
div.viewmore a, div.viewmorealbum a, div.viewmore a.select, div.viewmorealbum a.select, div.viewmore a.add, div.viewmorealbum a.add {
background:transparent none;
color:#000000;
text-align:center;
}
a.add, a.add:link, a.add:visited {
font-size:13px;
font-weight:bold;
}
/*link to the post*/
div.itembox h4 a {
color:#000000;
font-size:17px;
font-weight:bold;
}
/* RIGHT RAIL */
div#rail {
background:transparent none;
}
.railstart {
}
div.railbody {
background:transparent none;
font-size:12px;
}
.railend {
}
/*bullets*/
ul.sidelist li {
background:transparent none;
color:#000000;
font-size:12px;
}
/*bullets in user id*/
.railbody .userlogo a, .railbody .userlogo a:link, .railbody .userlogo a:visited {
background:transparent none;
color:#000000;
font-size:10px;
font-weight:bold;
}
/ *FOOTER */
div#ownedfooterc {
}
div#ownedfooter {
background:transparent none repeat scroll 0%;
border-color:#EDECEC;
border-style:none;
border-width:1px 0pt 0pt;
bottom:0pt;
color:#000000;
font-size:10px;
text-align:center;
}
/* General LINKS */
a:link, a:visited {
color:#000000;
font-weight:normal;
}
/* Photo ALBUM */
div.album {
background:transparent none repeat scroll 0%;
border:1px none #EDECEC;
}
.album {
font-size:10px;
}
div#page_start_wrapper {
color:#000000;
}
/* Video ALBUM */
.videothumb {
font-size:10px;
text-align:center;
}
div#page_start_wrapper {
color:#000000;
}
/*OTHER LINKS & TEXT*/
/*Left Item Action - other pages - links for owner post administration*/
a.mine, a.mine:link, a.mine:visited {
background:transparent none repeat scroll 0%;
color:#000000;
font-size:13px;
}
.litemactions {
text-align:left;
}
/*Right Item Action - other pages - links for visitor post functions*/
div.ritemactions a, div.ritemactions a:link, div.ritemactions a:visited {
background:transparent none repeat scroll 0%;
color:#000000;
float:right;
font-size:13px;
}
/* [Tag:] */
div.relatedlinks {
font-size:12px;
}
/*some box in main page*/
table.m td {
background:transparent none;
border:1px none #EDECEC;
color:#000000;
font-size:12px;
font-weight:bold;
} /* PROFILE PAGE */
/* text */
.pad6r {
color:#000000;
}
/* text size for many other parts of the site */
table {
font-size:12px;
}
/* text label */
.label {
font-weight:bold;
}
/* text legend */
legend {
color:#000000;
font-weight:bold;
}
The code for the transparent theme will remove the Basecamp layout from your main page;
after you have made this customization look those other posts to completing the customization
Note:
The best way for to make a customization from a choosen customized theme is:
realize the site totally transparent, simply by using the code above in this table;
subsequently you can put new colors and borders in any box of the layout to make some change different by the transparencies
you can to change
in the background-color properties: transparent with a valid color code, such as #010101
in the background-image properties: none with url(Here_the_URL), where Here_the_URL is a valid URL
in the border-style properties: none with solid
in the assignement border:1px none #010101; change none with solid
in the assignement background:transparent none ; change none with a valid color such as #123456 and transparent with url(Here_the_Url)
about the text color properties (color: #123456)
I reported all the lines where to change the text color; all text and links colors are changed to #FFFFFF (white);
About the other Text Properties, such as font-family, font-size and so on, try to change those by adding the properties in the same block where is the color property for the section u are interested to change.
Remember to use the MAIN Section to insert the bg image, the text color and all the general set for the pages
