Css And Tables

**TheKiler** · 01-15-2004, 05:27 AM

Ok I have a table, it uses an image to give the table it's color.

Code:

       &#60;tr&#62; 
        &#60;td background=&#34;toptableheader.jpg&#34; height=&#34;18&#34;&#62; 
         &#60;div align=&#34;center&#34;&#62;
  	&#60;font face=&#34;Verdana, Arial, Helvetica, sans-serif&#34; size=&#34;1&#34;&#62;
  	7th Grade Homework&#60;/font&#62;

Now I want the website to be skin enabled. Here is the skin code.

Code:

&#60;select onChange=&#34;changeskin&#40;this.options&#91;this.selectedIndex&#93;.value&#41;; window.location.reload&#40;&#41;;&#34; name=&#34;D1&#34;&#62;
&#60;option&#62;Change Skin
&#60;option&#62;
&#60;option value=&#34;lblue&#34;&#62; Light Blue
&#60;option value=&#34;black&#34;&#62; Black
&#60;option value=&#34;pink&#34;&#62; Pink
&#60;option value=&#34;plain&#34;&#62; Plain
&#60;option value=&#34;christmas&#34;&#62; Christmas
&#60;option value=&#34;girl&#34;&#62; Girly
&#60;option value=&#34;new&#34;&#62; New Years
&#60;option value=&#34;america&#34;&#62; American Patriotism
&#60;option value=&#34;cs&#34;&#62; Counter-Strike
&#60;option value=&#34;diablo&#34;&#62; Diablo II
&#60;option value=&#34;sc&#34;&#62; Starcraft
&#60;option value=&#34;wc&#34;&#62; Warcraft III
&#60;option value=&#34;wy&#34;&#62; Whitney Young
&#60;/select&#62;

Code:

&#60;script language=&#34;JavaScript&#34;&#62;
&#60;&#33;--

/*
Copyright SSdesign
*/

var scheme = getCookie&#40;&#39;template1&#39;&#41;;
if &#40;scheme == &#39;lblue&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin.2css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;black&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin3.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;pink&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin4.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;plain&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin5.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;christmas&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin6.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;girl&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin7.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;new&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin8.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;america&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin9.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;cs&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin10.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;diablo&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin11.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;sc&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin12.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;wc&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin13.css&#34;&#62;&#39;&#41;;
} else if &#40;scheme == &#39;wy&#39;&#41; {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin14.css&#34;&#62;&#39;&#41;;
} else {
document.write&#40;&#39;&#60;LINK REL=&#34;stylesheet&#34; TYPE=&#34;text/css&#34; HREF=&#34;http&#58;//us.ssxh.net/skin/skin1.css&#34;&#62;&#39;&#41;;
}


function changeskin&#40;change&#41; {
var scheme = change;
var name = &#39;template1&#39;;
var pathname = location.pathname;
var myDomain = pathname.substring&#40;0,pathname.lastIndexOf&#40;&#39;/&#39;&#41;&#41; +&#39;/&#39;;
var ExpDate = new Date &#40;&#41;;
ExpDate.setTime&#40;ExpDate.getTime&#40;&#41; + &#40;180 * 24 * 3600 * 1000&#41;&#41;;
setCookie&#40;name,scheme,ExpDate,myDomain&#41;;
}
function getCookie&#40;name&#41;{
var cname = name + &#34;=&#34;; 
var dc = document.cookie; 
if &#40;dc.length &#62; 0&#41; { 
begin = dc.indexOf&#40;cname&#41;; 
if &#40;begin &#33;= -1&#41; { 
begin += cname.length; 
end = dc.indexOf&#40;&#34;;&#34;, begin&#41;;
if &#40;end == -1&#41; end = dc.length;
return unescape&#40;dc.substring&#40;begin, end&#41;&#41;;
}
}
return null;
}

function setCookie&#40;name, value, expires, path, domain, secure&#41; {
document.cookie = name + &#34;=&#34; + escape&#40;value&#41; + 
&#40;&#40;expires == null&#41; ? &#34;&#34; &#58; &#34;; expires=&#34; + expires.toGMTString&#40;&#41;&#41; +
&#40;&#40;path == null&#41; ? &#34;&#34; &#58; &#34;; path=&#34; + path&#41; +
&#40;&#40;domain == null&#41; ? &#34;&#34; &#58; &#34;; domain=&#34; + domain&#41; +
&#40;&#40;secure == null&#41; ? &#34;&#34; &#58; &#34;; secure&#34;&#41;;
}
--&#62;
&#60;/script&#62;

How can I have CSS change the image?

**sparsely** · 01-15-2004, 08:50 AM

ummmm...
off the top of me head....

sparsely thinks:
give the TD a class/ID and set it's background-image:url(blahblahblah) properties in each stylesheet.

**Ynhockey** · 01-15-2004, 01:52 PM

Sparsley is right.

An example is:

background-image: url("http://www.ynhockey.net/stylesheets/styles.css");

However, something you should know is that a serverside skin changer > JS skin changer. Totally.

I don't know why ppl still use JS for thins like this...

**TheKiler** · 01-15-2004, 02:28 PM

I tried that. Give me more in-depth information.

**TheKiler** · 01-15-2004, 02:48 PM

How to class a table. Teach me.

**Ynhockey** · 01-15-2004, 03:22 PM

Code:

&#60;style&#62;
 &nbsp; .bg { background-image&#58;url&#40;&#34;http&#58;//www.website.com/file.jpg&#34;&#41;; }
&#60;/style&#62;

&#60;table&#62;
 &nbsp; &#60;tr&#62;
 &nbsp; &nbsp; &nbsp;&#60;td class=&#34;bg&#34;&#62;
 &nbsp; &nbsp; &nbsp; &nbsp; CONTENT HERE
 &nbsp; &nbsp; &nbsp;&#60;/td&#62;
 &nbsp; &#60;/tr&#62;
&#60;/table&#62;

____________________________________

I think you hung out with the CSS freaks at www.tutorialforums.com too much... they think that you can't possibly use CSS with tables.

**sparsely** · 01-15-2004, 09:30 PM

okay.
in teh .css file for each theme, add a line like this

Code:

.tdimg
{
background-image&#58;url&#40;/images/tdimg.gif&#41;;
}

the leading dot (.tdimg) makes it a class. you can name it whatever you want.

for each theme's css, change the url in the background-image line to the image you want to use as a table background.

then, where you have this:

<tr>
<td background="toptableheader.jpg" height="18">
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="1">
7th Grade Homework</font>

take out the background="toptableheader.jpg" and replace it with class="tdimg" (or whatever you named it in the step above.

easy

Thread: Css And Tables

Thread Tools

Bookmarks

Bookmarks

Posting Permissions