VisioList PHP TopList
OSempire
Old 03-18-2011, 05:47 AM   #1
JayJay
Senior Member
Level 3 Access
Points: 1,909, Level: 1 Points: 1,909, Level: 1 Points: 1,909, Level: 1
Activity: 0% Activity: 0% Activity: 0%
 
JayJay's Avatar
 
Join Date: Oct 2010
Location: State of confusion -- Come on; you're smart; figure it out!
Posts: 122
Thanks: 24
Thanked 15 Times in 8 Posts
Groans: 0
Groaned at 0 Times in 0 Posts
JayJay is a jewel in the rough
Lightbulb How To Offer Your Members Multiple Styled Vote Buttons

How To Offer Your Members Multiple Styled Vote Buttons


Hello everyone,

This tutorial is for those of you who wish to use multiple styled buttons on your Aardvark topsites list. In other words, the following code example will allow your members to choose from different styles of vote buttons after they have joined your site.

Being as it is a rather complicated process to explain in words, I felt that the best approach would be to simply share an altered version of my own code.

The basic steps that you need to follow in order to offer your members multiple buttons are the following:

1. Create your various buttons in Photoshop, or in some other graphics program of your choice. Make them whatever colors, styles and sizes that you like.

2. After creating your buttons, make sure that you optimize them so that they are the smallest size possible.

3. Upload the new buttons to the chosen directory on your topsites web server.

4. Now it is time to perform the heavy duty stuff; that is, editing the link_code.html file that is located in the folder of the skin that you are currently using.

5. IMPORTANT: Back up your original link_code.html file before you begin the following steps. In other words, work on a copy. Did you get that?

6. To make this as easy as possible for you to understand, I am going to teach by example, using altered code from my own topsite. You can edit this code to your heart's delight, but you must keep a few things in mind:

a. Where it says Your-Site-Name-Here, you obviously need to replace the text with your list's name.

b. Where it says /MyImages/, you need to replace the text with the actual path to whatever folder you are using to store your new button images.

c. Where it says Your-Button-Name-Style05.gif, you need to replace the text with the actual name of each of your buttons. Make certain that you change the file extension to whatever graphic format you are using for your buttons; that is, PNG, JPG, GIF, etc.

d. Where it says width="240" height="60", you need to replace the text with the actual dimensions of each of your buttons.

7. Now, here is the sample code to use in your link_code.html file:

Code:
<script language="Javascript" type="text/javascript">
<!--
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>
		<div style="text-align: center;">
			<h3>Vote Buttons HTML Link Code
			</h3>
		</div>
		<br>
		Below you will find the various styles of vote buttons that are available for Your-Site-Name-Here members.<br>
		<br>
		After deciding which button you would like to use on your site, do the following:<br>
		<br>
		<strong>1.</strong> Click on the <strong>select all</strong> link that is found below the button image of your choice. Clicking on the <strong>select all</strong> link will select all of the HTML code that is in the text box.<br>
		<br>
		<strong>2.</strong> Next, use the <strong>copy</strong> keyboard command for your particular computer platform -- such as command-c or control-c -- to copy the HTML code into your system's clipboard, pasteboard, or whatever it is called on your platform.<br>
		<br>
		<strong>3.</strong> This next step may be different, depending on how and where you have your website hosted:<br>
		<br>
		<ul>
			<li>If you operate your own web server and have direct access to the HTML files which comprise your site, simply use your computer's keyboard <strong>paste</strong> command -- such as command-v or control-v -- to paste the HTML code into the area of your home page HTML document where you would like for the Your-Site-Name-Here button to be displayed, and save the changes to the file.<br>
			<br>
			</li>
			<li>If your website is hosted at an ISP, or at some other location, assuming that you have access to the HTML files which comprise your site, after using your computer's keyboard <strong>paste</strong> command -- such as command-v or control-v -- to paste the HTML code into the area of your home page HTML document where you would like for the Your-Site-Name-Here button to be displayed, you must save the changes to the document, and then upload the new version of your home page HTML document to the proper location on your ISP's web server. Obviously, you already know where that is, if you are running a website.<br>
			<br>
			</li>
			<li>If you use a particular graphical web service where you do not have direct access to the HTML code which comprises your website documents, then the method that you use to insert the Your-Site-Name-Here button into your home page document may be a little different, and a bit more troublesome. This may possibly entail three steps:<br>
			<br>
			1) uploading one of our button images to your host's site<br>
			<br>
			2) adding the uploaded image to your home page document<br>
			<br>
			3) adding a link for the Your-Site-Name-Here home page to the uploaded image.<br>
			<br>
			If you encounter difficulty in doing this, we will be happy to assist you. However, please note that it will require that you exercise a bit of faith and trust, by providing us with your login name and password. In such a case, we can usually have the button properly installed on your home page in a matter of fifteen minutes.<br>
			</li>
		</ul>
		<br>
		<strong>Important:</strong> Please copy and paste the HTML code exactly as you see it in the text area below your chosen button. Do not alter it in any way, or else it may not work properly, if at all, and/or you may not receive credit for visitors who click on your button.<br>
		<br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/images/Your-Button-Name-Default-Button.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button1">
			<a href="javascript:selectAll('button1.select1')">Select All</a><br>
			<br>
