ezboard
ezdesign articles and codes

creating a style switcher
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?
 
How to apply Forum specific stylesheets
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.
 
new messages/no new messages icon
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>


 
Custom html previewer
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
 
Main Menu
Home
News
Blog
Links
Skin & Theme downloads
ezboard
content category (eztools)
FAQs/knowledge base
community
directory
authors
yuku content section (list)
ezboard content section (blog)
subscribers
community builder
Latest Skins
Top Downloads
  1. Morpheous - 1211 downloads
  2. Valentino - 1044 downloads
  3. Reaction - 986 downloads
  4. Advanced Bevel - 908 downloads
  5. Purple Dreams - 871 downloads
Popular Downloads

There are no rated downloads yet!

Top Boards
  1. Slimers Toxic Themes - 253 hits
  2. ezscripts - 178 hits
  3. bitsy's themes - 176 hits
  4. ezdesign - 147 hits
  5. Dragonfly Graphics - 113 hits
Popular Boards

Warning: Invalid argument supplied for foreach() in /home/sites/spaycec/public_html/ezdesign/v2/modules/mod_popularboards.php on line 38

pat-Warning: Template 'popularboards' does not exist.