"Some are born great, some achieve greatness, and some have greatness thrust upon ’em" - William Shakespeare
When using CSS it would be good to know some basic Javascript and HTML, as some things you can not do with CSS but easily with JS or HTML.
One thing, always end your style tags before the html or javascript!
First off, with HTML you can easily link to a .css file...
<LINK REL=stylesheet HREF="
http://slaytanist.co.uk/zapper/Solar/Solar_Eclipse.css" TYPE="text/css">
Replace the red with a link to a .css file, many upload locations like ripway will allow you have any ending you choose, so just make a new file and have the extension as .css
Always remember to have <script></script> around any javascript code!
2 important things for javascript,
First the location CSS. This is if you want CSS to appear on a certain page, and you can't edit every page seperately or you want one css file for all pages. This is good for things like forums.
if ( location.search.indexOf('
act=calendar')!=
-1) {
document.write("
!!!!")}
Replace the red with what you want to appear on a certain page, the blue becomes the extra URL, so "
http://z13.invisionfree.com/SomeForum/index.php?showforum=46" would have "showforum=46" for it to be only on that page, and any page that has that extra URL in it so if it was:
"
http://z13.invisionfree.com/SomeForum/index.php?showforum=46&Delete" then it would also have the effect on it.
The green will reverse the effect, while in "-" the effect will be to that page only, while in "+" the effect will be to every other page
except that page!
When using for CSS, you'll want to use style tags and put the css inside, like so:
if ( location.search.indexOf('act=Search&f=')!=-1) {
document.write("
<style>.tableborder { border:0px solid #000000;background-color:#000000; }</style>")}
Always remember to have <script></script> around any javascript code!
2nd javascript is the browser(version and type), this can be combined with the above javascript trick, as I will display at the end.
Credit for this towards godman123/SyKo of the IF pussycore lamers.
The code initially:
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4) {document.write("
Browser only stuff")}</script>
Initially lets look at the line that says "if (browser_type=="
Microsoft Internet Explorer"&&browser_version
> =
4)"
The red is the browser name that the coding will only affect, Fire Fox, Safari, etc.
The blue is the version number being affected,
while if the green is there and faces > then blue and any version greater than blue will be affected.
If the green is < then blue and any version lower than blue will be affected. If the green is not there then only the blue will be affected, no other versions.
Inside the "document.write("
!!!!") " is essentially the same as the same as the location JS. Just put your style tags and then put your CSS inside.
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4) {document.write("
<style>.darkrow3 a:active { text-decoration: none; color: #727EA2; border:1px solid #464646; }</style>")}
Getting more complicated, you can do this with certain pages and browser type at the same time by combining the codes...
Inside the "document.write("
!!!!") " you just put the JS from before so:
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4) {document.write("if ( location.search.indexOf('act=site')!=-1 ){document.write("
<style>.maintitle { background-color: #151515; }</style>")}")}
Now in IE version 4 or above and on act=site of your website or forum your class "maintitle" will have a background coloured #151515...
Want an extensive example:
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4) {document.write("<style>div.darkrow3 a:link, div.darkrow3 a:visited, div.darkrow3 a:active { text-decoration: none; color: #727EA2; border:1px solid #464646; border-bottom:1px solid #151515; border-right:1px solid #151515; padding:4px;} .dlight { background-color: #282828; border:1px solid #151515!important; background: url(
http://img63.imageshack.us/img63/3237/dlightpx4.png);}</style>")
if ( location.search.indexOf('act=site')!=+1 ){document.write("<style>.maintitle { background-color: #151515; background-position: center; vertical-align:middle; font-weight:bold; color: #CCCCCC; padding:5px 0px 9px 30px; background-image: url(
http://img123.imageshack.us/img123/7531/maintitler2dv7.png); }</style>")}
if ( location.search.indexOf('act=Login&CODE=')!=-1) {
document.write("<style> ..maintitle {border-bottom:1px solid #464646; background-color: #151515; background-position: center; vertical-align:middle; font-weight:bold; color: #CCCCCC; padding:5px 0px 9px 30px; background-image: url(
http://img207.imageshack.us/img207/9450/maintitlerik6.png); </style>")}}</script>