<textarea name="select1" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/images/Your-Button-Name-Default-Button.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
		<br>
		<br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style02.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button2">
			<a href="javascript:selectAll('button2.select2')">Select All</a><br>
			<br>
<textarea name="select2" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style02.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
		<br>
		<br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style03.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button3">
			<a href="javascript:selectAll('button3.select3')">Select All</a><br>
			<br>
<textarea name="select3" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style03.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
		<br>
		<br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style04.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button4" id="button4">
			<a href="javascript:selectAll('button4.select4')">Select All</a><br>
			<br>
<textarea name="select4" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style04.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
		<br>
		<br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style05.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button5">
			<a href="javascript:selectAll('button5.select5')">Select All</a><br>
			<br>
<textarea name="select5" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style05.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
		<br>
        <br>
		<br>
		<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style06.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
		<br>
		<form name="button6">
			<a href="javascript:selectAll('button6.select6')">Select All</a><br>
			<br>
<textarea name="select6" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style06.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea> 
		</form>
As you can see, the way the above code works is by using a javascript to select the actual code in the box/textarea that your member is going to use.

8. IMPORTANT: Please note that this code works in pairs. Please also note that all of the parameter names and elements must match each other in each of the pairs. In other words, you will see name="button5", ('button5.select5'), name="select5" and Your-Button-Name-Style05.gif all in the same chunk of code. Follow this same example for each button that you make.

The above code is straightforward, and should be easy to implement, since it is mainly copying and pasting it into your link_code.html file, and then simply adjusting file paths and file names accordingly.

However, if you encounter any difficulties, I will try to help you, my time permitting. I keep extremely busy here doing the Lord's Work, so please be mindful of that fact. Thanks!
JayJay is offline   Reply With Quote
The Following 3 Users Say Thank You to JayJay For This Useful Post:
alinvrajitorul (02-09-2012), blugemstone (03-18-2011), buves18 (12-26-2012)
Old 03-18-2011, 07:47 AM   #2
blugemstone
Junior Member
designer
Level 2 Access
Points: 2,968, Level: 1 Points: 2,968, Level: 1 Points: 2,968, Level: 1
Activity: 50% Activity: 50% Activity: 50%
 
blugemstone's Avatar
 
Join Date: Jun 2007
Location: UK
Posts: 25
Thanks: 9
Thanked 4 Times in 3 Posts
Groans: 0
Groaned at 0 Times in 0 Posts
blugemstone is a jewel in the rough
Thanks JayJay, just what I was looking for! Have implemented that into my site now

I tweaked the Javascript code to suit my needs. Instead of supplying a 'select all' link in order for the code in a box to be selected, members can simply click within each individual box similar to the default method. Might be useful?

Copy and paste this Javascript code into link_code.html replacing the default or one supplied by JayJay:
Code:
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
Then just change the textarea id's for each button image you wish to supply so each has a unique name. Make sure the onClick name matches up with the textarea id:
HTML Code:
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault1.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
<br />
<form>
<textarea id="txtarea1" onClick="SelectAll('txtarea1');" rows="5">
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault1.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br />

