Over 16,525,598 people are on fubar.
What are you waiting for?
<font face="Segoe Script" size="6" color="#00ff00">PROTECTED IMAGES</font><p>
< span style="background-image: url("") "> < img scr="" width="" height="" border="0" alt="Protected Image."></p>
<br>
<p><font face="Times new roman" size="6" color="#FFA500" >The above example is a protected image, which prevents someone from
right clicking on it to save image as and they steal your images. This is simply a transparent image put in a span code to go over your image
that you want protected. The first part of the code is where you would place your desired image and the second part is for the transparent image
would go. ****PLEASE NOTE THAT THE TRANSPARENT IMAGE MUST BE THE SAME WIDTH AND HEIGHT AS THE IMAGE YOU WANT TO USE****</font></p>
<font face="Segoe Script" size="6" color="#00ff00">PROTECTED IMAGES</font><p>
< span style="background-image: url("") "> < img scr="" width="" height="" border="0" alt="Protected Image."></p>
<br>
<p><font face="Times new roman" size="6" color="#FFA500" >The above example is a protected image, which prevents someone from
right clicking on it to save image as and they steal your images. This is simply a transparent image put in a span code to go over your image
that you want protected. The first part of the code is where you would place your desired image and the second part is for the transparent image
would go. ****PLEASE NOTE THAT THE TRANSPARENT IMAGE MUST BE THE SAME WIDTH AND HEIGHT AS THE IMAGE YOU WANT TO USE****</font></p>
The code consists of three parts. Two partsThe code consists of three parts. Two parts belong in your CSS and the third part is in your HTM file.
Let’s start with the static span class. Here’s the code:
.threedtext { color: #fff; font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; text-shadow: #afe222 1px 1px, #000 2px 2px, #000 3px 3px; position: relative; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
The above code starts by defining the color of the font, font family, size and the weight. A bold attribute was added to increase the effect of the 3D transition. Next, the code defines the text’s shadow and the positioning of the shadow, along with the color. This bit of code is where you can experiment with where you want the shadow to appear around the letters and the color of the shadow. Don’t forget to add in the position element, or there will be problems with the animation. The last few lines of the code are vendor-specific, which means this 3D animation affect will not work on all browsers. For Internet Explorer, you’ll get the pop effect, but you won’t see the colors.
Next, let’s look at the code for the hover affect.
.threedtext:hover { color: #FFF;text-shadow: #afe222 1px 1px, #afe222 2px 2px, #afe222 3px 3px, #B7BDC8 4px 4px,#B7BDC8 5px 5px, #B7BDC8 6px 6px; left: -6px; top: -6px;}
This code is basically all about color, thickness and positioning. You can change the last two lines of code to read ‘right’ or ‘bottom’ to have the text pop in different directions.
You might notice that I used a different color for the text font, and then two more colors for the 3D shadow effect. This was done for a couple of reasons. It shows where the different parts of the 3D affect begins and ends; and I also feel the bottom color provides a base for the text.
To add this to your page, you simply refer to the span class:
<span class="threedtext">Put Your Text Here</span>
text-shadow: rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px;
#letterpress h1 { text-shadow: 0px 1px 1px #4d4d4d; color: #222; font: 80px 'LeagueGothicRegular'; }
#cloud9 h1 { text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); font: 80px 'ChunkFiveRegular'; }
#embossed h1 { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; font: 80px 'Museo700'; }
#citylights h1 { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; font: 80px 'MisoRegular'; }
#burning h1 { color: #fff; text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; font: 80px 'BlackJackRegular'; }
#retro h1 { color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; font: 80px 'BazarMedium'; letter-spacing: 10px; }
#three-d h1 { color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font: 80px 'ChunkFiveRegular'; }
belong in your CSS and the third part is in your HTM file.
Let’s start with the static span class. Here’s the code:
.threedtext { color: #fff; font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; text-shadow: #afe222 1px 1px, #000 2px 2px, #000 3px 3px; position: relative; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
The above code starts by defining the color of the font, font family, size and the weight. A bold attribute was added to increase the effect of the 3D transition. Next, the code defines the text’s shadow and the positioning of the shadow, along with the color. This bit of code is where you can experiment with where you want the shadow to appear around the letters and the color of the shadow. Don’t forget to add in the position element, or there will be problems with the animation. The last few lines of the code are vendor-specific, which means this 3D animation affect will not work on all browsers. For Internet Explorer, you’ll get the pop effect, but you won’t see the colors.
Next, let’s look at the code for the hover affect.
.threedtext:hover { color: #FFF;text-shadow: #afe222 1px 1px, #afe222 2px 2px, #afe222 3px 3px, #B7BDC8 4px 4px,#B7BDC8 5px 5px, #B7BDC8 6px 6px; left: -6px; top: -6px;}
This code is basically all about color, thickness and positioning. You can change the last two lines of code to read ‘right’ or ‘bottom’ to have the text pop in different directions.
You might notice that I used a different color for the text font, and then two more colors for the 3D shadow effect. This was done for a couple of reasons. It shows where the different parts of the 3D affect begins and ends; and I also feel the bottom color provides a base for the text.
To add this to your page, you simply refer to the span class:
<span class="threedtext">Put Your Text Here</span>
text-shadow: rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px;
#letterpress h1 { text-shadow: 0px 1px 1px #4d4d4d; color: #222; font: 80px 'LeagueGothicRegular'; }
#cloud9 h1 { text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); font: 80px 'ChunkFiveRegular'; }
#embossed h1 { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; font: 80px 'Museo700'; }
#citylights h1 { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; font: 80px 'MisoRegular'; }
#burning h1 { color: #fff; text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; font: 80px 'BlackJackRegular'; }
#retro h1 { color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; font: 80px 'BazarMedium'; letter-spacing: 10px; }
#three-d h1 { color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font: 80px 'ChunkFiveRegular'; }
The following is a example of a dj schedule that you can use in your lounges to put the names of your dj in so that members and visitors know the name of the dj that is on air at the designated time.
Example Preview of the schedule:
Here is the code for the dj schedule:
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option value="none">MONDAY - Eastern Time</option>
<option>12 AM-8 AM [OPEN] </option>
<option>8 AM-12 PM [OPEN] </option>
<option>12 PM-4 PM [OPEN] </option>
<option>4 PM-9 PM [OPEN] </option>
<option>9 PM-12 AM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>TUESDAY - Eastern Time [OPEN] </option>
<option>12 AM-8 AM Auto</option>
<option>8 AM-12 PM [OPEN] </option>
<option>12 PM-4 PM [OPEN] </option>
<option>4 PM-9 PM [OPEN] </option>
<option>9 PM-12 AM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>WEDNESDAY - Eastern Time [OPEN] </option>
<option>12 AM- 8 AM [OPEN] </option>
<option>8 AM-12 PM [OPEN] </option>
<option>12 PM-3 PM [OPEN] </option>
<option>3 PM -6PM [OPEN] </option>
<option>6 PM-9 PM [OPEN] </option>
<option>9 PM-12 AM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>THURSDAY - Eastern Time [OPEN] </option>
<option>12 AM- 8 AM [OPEN] </option>
<option>8 AM- 12 PM [OPEN] </option>
<option>12 PM-6 PM [OPEN] </option>
<option>6 PM-9 PM [OPEN] </option>
<option>9 PM-12 PM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>FRIDAY - Eastern Time [OPEN]</option>
<option>12 AM-8 AM [OPEN] </option>
<option>8 AM-12 PM [OPEN] </option>
<option>12 PM-4 PM [OPEN] </option>
<option>4 PM-9 PM [OPEN] </option>
<option>9 PM-12 PM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>SATURDAY - Eastern Time [OPEN] </option>
<option>12 AM-9 AM [OPEN] </option>
<option>9 AM-3 PM [OPEN] </option>
<option>3 PM-6 PM [OPEN] </option>
<option>6 PM-9 PM [OPEN] </option>
<option>9 PM-12 AM [OPEN] </option></select>
<select size="1pt" style="color:red; background-color:black; font-family:arial; font-size:10pt; border:1pt inset red">
<option>SUNDAY - Eastern Time [OPEN] </option>
<option>12 AM-9 AM [OPEN] </option>
<option>9 AM-12 PM [OPEN] </option>
<option>12 PM-2 PM [OPEN] </option>
<option>2 PM-4 PM [OPEN] </option>
<option>4 PM-7 PM [OPEN] </option>
<option>7 PM-9 PM [OPEN] </option>
<option>9 PM-12 AM [OPEN] </option></select>
<center>
<table align="center">
<tr><td></td></tr></table>
</center>
This is a collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. If you use these buttons in the wild, drop me a note and let me know.
Designed; Maintained by Dj Iceman with inspiration from across the internet.
THIS EXAMPLE IS FOR THE COOL BUTTONS LISTED BELOW IN THE NEXT BLOG!!!!
<div class="container">
<h1>CSS3 buttons</h1>
<p class="intro">This is a collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. If you use these buttons in the wild, <a href="http://fubar.com/livingonth33ed3">drop me a note</a> and let me know.</p>
<div class="button-collection">
<div class="button-info">
<h2>Classic buttons</h2>
<p>This is the original set of buttons, showing a variety of CSS3 styles in different combinations. Study the code, then adjust to fit the context of where it's used.</p></div>
<ul class="column">
<li>
<button class="minimal">Minimal</button>
</li>
<li>
<button class="clean-gray">Clean Gray</button>
</li> <li>
<button class="cupid-green">Cupid Green</button>
</li> <li>
<button class="cupid-blue">Cupid Blue</button>
</li> <li>
<button class="blue-pill">Blue Pill</button>
</li> <li>
<button class="dribbble">Dribbble</button>
</li> <li>
<button class="slick-black">Slick Black</button>
</li> <li>
<button class="thoughtbot">thoughtbot</button>
</li> <li>
<button class="punch">Punch</button>
</li> <li>
<button class="blue-candy">Blue Candy</button>
</li> <li>
<button class="purple-candy">Purple Candy</button>
</li> <li>
<button class="shiny-blue">Shiny Blue</button>
</li> <li>
<button class="download-itunes">Download iTunes</button>
</li> <li>
<button class="skip">Skip</button>
</li> <li>
<div class="indent"><button class="minimal-indent">Minimal Indent</button></div>
</li> </ul> </div>
<div class="button-collection">
<div class="button-info">
<h2>WebKit experimental</h2>
<p>Proof of concept buttons using WebKit-only features.</p>
</div>
<ul class="column">
<li>
<button class="webkit-badge">Quit!</button>
</li> <li>
<button class="webkit-seal">Approve!</button>
</li> <li>
<button class="webkit-check">Accept</button>
</li> </ul> </div>
<p class="credit">Designed; Maintained by <a href="http://fubar.com/livingonth33ed3">Dj Iceman</a> with inspiration from across the internet.</p> </div>
<style>
button.minimal {
background: #e3e3e3;
border: 1px solid #bbb;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font-family: "helvetica neue",
helvetica, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 150px;
}
button.minimal:hover {
background: #d9d9d9;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222; cursor: pointer;
}
button.minimal:active {
background: #d0d0d0;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
button.clean-gray {
background: #eee;
background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#eee), to(#ccc));
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 1;
padding: 8px 0;
text-align: center;
text-shadow: 0 1px 0 #eee; width: 150px;
}
button.clean-gray:hover {
background: #ddd;
background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#bbb));
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer; text-shadow: 0 1px 0 #ddd;
}
button.clean-gray:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
-webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
}
button.cupid-green {
background: #7fbf4d;
background: -moz-linear-gradient(top, #7fbf4d 0%, #63a62f 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbf4d), to(#63a62f));
border: 1px solid #63a62f;
border-bottom: 1px solid #5b992b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #96ca6d;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
box-shadow: inset 0 1px 0 0 #96ca6d; color: #fff; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 1; padding: 7px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 0 #4c9021; width: 150px;
}
button.cupid-green:hover {
background: #76b347;
background: -moz-linear-gradient(top, #76b347 0%, #5e9e2e 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76b347), to(#5e9e2e));
-moz-box-shadow: inset 0 1px 0 0 #8dbf67;
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
box-shadow: inset 0 1px 0 0 #8dbf67; cursor: pointer;
}
button.cupid-green:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
-moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
-webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
}
button.cupid-blue {
background: #d7e5f5;
background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
box-shadow: inset 0 1px 0 0 #fff;
color: #1a3e66; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1;
padding: 6px 0 7px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 150px;
}
button.cupid-blue:hover {
background: #ccd9e8;
background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
border-top: 1px solid #a1afbf; border-left: 1px solid #9caaba;
border-bottom: 1px solid #96a3b3;
border-right: 1px solid #9caaba;
-moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
box-shadow: inset 0 1px 0 0 #f2f2f2;
color: #163659;
cursor: pointer;
}
button.cupid-blue:active {
border: 1px solid #8c98a7;
-moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
-webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
}
button.blue-pill {
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));
border-top: 1px solid #758fba;
border-right: 1px solid #6c84ab;
border-bottom: 1px solid #5c6f91;
border-left: 1px solid #6c84ab;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
color: #fff; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 1;
padding: 8px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 1px #64799e;
text-transform: uppercase;
width: 150px;
}
button.blue-pill:hover {
background: #9badcc;
background: -moz-linear-gradient(top, #9badcc 0%, #687fa6 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9badcc), to(#687fa6));
border-top: 1px solid #6d86ad;
border-right: 1px solid #647a9e;
border-bottom: 1px solid #546685;
border-left: 1px solid #647a9e;
-moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
box-shadow: inset 0 1px 0 0 #a5b9d9;
cursor: pointer;
}
button.blue-pill:active {
border: 1px solid #546685;
-moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
}
button.dribbble {
background: #F26895;
background: -moz-linear-gradient(top, #F26895 0, #F26895 50%, #F15587 50%, #F15587 100%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#F26895), to(#F15587));
border: 0;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; color: #fcfcfc;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #a64767;
width: 150px;
}
button.dribbble:hover {
background: #e2558b;
background: -moz-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#e2558b), to(#df3e7b));
cursor: pointer;
}
button.dribbble:active {
background: #c94477;
background: -moz-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#c94477), to(#c22b65));
}
button.slick-black {
background: #111;
background: -moz-linear-gradient(top,
rgba(50, 50, 50, 0.9) 0%,
rgba(30, 30, 30, 0.9) 50%,
rgba(20, 20, 20, 0.9) 50%,
rgba(0, 0, 0, 0.9) 100%);
background: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, rgba(50, 50, 50, 0.9)),
color-stop(0.5, rgba(30, 30, 30, 0.9)),
color-stop(0.5, rgba(20, 20, 20, 0.9)),
color-stop(1, rgba(0, 0, 0, 0.9)));
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 22px;
font-weight: lighter;
line-height: 1;
padding: 12px 0;
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
width: 150px;
}
button.slick-black:hover {
background: #222;
background: -moz-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(70, 70, 70, 0.9)), color-stop(0.5, rgba(50, 50, 50, 0.9)), color-stop(0.5, rgba(40, 40, 40, 0.9)), color-stop(1, rgba(20, 20, 20, 0.9)));
cursor: pointer;
}
button.slick-black:active {
background: #000;
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(30, 30, 30, 0.9)), color-stop(0.5, rgba(20, 20, 20, 0.9)), color-stop(0.5, rgba(10, 10, 10, 0.9)), color-stop(1, rgba(0, 0, 0, 0.9)));
}
button.thoughtbot {
background: #c63929;
background: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
border: 1px solid #951100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 1;
padding: 12px 0 14px 0;
text-align: center;
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
width: 150px;
}
button.thoughtbot:hover {
background: #cb0500;
background: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
cursor: pointer;
}
button.thoughtbot:active {
background: #b30300;
background: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
-moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
}
button.punch {
background: #4162a8;
border-top: 1px solid #38538c;
border-right: 1px solid #1f2d4d;
border-bottom: 1px solid #151e33;
border-left: 1px solid #1f2d4d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin-bottom:10px;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #1e2d4d;
width: 150px;
-webkit-background-clip: padding-box;
}
button.punch:hover {
-moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
-webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
cursor: pointer;
}
button.punch:active {
-moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
margin-top: 58px;
}
button.blue-candy {
background: #2260dd;
background: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(0.5, #376fe0), color-stop(0.5, #2260dd), color-stop(1, #2463de));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #2c4d93;
width: 150px;
-webkit-background-clip: padding-box;
}
button.blue-candy:hover {
background: #1d55c4;
background: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(0.5, #3263c7), color-stop(0.5, #1d55c4), color-stop(1, #1d55c4));
-webkit-background-clip: padding-box;
cursor: pointer;
}
button.blue-candy:active {
background: #1a4aab;
background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
color: #ddd;
-webkit-background-clip: padding-box;
}
button.purple-candy {
background: #6021de;
background: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(0.5, #7038e0), color-stop(0.5, #6021de), color-stop(1, #6224de));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; color: #fff; font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #473569;
width: 150px;
-webkit-background-clip: padding-box;
}
button.purple-candy:hover {
background: #551dc4;
background: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(0.5, #6332c7), color-stop(0.5, #551dc4), color-stop(1, #561fc4));
-webkit-background-clip: padding-box;
cursor: pointer;
}
button.purple-candy:active {
background: #4a1aab;
background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
color: #ddd;
-webkit-background-clip: padding-box;
}
button.shiny-blue {
background: #2463de;
background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #759ae9), color-stop(0.5, #376fe0), color-stop(0.5, #1a5ad9), color-stop(1, #2463de));
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
button.shiny-blue:hover {
background: #0d53de;
background: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5d89e8), color-stop(0.5, #2261e0), color-stop(0.5, #044bd9), color-stop(1, #0d53de));
cursor: pointer;
}
button.shiny-blue:active {
border-top: 1px solid #1b4db3;
border-right: 1px solid #174299;
border-bottom: 1px solid #133780;
border-left: 1px solid #174299;
-moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
-webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
}
button.download-itunes {
background: #377ad0;
background: -moz-linear-gradient(top, #52a8e8 0%, #377ad0 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff; font-family: "lucida grande", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1;
padding: 3px 0 5px 0;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
width: 112px;
-webkit-background-clip: padding-box;
}
button.download-itunes:hover {
background: #206bcb;
background: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
-webkit-background-clip: padding-box;
}
button.download-itunes:active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box;
}
button[disabled].download-itunes,
button[disabled].download-itunes:hover,
button[disabled].download-itunes:active {
background: #dadada;
background: -moz-linear-gradient(top, #f3f3f3 0%, #dadada 100%);
background:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3));
border-top: 1px solid #c5c5c5;
border-right: 1px solid #cecece;
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #cecece; color: #8f8f8f;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
cursor: not-allowed;
text-shadow: 0 -1px 1px #ebebeb;
}
button.download-itunes::-moz-focus-inner {
border: 0; padding: 0;
}
button.skip {
background: #36518f;
background: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8c9cbf), color-stop(0.5, #546a9e), color-stop(0.5, #36518f), color-stop(1, #3d5691));
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
-webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
box-shadow: inset 0 1px 0 0 #b1b9cb;
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 7px 0 8px 0;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 1px #000f4d;
width: 150px;
}
button.skip:hover {
background: #2f477d;
background: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7f8dad), color-stop(0.5, #4a5e8c), color-stop(0.5, #2f477d), color-stop(1, #364c80));
cursor: pointer;
}
button.skip:active {
-moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
-webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
cursor: pointer;
}
button.minimal-indent {
background: #d2d2d2;
background: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f3f3f3), color-stop(0.5, #dddddd), color-stop(0.5, #d2d2d2), color-stop(1, #dfdfdf));
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #b4b4b4;
border-right: 1px solid #dfdfdf;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
-webkit-box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
color: #666666;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 7px 0;
text-shadow: 0 1px 1px #fff;
width: 150px;
}
button.minimal-indent:hover {
background: #c4c4c4;
background:
-moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e5e5e5), color-stop(0.5, #d1d1d1), color-stop(0.5, #c4c4c4), color-stop(1, #b8b8b8));
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
}
button.minimal-indent:active {
-moz-box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
}
div.indent {
background: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #fafafa 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2e2e2), to(#fafafa));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin: 50px auto 0;
padding: 10px 0;
width: 170px;
}
button.webkit-badge {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
color: #fff;
font-family: "hoefler text", georgia, serif;
font-size: 30px;
font-style: italic;
font-weight: lighter;
height: 88px;
line-height: 1;
padding: 0;
text-align: center;
text-shadow: 0px -1px 1px #3d0700;
width: 150px;
-webkit-mask-image: url("../images/badge.png");
-webkit-mask-position: left top;
-webkit-mask-repeat: no-repeat;
}
button.webkit-badge:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
cursor: pointer;
}
button.webkit-badge:active {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
}
button.webkit-seal {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de));
color: #fff;
height: 90px;
color: #fff;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 1;
padding: 0;
text-align: center;
text-shadow: 0px -1px 1px #473569;
width: 150px;
-webkit-mask-image: url("../images/seal.png");
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
}
button.webkit-seal:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4));
cursor: pointer;
}
button.webkit-seal:active { background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab));
}
button.webkit-check {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de));
color: #fff; height: 88px;
line-height: 1;
padding: 0;
text-align: center;
text-indent: -9999px;
text-shadow: 0px -1px 1px #3d0700;
width: 150px;
-webkit-mask-image: url("../images/check.png");
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
}
button.webkit-check:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4));
cursor: pointer;
}
button.webkit-check:active {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab));
}
</style>
HERE IS A BASIC LOUNGE CSS SKIN:
YOU CAN USE THIS SKIN FOR YOUR LOUNGES****JUST DONT CLAIM IT AS YOUR CODE CAUSE YOU DIDNT CREATE IT!!!!!
EX:
.new_lounge_wrapper a {
font-family: veranda;
color: red;
font-size: 15pt;
font-weight: normal;
text-decoration: none;
font-style: normal;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
}
.new_lounge_wrapper a.man{
font-family: veranda;
color: red;
font-size: 15px;
font-weight: normal;
text-decoration: none;
font-style: normal;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
}
.new_lounge_wrapper a:visited {
font-family: veranda;
color: red;
font-size: 15px;
font-weight: normal;
text-decoration: none;
font-style: normal;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
}
.new_lounge_wrapper table {
visibility: show!important;
background: transparent!important;
background-color: transparent!important;
border: 0px!important;
}
.new_lounge_wrapper th {
visibility: show!important;
background: transparent!important;
background-color: transparent!important;
border: 0px!important;
}
.new_lounge_wrapper tr {
visibility: show!important;
background: transparent!important;
background-color: transparent!important;
border: 0px!important;
}
.new_lounge_wrapper td {
visibility: show!important;
background: transparent!important;
background-color: transparent!important;
border: 0px!important;
}
.new_lounge_wrapper p {
visibility: show!important;
background: transparent!important;
background-color: transparent!important;
border: 0px!important;
}
**CONTROLS SCROLL BAR IN TOP IN FUBAR SECT**
.new_lounge_wrapper {
visibility: show!important;
display: --!important;
scrollbar-arrow-color: #DAA520;
scrollbar-Track-Color: --;
scrollbar-Highlight-Color: #DAA520;
scrollbar-base-color: #A9A9A9;
scrollbar-Face-Color: --;
scrollbar-Shadow-Color: #DAA520;
scrollbar-DarkShadow-Color: #DAA520;
}
**CONTROLS FUBAR LOGO**
.new_lounge_wrapper div.topheader_wrap_hh_stat {
width: 100%;
height: 25px;
background-color: transparent;
}
**CONTROLS FUBAR LOGO**
.new_lounge_wrapper a.link_hh_sponser {
color: transparent;
}
.new_lounge_wrapper div.topheader_wrap_site_online {
visibility: show!important;
display: show!important;
}
**CONTROLS SCROLLING MEMBERS**
.new_lounge_wrapper div#online_users {
visibility: show!important;
display: show!important;
}
.new_lounge_wrapper div.topheader_menu_wrapper {
visibility: show!important;
display: show!important;
}
***CONTROLS USER PICS***
.new_lounge_wrapper img.user_tn_tiny_nl_notice {
height: 30px!important;
width: 30px!important;
}
**CONTROLS USERS PICS IN SAYBOX2
.new_lounge_wrapper img.user_tn_tiny_nl_shout {
height: 30px!important;
width: 30px!important;
}
**CONTROLS USERS PICS IN ONLINE MEMBERS BOX**
.new_lounge_wrapper img.new_lounge_online_users_grid {
height: 30px!important;
width: 30px!important;
}
.new_lounge_wrapper #fixedtipdiv {
visibility: show!important;
padding: 2px;
border: 5px double red;
width: 300px;
font: normal 12px segoe script;
color: green;
line-height: 18px;
}
.new_lounge_wrapper a:active {
font-family: Sylfaen,sans-serif;
color:#000000;
font-size: 12pt;
font-weight: normal;
text-decoration: none;
font-style: normal;
}
**CONTROLS ALL HOVER IN THE LOUNGE**
.new_lounge_wrapper a:hover {
font-family: Sylfaen,sans-serif;
color: -;
background: url(-----BACKGROUND IMAGE LINK GOES HERE----);
}
.new_lounge_wrapper td.top_right_header {
display: show!important;
}
**LOUNGE OPTIONS MENU**
.new_lounge_wrapper div#new_lounge_opts_div {
visibility: hidden!important;
display: hidden!important;
background: black;
background-color: black;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
-khtml-opacity: 0.80;
border-color: -!important;
border-width: 4px!important;
border-style: solid!important;
width: 20%;
}
**CONTROLS LOUNGE INFO**
.new_lounge_wrapper div#new_lounge_info_div {
visibility: show!important;
display: show!important;
background: black;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-color: black;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
opacity: 0.85;
-khtml-opacity: 0.85;
border-color: #DC143C!important;
border-width: 5px!important;
border-style: double!important;
top: -100px;
width: 25%;
height: %;
}
.new_lounge_wrapper div {
visibility: show!important;
border: 0px solid #;
font-family: Sylfaen,sans-serif;
color: #;
font-size: 10pt;
}
**FOR LOUNGE WRAPPER**
.new_lounge_wrapper div.new_lounge_wrapper {
background-color: transparent;
width: 100%;
}
**CONTROLS STAFF CHAT TEXT**
.new_lounge_wrapper span.new_lounge_staff_shout {
visibility: show!important;
font-color: #DC143C;
color: #DC143C;
font-size: 18pt!important;
font-family: segoe ;
font-weight: bolder!important;
text-decoration: none!important;
}
**CONTROLS MEMBER CHAT TEXT***
.new_lounge_wrapper td.lounge_shout_msg {
font-color: white;
color: white;
font-size: 17pt!important;
font-family: segoe ;
font-weight: bolder!important;
text-decoration: none!important;
}
.new_lounge_wrapper div.new_lounge_motd_div {
text-align: center;
font-size: 30px;
font-weight: bold;
margin: 10px;
top: -1750px;
color: red;
background-color: transparent;
border: 0px solid #888888;
padding: 7;
float: none;
}
**CONTROLS LOUNGE OPTIONS**
.new_lounge_wrapper div.new_lounge_opts_div {
background: transparent;
border-width: 2px!important;
background-color: black;
visibility: hide!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-position: center center!important;
background-attachment: scroll;
border: 2px;
}
.new_lounge_wrapper div.new_lounge_info_div {
border: 2px;
}
.new_lounge_wrapper div. {
border: none;
}
**CONTROLS THE WORD SAY***
.new_lounge_wrapper div.new_lounge_shoutbox_enter_data b {
color: #DC143C!important;
font-size: 15pt;
font-family: segoe script;
font-weight: bold;
text-decoration: blink;
}
**CONTROLS SAYBOX1**
.new_lounge_wrapper div.new_lounge_shoutbox_enter_data {
border: transparent;
border-color: #DC143C!important;
border-width: 4px!important;
border-style: double!important;
margin: 10px;
margin-bottom: none;
width: 68%!important;
height: 35px!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-position: center!important;
background-attachment: fixed!important;
background-repeat: repeat!important;
background: #000000!important;
background-color: #000000!important;
filter: alpha(opacity=65);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-opacity: 0.75;
position: relative;
top: -397px!important;
right: -0px;
}
***CONTROLS SAYBOX2***
.new_lounge_wrapper div.new_lounge_shoutbox_div {
border: none;
border-color: #DC143C!important;
border-width: 5px!important;
border-style: double!important;
height: 800px;
width: 68%;
over-flow-y: auto;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-repeat: repeat!important;
background-attachment: repeat!important;
background-position: center center!important;
background: #000000;
background-color: #000000; f
ilter: alpha(opacity=65);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-opacity: 0.75;
margin: 10px;
scrollbar-base-color: white;
scrollbar-arrow-color: red;
scrollbar-track-color: black;
scrollbar-shadow-color: grey;
scrollbar-lightshadow-color: white;
scrollbar-darkshadow-color: red;
scrollbar-highlight-color: grey;
scrollbar-3dlight-color: white;
position: relative;
top: -415px!important;
right: -0px;
}
***FOR SHARE BUTTON***
.new_lounge_wrapper div#share_div {
visibility: show!important;
display: show!important;
width: auto;
margin: none;
margin-right: 10px;
padding: none;
float: right;
clear: both;
position: relative;
top: -150px;
margin-top: 5px;
}
.new_lounge_wrapper table.share_box {
background-color: black;
border: 0px solid;
padding: 3px;
position: relative;
top: -900px;
100;
}
**FOR DISPLAY OF LEAVE LOUNGE**
.new_lounge_wrapper div.new_lounge_quit_div {
visibility: hidden!important;
display: none!important;
width: auto;
margin: 10px;
margin-right: 10px;
padding: none;
float: right;
clear: right;
position: relative;
top: 0px;
margin-top: 5px;
}
.new_lounge_wrapper textarea {
visibility: show!important;
font-family: segoe script;
color: ;
font-size: 10pt;
font-weight: bold;
font-decoration: none;
font-style: normal;
background-color: white;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
-khtml-opacity: 0.90;
}
**CONTROLS THE USER INPUT TYPING IN SAY BOX 1**
.new_lounge_wrapper input {
visibility: show!important;
background: transparent;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
-khtml-opacity: 0.90;
font-weight: bold;
font-size: 15pt;
color: red;
}
**CONTROLS WHEN DRINKS ARE BOUGHT IN LOUNGE**
.new_lounge_wrapper td.lounge_round_notice {
visibility: show!important;
display: show!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!Important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-positon: center center!important;
font-size: 14pt;
color: orange!important;
font-weight: bold;
text-decoration: none;
}
**CONTROLS WHEN A USER IS BANNED IN LOUNGE***
.new_lounge_wrapper td.lounge_shout_notice {
visibility: show!important;
display: show!important;
text-align: left;
vertical-align: center;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-positon: center center!important;
color: #DC143C!important;
font-weight: bold;
font-size: 12px;
}
**CONTROLS WHEN A USER ENTERS THE LOUNGE**
.new_lounge_wrapper td.lounge_enter_notice {
visibility: show!important;
display: show!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-positon: center center!important;
font-size: 13pt;
color: #00ff00!important;
position: relative;
font-weight: bold;
text-decoration: -;
}
**CONTROLS WHEN USERS EXIT THE LOUNGE****
.new_lounge_wrapper td.lounge_exit_notice {
visibility: hidden!important;
display: none!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-positon: center center!important;
font-size: 12pt;
color: yellow!important;
font-weight: bold;
text-decoration: none;
}
*****CONTROLS LOUNGE EMOTES*****
.new_lounge_wrapper td.lounge_shout_emote {
visibility: show!important;
display: show!important;
font-size: 13pt;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-positon: center center!important;
color: #00ff00!important; font-weight: bold;
text-decoration: none;
}
****CONTROLS WHEN USERS JOIN THE LOUNGE****
.new_lounge_wrapper td.lounge_shout_subscribe {
visibility: show!important;
display: show!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!Important;
background-repeat: repeat!important;
background-positon: center center!important;
background-attachment: scroll!important;
font-size: 14pt;
color: red!important;
font-weight: bold;
text-decoration: none;
}
.new_lounge_wrapper table.lounge_info {
border: 0px;
border-bottom: 0px solid white;
background-color: transparent;
}
**THIS CONTROLS THE LOUNGE INFO WORD IN LOUNGE INFO BOX****
.new_lounge_wrapper th.lounge_info {
font-size: 12pt;
border: 4px;
color: #DC143C;
padding: 5;
font-family: segoe script!important;
font-weight: bold;
border-bottom: 0px;
background-color: transparent;
text-decoration: blink;
}
****LOUNGE INFO DETAILS LIKE TOTAL MEMBERS, CREATED ON, ETC*****
.new_lounge_wrapper td.lounge_info {
font-size: 10pt;
font-family: segoe script;
color: #F8F8FF;
background-color: transparent;
}
***THIS IS CONTROLS LOUNGE OWNER NAME IN LOUNGE INFO!!!***
.new_lounge_wrapper td.lounge_info a {
font-size: 12pt;
font-family: segoe script;
color: #00ff00!important;
text-decoration: blink;
}
****THIS IS FOR ONLINE USERS FOR CHROME AND FIREFOX BROWSERS********
.new_lounge_wrapper div.new_lounge_online_user_list_div {
font-size: 14px;
background: transparent!important;
background-color: transparent!important;
border: show;
border-color: #DC143C!important;
border-width: 4px!important;
border-style: double!important;
text-align: center;
visibility: show!important;
display: show!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-position: center center!important;
height: 60px;
width: 68%;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml- opacity: 0.75;
overflow-y: auto;
overflow-x: auto;
position: relative;
top: -1355px;
float: left;
margin: 10px;
margin-top: 5px;
clear: left;
left: -0px!important;
}
****THIS IS FOR ONLINE MEMBERS****(HTML DIV FOR IE)*****
.new_lounge_wrapper html div.new_lounge_online_user_list_div {
top: -1205px;
visibility: show!important;
display: show!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-attachment: scroll!important;
background-repeat: repeat!important;
background-position: center center!important;
}
.new_lounge_wrapper div.new_lounge_footer {
clear: both;
position: relative;
top: 0px;
}
.new_lounge_wrapper table.admin_menu {
border: 0px solid #990000;
}
***THIS IS FOR LOUNGE OPTIONS***
.new_lounge_wrapper table.lounge_opts {
visibility: show!important;
text-align: left;
border-bottom: none;
}
.new_lounge_wrapper th.lounge_opts {
visibility: show!important;
font-size: 16px;
color: cc00ff;
padding: 5;
font-family: papyrus, comic sans ms;
font-weight: bold;
border-bottom: none;
background-color: transparent;
}
.new_lounge_wrapper td.lounge_opts {
visibility: show!important;
text-align: left:
padding:2;
font-size: 12px;
background-color: none;
}
.new_lounge_wrapper td.lounge_opts a {
color: cc00ff!important;
}
.new_lounge_wrapper div.new_lounge_notice_div {
text-align: center;
margin: auto; color: yellow;
font-weight: bold;
font-size: 16px;
}
*****THIS IS FOR LOUNGE CUSTOM #1*****
.new_lounge_wrapper div.new_lounge_custom1_div {
float: right;
top: -1610px;
right: 0px;
position: relative;
margin: -50px;
clear: right;
left: -55px;
}
*****THIS IS FOR LOUNGE CUSTOM #2*****
.new_lounge_wrapper div.new_lounge_custom2_div {
position: relative;
top: -150px;
margin: 10px;
clear: both;
}
*****THIS IS FOR LOUNGE CUSTOM #3*****
.new_lounge_wrapper div.new_lounge_custom3_div {
position: relative;
float: none;
top: -1125px;
margin: 10px;
clear: both;
}
***THIS CONTROLS MUSIC SECTION******
.new_lounge_wrapper div.new_lounge_music_div {
float: none;
position: relative;
top: -280px;
left: 0%;
margin: 10px;
clear: both;
}
.new_lounge_wrapper span.new_lounge_level_staff {
text-decoration: blink!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-repeat: repeat!important;
background-attachment: scroll!important;
background-position: center!important;
font-color: #00FF00!important;
font-weight: bolder;
color: #00FF00!important;
font-size: 16pt!important;
}
*****THIS SECTION BEGINS AND CONTROLS USER AND VIP COLORS!!!!!!*****
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_userbox_moderator {
font-color: transparent!important;
color: #660066!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_vic_blue {
font-color: transparent!important;
color: #003399!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-repeat: repeat!important;
background-attachment: fixed!important;
background-position: center center!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_vic_pink {
font-color: transparent!important;
color: #660066!important;
background-image: url(-----BACKGROUND IMAGE LINK GOES HERE----)!important;
background-repeat: repeat!important;
background-attachment: fixed!important;
background-position: center center!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_top_ten_cherry {
font-color: transparent!important;
color: red!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_newbie {
font-color: transparent!important;
color: green!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_top_referrer {
font-color: transparent!important;
color: #990066!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.userbox_celebrity {
font-color: transparent!important;
color: #00FFFF!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_userbox_celebrity {
font-color: transparent!important;
color: #00FFFF!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_userbox_supporter {
font-color: transparent!important;
color: #00ff00!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_userbox_family {
font-color: transparent!important;
color: #FFFF00!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.top_promoter {
font-color: transparent!important;
color: #FFFF00!important;
}
.new_lounge_wrapper div.new_lounge_shoutbox_div a.link_verified_email {
font-color: transparent!important;
color: -!important;
}
WELCOME TO FUBAR LOUNGE CODE TRAINING THIS IS GOING TO SEEN RATHER OVERWHELMING TO YOU AT FIRST AS IT IS ALOT OF INFORMATION TO HAVE ALL PUT IN FRONT OF YOU AT ONE TIME, BUT IT IS ALL VERY SIMPLE TO READ AS I HAVE BROKEN IT DOWN TO A WAY THAT YOU WILL BE ABLE TO UNDERSTAND AND FOLLOW THE EXAMPLES THAT I HAVE PUT IN HERE FOR YOU AND I HOPE THAT YOU CAN UNDERSTAND EACH AND EVERYTHING THAT IS LISTED BELOW AS IT IS VERY VITAL TO YOU TO BECOME SUCCESSFUL IN YOUR BECOMING A LOUNGE CODER. IT IS TRYING WHEN YOU ARE FIRST STARTING OUT FRESH NOT KNOWING WHAT IS WHAT IN CODING OR EVEN NOT KNOW WHAT CODING IS BUT IT IS VERY BASIC JUST ALOT OF THINGS THAT YOU HAVE TO RETAIN IN YOUR MIND AS YOU START ON YOUR WAY TO BE COME A CODER. YOU JUST HAVE TO LEARN AT YOUR OWN PACE AS ALOT OF PEOPLE LEARN AT A DIFFERENT RATE THAN OTHER DO AND THAT IS A GOOD THING AT LEAST WHEN YOU TAKE YOUR TIME YOU WILL KNOW EVERYTHING THAT YOU ARE DOING AND NOT MESS UP OR FORGET WHAT YOU HAVE LEARNED . SO ONCE AGAIN I WANT TO CONGRATULATE YOU ON YOUR INTEREST IN BECOMING A LOUNGE CODER AND WANTING TO LEARN. WE TRAINERS ONLY WANT YOU TO BEABLE TO LEARN THE CORRECT WAY AND TO HAVE YOU BE SUCCESSFUL AND TO FURNISH YOU WITH THE RIGHT TOOLS THAT YOU WILL NEED AND TO SHARE OUR KNOWLEDGE WITH YOU TO MAKE YOU A CODER THAT WILL KNOW HOW TO CODE A LOUNGE FLAWLESSLY.
This is known as the Motd section of your lounge all of your main things go in here like your lounge name banner and buttons and cams and what ever else you decide to add in this section.
This part is where your lounge banner would go and there are many different ways to make these and the posibilities are endless.
<img src="http://images.cooltext.com/1795669.png" width="400" height="50" alt="TEST LOUNGE">
<img src="http://images.cooltext.com/1795676.gif" width="400" height="50" alt="TEST LOUNGE">
<img src="http://images.cooltext.com/1795681.png" width="400" height="50" alt="TEST LOUNGE">
<img src="http://images.cooltext.com/1795686.gif" width="400" height="50" alt="TEST LOUNGE">
THESE ABOVE EXAMPLE WERE MADE WITH A WEBSITE THAT HAS ALOT OF DIFFERENT OPTIONS TO ALLOW YOU TO MAKE THE BANNERS TO WHATEVER YOU DECIDE THAT YOU WANT AND THEY ALSO RENDER THE GRAPHICS AND GIVE YOU THE IMAGE HOSTING RIGHT THERE ON THEIR OWN SITE BUT YOU HAVE TO REGISTER FOR AN ACCOUNT IN ORDER TO BE ABLE TO TAKE ADVANTAGE OF THE BENEFITS OF THIS FEATURE AND IT IS FREE TO MAKE THE ACCOUNT THERE AS WELL HERE IS THE LINK TO THIS WEBSITE:
CLICK THE GRAPHIC BELOW TO USE THIS SITE:
<a href="http://cooltext.com"><img src="http://images.cooltext.com/1795693.png" width="400" height="50" alt="TEST LOUNGE"></A>
This is where your lounge rules would be put in example of these would be these:Example one is a example of what styles you can have for lounge rules the one below is known as a Marquee scroller.
<font face="segoe script" color="#F5F5F5" size="6pt"><marquee bgcolor="transparent" direction="left" loop="30" width="75%"><strong>**~WELCOME TO YOUR LOUNGE NAME GOES HERE~***LOUNGE RULES***~PLEASE TAKE A MINUTE TO READ~**1) NO DRAMA OF ANY KIND OR EJECTED IMMEDIATELY!!2) NO YAHOO YIM'S IN THE LOUNGE!!*3) NO LURKING MUST BE STAFF TO IDLE IN LOUNGE!!*4) NO BASHING DJ'S OR MUSIC OR YOU WILL BE BANNED ON THE SPOT!!*5) NO LINK DROPPING !!*6) MUST HAVE PICTURE IN PROFILE AND MUST HAVE A PROFILE !!*7) IF YOU HAVE A PROBLEM BRING IT TO THE MAIN OWNER OF THE LOUNGE'S ATTENTION NOT ANYONE ELSE *8) 1ST WARNING 2ND EJECTED 3RD BANNED IF YOU BREAK THE RULES!! HAVE FUN AND ENJOY YOURSELF.</strong></marquee></font>
EXAMPLE 2 is known as a drop down menu and you can alter this to any font that you want and any colors and also any rules yoou want to add to this.<select size="1px" style="color:#F5F5F5; background-color:black; font-family:trebuchet ms; font-size:11pt; border:3pt double #F5F5F5"><option value="none">LOUNGE RULES</option><option>**1) NO DRAMA OF ANY KIND OR EJECTED IMMEDIATELY!!</option><option>2) NO YAHOO YIM'S IN THE LOUNGE!!</option><option>3) NO LURKING MUST BE STAFF TO IDLE IN LOUNGE!!</option><option>4) NO BASHING DJ'S OR MUSIC OR YOU WILL BE BANNED ON THE SPOT!!</option><option>5) NO LINK DROPPING !!</option><option>6) MUST HAVE PICTURE IN PROFILE AND MUST HAVE A PROFILE !!</option><option>7) IF YOU HAVE A PROBLEM BRING IT TO THE MAIN OWNER OF THE LOUNGE'S ATTENTION NOT ANYONE ELSE</option><option>8) 1ST WARNING 2ND EJECTED 3RD BANNED IF YOU BREAK THE RULES!! HAVE FUN AND ENJOY YOURSELF.</option><table align="middle"><tr><td></td></tr></table></select>
Now this part would be where your buttons for JOIN, DRINKS, MEMBERS,BANNED would go.</center>HERE ARE EXAMPLES OF BUTTONS THAT CAN BE MADE:
By adding the < a href code will enable the join button and the others to become functional in the lounge.AN EXAMPLE OF THIS CODE WOULD BE AS FOLLOWS:
< a href = "http://www.fubar.com/mylounges.php?join=75318 " target= " _blank " >
THE FOLLOWING CLICKABLE CODES ARE WHAT MAKES EACH BUTTON DO WHAT IS SUPPOSED TO DO:
JOIN: < a href= "http://www.fubar.com/mylounges.php?join=LOUNGE NUMBER GOES HERE" target=" _blank " >
DRINKS: < a href= " http://www.fubar.com/lounge_round.php?lid=LOUNGE NUMBER GOES HERE" target= "_blank " >
MEMBERS: < a href= "http://www.fubar.com/new_loungemembers.php?lid=LOUNGE NUMBER GOES HERE" target= "_blank " >
BANNED: < a href= "http://www.fubar.com/new_loungebanned.php?lid=LOUNGE NUMBER GOES HERE " >
AND NOW TO SHOW YOU A WORKING EXAMPLE OF THESE CODES TOGETHER WITH THE DESIRES GRAPHIC THE CODE WILL LOOK AS FOLLOWS:
< a href ="http://www.fubar.com/mylounges.php?join=YOUR LOUNGE # HERE" target= "_blank " >< img src=" http://images.cooltext.com/1795609.png " width="200" height="104" alt="JOIN" / ></a>
THESE ARE EXAMPLES OF WHAT THE FINISHED CODING FOR THE BUTTONS SHOULD BE WITH THE CORRECT LOUNGE NUMBERS IN THE CODE AND THE PROPER FORMATE OF THE BUTTONS AND THIS IS HOW THEY SHOULD BE LAYED OUT:
<a href="http://www.fubar.com/mylounges.php?join=YOUR LOUNGE # GOES HERE" target="_blank"><img src="http://images.cooltext.com/1795609.png" width="200" height="104" alt="JOIN" /></a>
<a href="http://www.fubar.com/lounge_round.php?lid=YOUR LOUNGE # GOES HERE" target="_blank"><img src="http://images.cooltext.com/1795612.png" width="200" height="105" alt="DRINKS" /></a>
<a href="http://www.fubar.com/new_loungemembers.php?lid=YOUR LOUNGE # GOES HERE" target="_blank"><img src="http://images.cooltext.com/1795614.png" width="200" height="104" alt="MEMBERS" /></a>
<a href="http://www.fubar.com/new_loungebanned.php?lid=YOUR LOUNGE # GOES HERE"><img src="http://images.cooltext.com/1795616.png" width="200" height="113" alt="DOOMED" /></a>
THIS SECTION WILL EXPLAIN HOW YOU ADD A DIRECT IMAGE LINK INTO A CODE TO MAKE IT SHOW UP IN YOUR FUBAR LOUNGE:
NOW THERE ARE VARIOUS HOSTING SITES THAT YOU CAN USE TO HOST UR PICS THAT YOU USE IN YOUR CODING.
1. PHOTOBUCKET
2. IMAGESHACK (WHICH YOU DONT NEED A ACCOUNT WITH THEM TO HOST UR IMAGES) I USE THIS ONE FAITHFULLY.
3. TINYPIC (I HAVE HEARD OF THIS ONE BUT I HAVE NEVER USED IT)
NOW FOR THE IMPORTANT STEP HERE IS WHAT IS A DIRECT IMAGE LINK CODE:
< img src = " http://img811.imageshack.us/img811/4691/00163199.jpg " border = " 0 " width = " 200 " height = " 100 " / > < / a >
SO THIS IS WHAT IT LOOKS LIKE WHEN IT IS ALL ADDED TOGETHER IN THE RIGHT FASHION:
<img src="http://img811.imageshack.us/img811/4691/00163199.jpg" border="0" width="200" height="100 "/></a>
NOW FOR THE REST OF THE LOUNGE MOTD SECTION TRAINING EXERCISES:
NOW RIGHT ABOUT NOW YOU ARE PROBABLY ASKING YOURSELF WHERE DOES THE LOUNGE BACKGROUND GOE IN?
WELL I AM GOING TO ANSWER THAT RIGHT NOW AND IT IS RATHER SIMPLE TO SHOW YA.
HERE IS THE BACKGROUND AND WHERE AND HOW IT IS SUPPOSED TO BE ADDED IN THE LOUNGE MOTD SECTION!!!
EXAMPLE:
< style >
/* DONT ADD ANYTHING BELOW THIS LINE EXCEPT THE BACKGROUND */
.new_lounge_wrapper {visibility: visible;background-color: #000000;
background-position: center center;
background-attachment: fixed;
background-image: url(background image here);
background-repeat: repeat;}
< / style >
THIS IS THE WAY THAT THE BACKGROUND SHOULD BE PUT IN THE LOUNGE MOTD SECTION.<BR><BR><BR>NOW HERE IS WHAT THE MOTD LOOKS LIKE WITH ALL THE ABOVE LISTED IN THE RIGHT ORDER IN THE CODING.
EXAMPLE:
<center><center><a href="http://www.fubar.com/edit_new_lounge.php?lid=lounge number here" target=" _blank "><img src="http://images.cooltext.com/1795676.gif" width="400" height="175" alt="TEST LOUNGE"></a><br /><br /><br /><br /><center><br><font face="segoe script" color="#F5F5F5" size="6pt"><marquee bgcolor="transparent" direction="left" loop="30" width="75%"><strong>**~WELCOME TO YOUR LOUNGE NAME GOES HERE~***LOUNGE RULES***~PLEASE TAKE A MINUTE TO READ~**1) NO DRAMA OF ANY KIND OR EJECTED IMMEDIATELY!!2) NO YAHOO YIM'S IN THE LOUNGE!!*3) NO LURKING MUST BE STAFF TO IDLE IN LOUNGE!!*4) NO BASHING DJ'S OR MUSIC OR YOU WILL BE BANNED ON THE SPOT!!*5) NO LINK DROPPING !!*6) MUST HAVE PICTURE IN PROFILE AND MUST HAVE A PROFILE !!*7) IF YOU HAVE A PROBLEM BRING IT TO THE MAIN OWNER OF THE LOUNGE'S ATTENTION NOT ANYONE ELSE *8) 1ST WARNING 2ND EJECTED 3RD BANNED IF YOU BREAK THE RULES!! HAVE FUN AND ENJOY YOURSELF.</strong></marquee></font><br><br><br><center><a href="http://www.fubar.com/mylounges.php?join=YOUR LOUNGE # GOES HERE" target="_blank"><img src= "http://images.cooltext.com/1795609.png" border="0" width="200" height="100" alt="photobucket" /></a>
<a href="http://www.fubar.com/lounge_round.php?lid=YOUR LOUNGE # GOES HERE" target="_blank"><img src="http://images.cooltext.com/1795612.png" border="0" width="200" height="100" alt="photobucket" /></a>
<a href="http://www.fubar.com/new_loungemembers.php?lid=YOUR LOUNGE # GOES HERE" target="_blank"><img src= "http://images.cooltext.com/1795614.png" border="0" width="200" height="100" alt="photobucket" /></a>
<a href=" http://www.fubar.com/new_loungebanned.php?lid=YOUR LOUNGE # GOES HERE" target="_blank"><img src= "http://images.cooltext.com/1795616.png" border="0" width="200" height="100" alt="photobucket" /></a><br /><br /><br />CAM CODES WOULD GO HERE<BR>YOU CAN USE EITHER SMOTRI, LIVEVIDEO, U-STREAM, BLOG TV, OR STICKCAM FOR LOUNGE CAMS<BR><BR><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0"
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNj
I1MDIwMTA1OTMmcHQ9MTI2MjUwMjA*MjI5NiZwPTEwMjMzMSZkPSZnPTEmbz1mYj
NhYjlhNGU4NDQ*YTJjOWY*Mzc5ZDIzMjVlMWM2OCZvZj*w.gif" /><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200"
height="200"><param name="wmode" value="opaque"><param name="allownetworking" value="internal"><param name="movie" value="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad&file=4xDODLzLaLva4LuOrLtLDLvODO4OCOtO
EOYOvxmL4xDxEOYO4OrxzxvaEOaOzOELDL1LCLzLrxDLD2nLYLtLuL4L1LrL&bufferT
ime=3&autoStart=false&str_lang=eng&xmlsource=http%3A%2F%2Fpics.smotri.com
%2Fcskins%2Fglamour%2Fskin_color.xml&xmldatasource=http%3A%2F
%2Fpics.smotri.com%2Fskin_ng.xml"><param name="allowScriptAccess" value="Never"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#ffffff"><embed height="200" width="200"
flashvars="file=YzuSu9t9p9rqY9DSv9z9u9rSuSYSESzSCS4Srz19YzuzCS4SYSvztzrqCSpSt
SC9u9m9E9t9vzu9u80949z9D9Y9m9v9&xmlsource=http%3A%2F
%2Fpics.smotri.com%2Fcskins%2Fglamour%2Fskin_color.xml&str_lang=eng"
allowscriptaccess="Never" wmode="opaque" quality="high" bgcolor="#FFFFFF"
name="broadcast_player" src="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad" type="application/x-shockwave-flash"
allownetworking="internal"></embed></param></param></param></param></param>
</param></object><img style="visibility:hidden;width:0px;height:0px;" border="0"
width="0" height="0"
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNj
I1MDI4MjA4MjgmcHQ9MTI2MjUwMjg*MDgyOCZwPTEwMjMzMSZkPSZnPTEmbz1mYj
NhYjlhNGU4NDQ*YTJjOWY*Mzc5ZDIzMjVlMWM2OCZvZj*w.gif" /><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200"
height="200"><param name="wmode" value="opaque"><param name="allownetworking" value="internal"><param name="movie" value="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad&file=C8aBa6v6m6r8n6DBt6r6a6zBaBCB4BrBYB
EBz8n6C8a8YBEBCBt8C8r8E6pBvBY6a60646v6E846azm6E6r6p6C6a6C6&bufferTime=
3&autoStart=false&str_lang=eng&xmlsource=http%3A%2F%2Fpics.smotri.com
%2Fcskins%2Fglamour%2Fskin_color.xml&xmldatasource=http%3A%2F
%2Fpics.smotri.com%2Fskin_ng.xml"><param name="allowScriptAccess" value="Never"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#ffffff"><embed height="200" width="200"
flashvars="file=pwE2Ee0etenwreY2meneEe12E2p2u2n2D2a21wrepwEwD2a2p2mwpwn
waeC202DeEeveue0eawueEOteaeneCepeEepe&xmlsource=http%3A%2F
%2Fpics.smotri.com%2Fcskins%2Fglamour%2Fskin_color.xml&str_lang=eng"
allowscriptaccess="Never" wmode="opaque" quality="high" bgcolor="#FFFFFF"
name="broadcast_player" src="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad" type="application/x-shockwave-flash"
allownetworking="internal"></embed></param></param></param></param></param>
</param></object><img style="visibility:hidden;width:0px;height:0px;" border="0"
width="0" height="0"
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNj
I1MDMxNzIzNTkmcHQ9MTI2MjUwMzE3OTA2MiZwPTEwMjMzMSZkPSZnPTEmbz1mYj
NhYjlhNGU4NDQ*YTJjOWY*Mzc5ZDIzMjVlMWM2OCZvZj*w.gif" /><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200"
height="200"><param name="wmode" value="opaque"><param name="allownetworking" value="internal"><param name="movie" value="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad&file=m7zez2D2C2m7E24ep2u2z2aezemeneue0e
1ea742m7z70e1emep7m7m7n2m2De02z2Y2n2D207r2zLC212u2t2m2v2a2&bufferTime
=3&autoStart=false&str_lang=eng&xmlsource=http%3A%2F%2Fpics.smotri.com
%2Fcskins%2Fglamour%2Fskin_color.xml&xmldatasource=http%3A%2F
%2Fpics.smotri.com%2Fskin_ng.xml"><param name="allowScriptAccess" value="Never"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#ffffff"><embed height="200" width="200"
flashvars="file=r20w07E7u7r2D7pw47C707Yw0wrwtwCwzwvwY2p7r202zwvwrw42r2r
2t7r7Ewz707a7t7E7z2m70xu7v7C7n7r717Y7&xmlsource=http%3A%2F
%2Fpics.smotri.com%2Fcskins%2Fglamour%2Fskin_color.xml&str_lang=eng"
allowscriptaccess="Never" wmode="opaque" quality="high" bgcolor="#FFFFFF"
name="broadcast_player" src="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad" type="application/x-shockwave-flash"
allownetworking="internal"></embed></param></param></param></param></param>
</param></object><img style="visibility:hidden;width:0px;height:0px;" border="0"
width="0" height="0"
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNj
I1MDM*NTMxMDkmcHQ9MTI2MjUwMzQ1OTU2MiZwPTEwMjMzMSZkPSZnPTEmbz1m
YjNhYjlhNGU4NDQ*YTJjOWY*Mzc5ZDIzMjVlMWM2OCZvZj*w.gif" /><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200"
height="200"><param name="wmode" value="opaque"><param name="allownetworking" value="internal"><param name="movie" value="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad&file=02rwr7p7Y7u2CwEwD7a7r7uwrw0w1waw
mwnwu2E702r2mwnw0wD202u2uw07pwm7r7C717p7r2C7rxY7m7z717t7C7v7&buffer
Time=3&autoStart=false&str_lang=eng&xmlsource=http%3A%2F%2Fpics.smotri.com
%2Fcskins%2Fglamour%2Fskin_color.xml&xmldatasource=http%3A%2F
%2Fpics.smotri.com%2Fskin_ng.xml"><param name="allowScriptAccess" value="Never"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#ffffff"><embed height="200" width="200"
flashvars="file=tz1S19Y9p9EzDSuSC94919ES1StSrS4SvSzSEzu9tz1zvSzStSCztzEzESt9YSv91
9D9r9Y91zD918p9v9n9r909D9m9&xmlsource=http%3A%2F%2Fpics.smotri.com
%2Fcskins%2Fglamour%2Fskin_color.xml&str_lang=eng" allowscriptaccess="Never"
wmode="opaque" quality="high" bgcolor="#FFFFFF" name="broadcast_player"
src="http://pics.smotri.com/broadcast_play.swf?
208c85ba5bd8926d97283fd336d3b3ad" type="application/x-shockwave-flash"
allownetworking="internal"></embed></param></param></param></param></param>
</param></object><BR><BR>
</center></center>< style >/* DONT ADD ANYTHING BELOW THIS LINE EXCEPT THE BACKGROUND */.new_lounge_wrapper { visibility: visible; background-color: #000000; background-position: center center; background-attachment: fixed; background-image: url(http://img222.imageshack.us/img222/69/1597.jpg); background-repeat: repeat;
}< / STYLE >
OK NOW HERE IS YET MORE INFORMATION THIS IS MAINLY USED IN THE CSS SKIN SECTION OF THE LOUNGE CODES BUT SOME CODERS USE THEM IN THE MOTD SECTIONS AS WELL THAT WILL HELP YOU IN YOUR BEGINNING INTRODUCTION TO CODING AND THESE ARE JUST MULTIPLE THINGS THAT I AM ADDING IN HERE THAT YOU SHOULD HAVE AND THAT YOU ARE GOING TO HAVE TO KNOW TO BE SUCCESSFUL AS A LOUNGE CODER.
Here is a CSS Color chart for you to use as a reference when you are coding and have to change the colors for fonts and borders.
This is on the is following website:
The border-color property is used to set the color of the border. The color can be set by:
* name - specify a color name, like "red" * RGB - specify a RGB value, like "rgb(255,0,0)" * Hex - specify a hex value, like "#ff0000"
CSS COLOR CHART:
AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DodgerBlue #1E90FF FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateGray #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32
CSS BORDER STYLES:The border-style property specifies what kind of border to display.
Remark None of the border properties will have ANY effect unless the border-style property is set!
In CSS it is possible to specify different borders for different sides:
none: Defines no border
dotted: Defines a dotted border EXAMPLE:(.........................................)
dashed: Defines a dashed border EXAMPLE: (=================)
solid: Defines a solid border EXAMPLE: ( _____________________ )
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border.
The effect depends on the border-color value
THIS IS FOR FONTS:
CSS font properties define the font family, boldness, size, and the style of a text.On computer screens, sans-serif fonts are considered easier to read than serif fonts.
Serif: Times New Roman
Georgia: Serif fonts have small lines at the ends on some characters
Sans-serif : Arial
Verdana "Sans": means without - these fonts do not have the lines at the ends of characters
Monospace : Courier New
Lucida Console: All monospace characters has the same width
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example: p{font-family:"Times New Roman", Times, serif;}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
* normal - The text is shown normally
* italic - The text is shown in italics
* oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example: p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
* Sets the text to a specified size
* Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
* Absolute size is useful when the physical size of the output is known
Relative size:
* Sets the size relative to surrounding elements
* Allows a user to change the text size in browsers
Remark If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:
Exampleh1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
All CSS Font Properties:
font Sets all the font properties in one
declaration font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit 1
font-family Specifies the font family for text
family-name
generic-family
inherit 1
font-size Specifies the font size of text
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
Links can be styled in different ways.
Styling Links
Links can be style with any CSS property (e.g. color, font-family, background-color).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
* a:link - a normal, unvisited link
* a:visited - a link the user has visited
* a:hover - a link when the user mouses over it
* a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
* a:hover MUST come after a:link and a:visited
* a:active MUST come after a:hover
Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
FOR THOSE OF YOU WHO WANTED ME TO LIST THE CAMS SECTION IN THIS BLOG. THERE ARE A FEW PLACES WHERE YOU CAN GET CAMS YET, BUT MOST OF THE SITES HAVE STOPED HOSTING OF WEBCAMS. THE ONLY ONES THAT I KNOW OF ARE GOING TO BE LISTED BELOW:
1. http//:www.tikilive..com
2. http//: www.ustreamtv.com
3. https://tokbox.com/opentok/
4. http//:www.smotri.com
IF YOU HERE OF ANY OTHER CAM HOSTING SITES OR KNOW OF ANY, I WOULD APPRECIATE IT IF YOU WOULD KINDLY RELAY THE SITE NAME IN THE COMMENTS SECTION OF THIS BLOG AND I WILL LIST IT HERE FOR ALL THE OTHERS WHO ARE LOOKING FOR CAMS SO THAT THEY WILL HAVE THEM ALSO.
