Group's posts with tag: transparency
 Thanks to Bindra for working with me and what code I was already using, to make my entire calendar transparent. Because the calendar is more difficult to work with than other components on your page, we wanted (together) to supply this as a tutorial.
Click HERE and look at all FOUR views first so you can decide if this is the look you want. If it is not, you may adjust any of this css code to suit your site. The font and colors will be something you do want to change.
Because the Calendar is made up of SO many components, this is a lengthy code. But the code has been combined to make it as short as possible.
This code works for the WIDE-theme based themes. (Skyline, Black Lily etc) If you are using ANY other theme that is FIXED-width, then a short replacement code that should work will be at the bottom of this post. So don't miss that.//**CALENDAR**//
table.globalnav,
div.caldiv1 td:hover.calday,
.caldiv1 th, .calday, .cald,
.infobox, .infobox .boxbody,
.tablediv1 tr.bg2, .tablediv1 tr:hover.bg2,
.tablediv1 tr.bg4, .tablediv1 tr:hover.bg4,
.tablediv1, .tablediv1 th
{ background: none transparent; }
table.globalnav { border: #FFFFFF; width: 95%; }
.caldate { font-size: 13px; font-weight: bold; }
.cald, .calday { border:1px solid #FFFFFF; }
.cald {
float: right;
text-align: center;
padding: 0px 4px 0px 4px;
margin: -3px -3px 3px 3px;
width: 20px;
}
.calevent { margin: 0px 0px 8px 0px; }
.caldiv1 th, .tablediv1 th { color: #FFFFFF; }
.caldiv1 th {
font-size: 10px;
font-weight: bold;
text-align: center;
}
.caldiv1 th a, .caldiv1 th a:visited { color: transparent; }
FROM BINDRA:
This can be applied for all themes, except the width of "table.globalnav".
For wide-theme you can use above 95%. ( 99% or 100% (auto). )
But for fixed-width theme, you must use fixed value, like 760px, 740px, etc.
For example, I always use this code for fixed-width theme,
div.header, table.globalnav {
width: 760px;
background: none transparent;
border: none;
}
THIS WORKS GREAT FOR MY SKYLINE THEME.
THANKS TO BINDRA FOR ASSISTING WITH THIS TUTORIAL!!
|  | Opaque theme?
I do them like this Click Here
Its a cheat though I don't use any CSS code...just looks like I used code
Look at the images posted here (below) and how I have done them
This is the code for the theme I made with the images below, I made it very bright so its easier to tell what I've done
Works on IE7 and Firefox
Installation instructions...(if you actually want to use this VERY bright theme)
Click Customise site > click custom CSS > Copy existing code and save > Click customise site again > Choose Theme > Select Sandskrit theme > Click Customise site > click custom CSS > Replace CSS with theme code
/* Transparent Flowers- Theme Creation & Design By: Missy Angel */
/*File Date: Febuary 20, 2008*/
/*Based Sandskrit*/
/*layout by Missy A http://missthemed.multiply.com/ */
/*Graphics: By Missy A*/
#home_guestbook {
width: 375;
overflow-x: auto;
}
#home_guestbook .replybody img { display:width:360px; max-width:300px; width:auto;}
body {
background:#E3E4E8 ;
color: #E3E4E8;
background: url(http://tinyurl.com/23on6y);
background-repeat: repeat repeat;
background-attachment: fixed;
}
color: a, a:visited, a:link { color: #E8D8F0;
}
div#rail {
text-align: left;
width: 159px;
color: #FDFBFD;
}
.rail {
width: 159px;
}
.railstart {
width: 159px;
height: 0;
background-color: transparent;
background: none;
border: none;
margin-top: -20px;
color: #EEEC23;
}
.railbody {
width: 159px;
background-color: transparent;
background: none;
border: none;
z-index: 1000;
position: relative;
color: #EEEC23;
font-family: Trebuchet MS;
}
.railsep {
height: 1px;
margin: 12px 0 12px 0;
background: none;
background-color: transparent;
}
.railend {
width: 159px;
height: 150px;
background: none;
margin: 0 0 8px 0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border: none;
background-color: transparent;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border: none;
}
.rail .userlogo {
border: transparent;
background-color: transparent
}
.userlogo a, .userlogo a:visited
{
color: #fff;
font-family: Trebuchet MS;
}
td.rail {
background: url();
background-position: bottom center;
background-repeat: no-repeat;
}
div.owner_nav {
padding: -10;
background-color: transparent;
border: none;
margin: 0;
/* -moz-border-radius: 10px; */
background: none;
width: 780px;
height: 200px;
background: url();
margin: 0 auto;
background-repeat: no-repeat;
}
div#subnavc {
width: auto;
margin: 0 auto;
text-align: bottom;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-weight: bold;
}
div#subnav {
padding: 1px;
padding-left: 20px;
background-color: #fff;
background: none;
height: auto;
margin: -10 ;
text-align: bottom;
border: none;
background: none;
font-size: 14px;
font-weight: bold;
}
h1#page_owner_title {
width: 655px;
margin: 0 auto;
padding: 90px 0 0 0;
background-color: none;
background: none;
color: yellow;
border: none;
font-size: 30px;
text-align: left;
}
div#page_start {
width: 695px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
background: url(http://tinyurl.com/yunuzl);
background-attachment: fixed;
background-repeat: repeat repeat;
}
td#maincontent { padding: 0 40px 0 10px;
}
a.gnoptsel, a:visited.gnoptsel {
margin: -2px 0 0 0;
width: 84px;
height: 31px;
background: url();
}
div#ownedfooterc {
width: 784px;
margin: 0 auto;
padding: 0;
}
div#ownedfooter {
margin: 0;
height: 100px;
padding: 55px 0 0 0;
line-height: 10px;
border: none;
color: #000;
text-align: center;
font-size: 10px;
background: url(http://tinyurl.com/ys9mla)
no-repeat bottom left;
}
div.stats {
border-bottom: none;
}
.itemboxsub {
color: yellow;
font-weight: bold;
font-size: 24px;
border: none;
padding: 0;
margin: 0;
background: none;
background: url() no-repeat top center;
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center;
/* display: none; */
max-width: 520px;
}
.rolloverfordnd {
color: #000;
font-weight: bold;
font-size: 24px;
border: none;
padding: 0;
margin: 0;
background: none;
max-width: 520px;
background: url(http://tinyurl.com/yrtv5u) repeat-x bottom left;
/* display: none; */
}
.itemsubsub {
font-size: 12px;
font-weight: normal;
line-height: 12px;
text-align: right;
color: #fff;
}
.itemstamp {
float: right;
font-size: 12px;
font-weight: normal;
margin: 0;
color: #000;
}
.itembox {
border: 1px solid #000;
border-top: none;
background-color: #eee;
background-color: #fff;
padding: 5px 0 0 0;
margin: 0px;
overflow: visible;
background: none;
border: 1px solid #D5D7E1;
color: #FFDD2B;
font-size:14px;
}
.itemactionspacer {
height: 30px;
}
.itemboxalbum {
border: 1px solid #ccc;
background-color: #eee;
padding: 5px 0 10px 0;
text-align: center;
}
.tablediv1 {
color: #000;
}
.caldiv1 { background-color: #2E4585; }
.caldiv1 td { font-size: 10px; }
.caldate { font-size: 13px; font-weight: bold;}
.cald { float:right; text-align: center; background-color: #666; padding: 0px 4px 0px 4px;
margin: -3px -3px 3px 3px; border: 1px solid #ABB8DB; width: 20px}
.calevent { margin: 0px 0px 8px 0px; }
.caldiv1 td:hover { background-color: #2E4585; }
.caldiv1 th {
background-color: #666;
color: #fff;
font-size: 10px;
font-weight: normal;
text-align: center;
}
.caldiv1 th a, .caldiv1 th a:visited { color: #fff; }
.compose img {display: none}
.icon { visibility: hidden; display: none;
}
a.topt, a:visited.topt {
line-height: 1.0em;
display: block;
float: left;
height: 30px;
text-align: bottom;
background: #EEEC23;
font-size: 14px;
color: #E8D8F0;
width: 70px;
padding: 2px;
margin-left: 5px;
margin-right: 5px;
background: url();
background-repeat:no-repeat;
}
a.toptsel, a:visited.toptsel {
line-height: 1.0em;
display: block;
float: left;
height: 30px;
text-align: bottom;
background: #E5D2F0;
font-size: 14px;
font-weight: bold;
color: #E8D8F0;
width: 70px;
padding: 2px;
margin-left: 5px;
margin-right: 5px;
background: url();
background-repeat:no-repeat;
}
a, a:link, a:visited
{
color: #E8D8F0;
text-decoration: none;
}
a, a:link, a:visited
{
color: #E8D8F0;
text-decoration: none;
}
a:active, a:focus
{
outline-color: invert;
outline-style: none;
outline-width: 0pt;
}
a:hover
{
color: #F4F3B5;
text-decoration: underline;
}
div.header {
width: 760px;
margin: 0 auto;
background: none;
}
table.globalnav {
width: 760px;
border: none;
background: none;
}
.album {
margin: 0 10px 10px 0;
}
.album img {
border: 1px solid #384977;
}
table.indextitle {display: none}
.header .globalnav ul.gnopt a, .header .globalnav a.select { color: #EEEC23; }
.litemactions a, .litemactions a:visited, .litemactions a:link { border: none;
background-color:
transparent; margin-top: 1px; color: #555; }
div.viewmore {
text-align: left;
margin-bottom: 20px;
}
div.itemshadow { margin-bottom: 5px; max-width: 520px;}
div.itemboxalbum { margin-bottom: 0}
.navinput {
-moz-border-radius: 4px;
border: 1px solid #384977;
background-color: #ccc;
color: #000;
}
div.infobox .boxbody {
border: 1px solid #000;
}
div.infobox .boxbody {
color: #000;
background-color: #8600D0;
}
a.voptsel, a:link.voptsel, a:visited.voptsel {
background-color: transparent;
border: 1px solid transparent;
color: #FDFA06;
}
a.vopt, a:link.vopt, a:visited.vopt {
color: #fff;
}
div.vopt {
color: #E8D8F0;
}
.voptlabel {
color: #000;
font-weight: bold;
margin-right: 10px;
}
div.gndd {
background-color: #dca;
border: 1px solid #eeeeee;
}
div.ddsep { background-color: #384977; }
div.gndd a {
border: 1px solid #eeeeee;
}
a.mine, a:link.mine, a:visited.mine {
font-size: 11px;
padding: 0 2px 0 2px;
color: #F0E183;
}
div.ritemactions a, div.ritemactions a:link, div.ritemactions a:visited {
font-size: 11px;
padding: 0 2px 0 2px;
color: #E8D8F0;
}
.replybox {
border: 1px solid #f4f6f8;
background: none;
background-color: transparent;
color: #E3C6F1;
font-size:14px;
font-family: Trebuchet MS;
}
.replybox textarea
{
background-color: transparent;
font-size:14px;
font-family: Trebuchet MS;
color: #E3C6F1;
border: 1px solid #eeeeee;
}
.quotet {
background: #452854;
color: #f4f6f8;
}
.replyboxstamp{
color: #E3E4E8;
}
.replyboxread
{
background-color: #452854;
color: #f4f6f8;
font-size: 12px;
}
.contactbox
{
float: left;
background: transparent;
font-size: 11px;
text-align: center;
background-color: transparent;
color: #FFE32D;
border: none;
font-family: Trebuchet MS;
}
div.openbox {
margin: 0 0 5px 0;
}
div.guidebox {
color: #FFE32D;
background: none;
background-color: #dca;
border: 1px solid transparent;
}
div.add_sublabel {
color: #FFE32D;
}
div.add_sublabel a, div.add_sublabel a:link, div.add_sublabel a:visited {
color: #E8D8F0;
}
div.add_sublabel a:hover {
color: #F2D4F2;
}
div.header table.globalnav h3 { color: #F2D4F2;
}
/*Album links*/
div.prevnextphoto {
-moz-border-radius: 5px;
background-color: transparent;
border: 1px solid #660099;
padding: 5px;
margin: 0 auto;
margin-bottom: 10px;
color: #FFE32D ;
}
div.prevnextphoto a, div.prevnextphoto a:link, div.prevnextphoto a:visited {
color: #f4f6f8;
}
div.prevnextphoto table td {
font-size: 16px;
color: #FFE32D ;
}
.litemactions a, .litemactions a:visited, .litemactions a:link { border: none;
background-color:
transparent; margin-top: 1px;
font-size: 12px;
color: #000;
}
div.ritemactions a, div.ritemactions a:visited, div.ritemactions a:link { border: none;
background-color:
transparent; margin-top: 1px;
font-size: 12px;
color: #000;}
.ritemactions
{
text-align: right;
font-size: 14px;
color: #000;
}
div#maincontentdiv, div#maincontentdiv table tbody tr td, div#maincontentdiv table tbody tr td
div {
display: inline-block;
}
body {
cursor: url(),default;
}
.header .globalnav ul.gnopt a {color: #000; font-size: 12pt;}
.header .globalnav ul.gnopt a:hover {color: #F0E183; font-size: 12pt;}
span.signoutid a, span.signoutid a:visited, span.signoutid a:link, a.signoutid, a.signout,
a.signout:visited, a.signout:link {
color: #fff;
font-size: 10pt;
}
span.signoutid a:hover, a.signout:hover {
color: #E8D8F0;
font-size: 10pt;
}
/* Header */
.header .globalnav ul.gnopt img {
display: none;
background: url() no-repeat top left;
}
Please note: theme code is only included so you can see what it looks like on your page
Any questions ask ----> Here |
| |