<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault2.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
<br />
<form>
<textarea id="txtarea2" onClick="SelectAll('txtarea2');" rows="5">
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault2.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br />
blugemstone is offline   Reply With Quote
The Following User Says Thank You to blugemstone For This Useful Post:
alinvrajitorul (02-09-2012)
Old 03-18-2011, 07:54 AM   #3
JayJay
Senior Member
Level 3 Access
Points: 1,909, Level: 1 Points: 1,909, Level: 1 Points: 1,909, Level: 1
Activity: 0% Activity: 0% Activity: 0%
 
JayJay's Avatar
 
Join Date: Oct 2010
Location: State of confusion -- Come on; you're smart; figure it out!
Posts: 122
Thanks: 24
Thanked 15 Times in 8 Posts
Groans: 0
Groaned at 0 Times in 0 Posts
JayJay is a jewel in the rough
Hello Gemma. Glad to hear that you got it working so fast. But, but...oh my gosh! OH MY GOSH! You ch...ch...changed my code???!!!

Just joking.
JayJay is offline   Reply With Quote
Old 03-18-2011, 08:09 AM   #4
blugemstone
Junior Member
designer
Level 2 Access
Points: 2,968, Level: 1 Points: 2,968, Level: 1 Points: 2,968, Level: 1
Activity: 50% Activity: 50% Activity: 50%
 
blugemstone's Avatar
 
Join Date: Jun 2007
Location: UK
Posts: 25
Thanks: 9
Thanked 4 Times in 3 Posts
Groans: 0
Groaned at 0 Times in 0 Posts
blugemstone is a jewel in the rough
I know. I'm bad.
blugemstone is offline   Reply With Quote
Old 02-09-2012, 03:52 PM   #5
alinvrajitorul
Junior Member
Level 2 Access
Points: 137, Level: 1 Points: 137, Level: 1 Points: 137, Level: 1
Activity: 0% Activity: 0% Activity: 0%
 
alinvrajitorul's Avatar
 
Join Date: Feb 2012
Posts: 12
Thanks: 5
Thanked 0 Times in 0 Posts
Groans: 3
Groaned at 0 Times in 0 Posts
alinvrajitorul is a jewel in the rough
Cool

Quote:
Originally Posted by blugemstone View Post
Thanks JayJay, just what I was looking for! Have implemented that into my site now

I tweaked the Javascript code to suit my needs. Instead of supplying a 'select all' link in order for the code in a box to be selected, members can simply click within each individual box similar to the default method. Might be useful?

Copy and paste this Javascript code into link_code.html replacing the default or one supplied by JayJay:
Code:
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
Then just change the textarea id's for each button image you wish to supply so each has a unique name. Make sure the onClick name matches up with the textarea id:
HTML Code:
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault1.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
<br />
<form>
<textarea id="txtarea1" onClick="SelectAll('txtarea1');" rows="5">
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault1.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br />

<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault2.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
<br />
<form>
<textarea id="txtarea2" onClick="SelectAll('txtarea2');" rows="5">
<a href="{$list_url}/{$verbose_link}" title="{$list_name}" target="_blank"><img src="{$list_url}/img/pgdefault2.jpg" width="88" height="31" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br />
Nice simplyfication
alinvrajitorul is offline   Reply With Quote
Reply

Tags
buttons, link_code, multiple, styled, vote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Multiple Buttons? Koby Aardvark Topsites PHP 1 03-28-2010 09:21 AM
Is it possible to have multiple buttons? brainst0rm Aardvark Topsites PHP 1 02-28-2010 03:57 PM
Buttons and inactive members foom Mod Requests 1 02-25-2008 05:31 AM
Buttons not showing on members sites soccer100 Aardvark Topsites PHP 3 05-11-2007 03:18 PM
Need Help! wrong ranking button / falscher rank auf den Vote Buttons meisterjoshi Aardvark Topsites PHP 2 04-16-2007 09:57 AM


VisioList Demo

Powered by vBulletin Copyright ©2000 - 2014, , Jelsoft Enterprises Ltd