ezdesign articles and codes
|
|
code snippets
|
|
Written by atlass
|
|
Thursday, 17 February 2005 |
Setting up a style switcher is pretty easy, all you need is a javascript file, some css files and a bit of code for your visitors to click and choose their style.
So here's what you do - first off, I suggest you create your stylesheets. If you're doing this for your ezboard, then create them in the board so you can see how they look. You need at least two, obviously. When you've done that, upload them to your own webhost and get the urls. Yes, you need a webhost.
Let's assume you have a choice of three stylesheets - the code to link to them will look like this:
<link rel="stylesheet" href="http://mywebsite.com/css/default.css" type="text/css" title="default" />
<link rel="alternate stylesheet" href="http://mywebsite.com/csss/option1.css" type="text/css" title="option1" />
<link rel="alternate stylesheet" href="http://mywebsite.com/css/option2.css" type="text/css" title="option2" />
As you can see, the one you want to load as default is the "stylesheet" while the optional choices are "alternate stylesheet".
Next you add the javascript that will control the behaviour of the switching device and store a cookie. This javascript must appear after the link tags.
<script language="JavaScript" type="text/javascript" src="http://mywebsite.com/js/switcher.js"></script>
You can download that javascript from here - right click (or alt click) and save it.
And lastly, place some code to allow your user to make their choice - you can put this on a single page if you'd prefer it to not be repeated on every page. The link tags and javascript must be present on all pages that you want to use the styles, however.
<a href="#" onclick=setActiveStyleSheet('default'); return false; title="plain">plain</a> |
<a href="#" onclick=setActiveStyleSheet('option1'); return false; title="corporate">coporate</a> |
<a href="#" onclick=setActiveStyleSheet('option2'); return false; title="lovey">casual</a>
In the link tags, what is set as title is the value that these links use to choose the stylesheet. You can change default, option1 and option2 to anything you like, as long as you change it in both places. The title and name in the above links can be anything you like.
If you want to have another stylesheet that is used no matter what, then you set up up with rel="stylesheet" and OMIT the title from the link tag.
for example:
<link rel="stylesheet" href="http://mywebsite.com/css/persistant.css" type="text/css" />
That's called a persistant stylesheet.
And that's pretty much all there is to it! If you want to get more technical, why not meader over to a list apart, to where I got it from in the first place? |
|
|
code snippets
|
|
Written by atlass
|
|
Tuesday, 08 June 2004 |
You need to have a Gold board to use this javascript, and you also need a webhost that will allow remote linking of .css files.
First, paste this script into the first box in your custom html page:
<script>
//Programming: ~kanwulf~,
//Functions are free for private use.
// This turns on the style sheet name utility built into this script
// turning on the utility turns off the linked style sheet
var css_name =1; // 1 = ON 0 = OFF
// Enter your boards id without the preceding "b"
// ex: if the id is bmyboard use myboard
var board_name = 'atlass';
// Enter the full path to the directory where your .css files are located
var css_base = 'http://ezdesign.spayce.com/html/demo/';
// Don't modify code below unless you understand the JavaScript used.
var reg_ex = new RegExp("/[bf]" + board_name + "(\\w+)", "i");
var page_url = location.href;
reg_ex.test(page_url);
if (reg_ex.test(page_url)) {
var css = RegExp.$1 + ".css";
}else {
var css = board_name + ".css";
}
if (css_name){
alert ("Name your style sheet " + css + " for this forum.");
}else {
var style_sheet = '<link rel="stylesheet" href="' + css_base + css + '">';
document.write(style_sheet);
}
</script>
You need to edit the two bold areas to be your board ID (NOT including the preceeding b in the ID) and the folder in which your .css files are to be stored.
When you first install this script, it has a naming function turned on - to use this, visit any of your forums, and you will get a message telling you what to call the .css file for that forum.
Once you have created and uploaded the .css file to the correct place, edit the script, changing this line:
var css_name =0; // 1 = ON 0 = OFF
where css_name =1 becomes css_name =0
Now when you visit your board, the .css files should be used for each forum as expected.
To see this in action, visit one of these boards: sidebar factory or css gallery - both use this script to make the forums very different from one another. |
|
|
code snippets
|
|
Tuesday, 01 March 2005 |
Editing this script is dead easy, just place your new messages image in the correct field of the custom image area as per usual. Then after that change this part of the script to the loacation of your "No New Messages" image.
var noImage = "http://www.example.com/images/NoNewPosts.gif";
Place this script, after changes, into the footer (fourth box) in your custom HTML page.
<script language="JavaScript">
// Global Variables
var docTables = document.getElementsByTagName("table");
var noImage = "http://www.example.com/images/NoNewPosts.gif";
//##- Do not Edit Below here, unless you know what your doing. --#//
// Loop through all the tables on the page.
for (tbl = 0; tbl < docTables.length; tbl++) {
// Check to see that its the Right table we are walking into.
if (docTables.item(tbl).getAttribute("width", 2) == "95%" && docTables.item(tbl).innerHTML.indexOf("# Posts") != -1) {
// Walk into the tables rows.
forumTR = docTables.item(tbl).getElementsByTagName("tr");
// Loop through all the table rows inside the table.
for (tr=0; tr < forumTR.length; tr++) {
// Walk into the rows columns.
forumTD = forumTR[tr].getElementsByTagName("td")[0];
// Run a check to make sure we have walked into the right column.
if (forumTD.className != "headings" && forumTD.getElementsByTagName("table").length == 0 && forumTD.getElementsByTagName("img").length == 0) {
// Edit the TD In the TR of the Forum table
forumTD.innerHTML = ""; // get rid of the space
no = document.createElement("img"); // Create a new image element.
no.src = noImage; // Change the SRC to the No pic Image.
no.alt = "No New Messages"; // Change the Alt Tag.
forumTD.appendChild(no); // Apend the TD to display the newly created Image.
forumTD.vAlign = "middle"; // Vertically align image
}
}
}
}
</script>
|
|
|
eztools
|
|
Saturday, 18 September 2004 |
This tool works from your hard drive and allows you to test customisations on your board without actually affecting your board. You can test javascript in it, which you can't in a test trial board. You can even use it to test and store pending Gold-board customizations from a non-Gold test board!
Go to the custom html previewer
programmed by phalen
|
|
|
|