Raeschen's button layout

From Vulpine Hollow
Revision as of 14:54, 22 February 2014 by Raeschen (Talk | contribs)

Jump to: navigation, search

For an easier to read version click here http://pastebin.com/sxnUe4cG

<html> 

<span style="color: #888888"><!-- START OF BUTTONS --></span>
<span style="color: #888888"><!-- COLORS OF BUTTONS ARE SHOWN. WIDTH, BACKGROUND-COLOR, BORDER COLOR, AND JUST 'COLOR' (FOR TEXT COLOR IN BUTTON) ARE ALL EDITABLE. THEY USE HEX CODES. GOOGLE IT. --></span>

<span style="color: #888888"><!-- TO USE THIS CODE, YOU MUST DISABLE AUTO-FORMATTING. THIS MEANS YOU WILL HAVE TO CREATE NEW PARAGRAPHS/LINES WITH A SERIES OF <BR> TAGS INSTEAD OF SIMPLY PRESSING RETURN/ENTER. EACH <BR> TAG IS ONE PRESS OF 'RETURN' --></span>


<span style="color: #888888"><!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER="1" TO BORDER="0" --></span>

    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"1000"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      
      
        <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"250"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#000000"</span><span style="color: #007700">></span>
        
        <span style="color: #888888"><!-- Button 1 --></span>
        

<span style="color: #007700"><button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">"Button1"</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">"button"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">"</span>


<span style="background-color: #fff0f0">{document.getElementById('button2') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button3') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button4') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('default') .style.display='none'}</span>


<span style="background-color: #fff0f0">if(document.getElementById('button1') .style.display=='none') {document.getElementById('button1') .style.display=''}</span>

<span style="background-color: #fff0f0">else{{document.getElementById('button1') .style.display='none'}{document.getElementById('default') .style.display=''}}"</span><span style="color: #007700">></span>

<span style="color: #888888"><!-- Name of button 1 --></span>
<span style="color: #007700"><b><u></span>- Button 1; -<span style="color: #007700"></u></b></span> 


<span style="color: #007700"></button></span>

<span style="color: #007700"></td></span>




        <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"250"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#000000"</span><span style="color: #007700">></span>
        
        <span style="color: #888888"><!-- Button 2 --></span>
        

<span style="color: #007700"><button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">"Button2"</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">"button"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">"</span>


<span style="background-color: #fff0f0">{document.getElementById('button1') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button3') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button4') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('default') .style.display='none'}</span>


<span style="background-color: #fff0f0">if(document.getElementById('button2') .style.display=='none') {document.getElementById('button2') .style.display=''}</span>

<span style="background-color: #fff0f0">else{{document.getElementById('button2') .style.display='none'}{document.getElementById('default') .style.display=''}}"</span><span style="color: #007700">></span>

<span style="color: #888888"><!-- Name of button 2 --></span>
<span style="color: #007700"><b><u></span>- Button 2; -<span style="color: #007700"></u></b></span> 


<span style="color: #007700"></button></span>

<span style="color: #007700"></td></span>



        <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"250"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#000000"</span><span style="color: #007700">></span>
        
        <span style="color: #888888"><!-- Button 3 --></span>
        

<span style="color: #007700"><button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">"Button3"</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">"button"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">"</span>


<span style="background-color: #fff0f0">{document.getElementById('button2') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button1') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button4') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('default') .style.display='none'}</span>


<span style="background-color: #fff0f0">if(document.getElementById('button3') .style.display=='none') {document.getElementById('button3') .style.display=''}</span>

<span style="background-color: #fff0f0">else{{document.getElementById('button3') .style.display='none'}{document.getElementById('default') .style.display=''}}"</span><span style="color: #007700">></span>

<span style="color: #888888"><!-- Name of button 3 --></span>
<span style="color: #007700"><b><u></span>- Button 3; -<span style="color: #007700"></u></b></span> 


<span style="color: #007700"></button></span>

<span style="color: #007700"></td></span>




        <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"250"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#000000"</span><span style="color: #007700">></span>
        
        <span style="color: #888888"><!-- Button 4 --></span>
        

<span style="color: #007700"><button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">"Button4"</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">"button"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">"</span>


<span style="background-color: #fff0f0">{document.getElementById('button2') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button3') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('button1') .style.display='none'}</span>
<span style="background-color: #fff0f0">{document.getElementById('default') .style.display='none'}</span>


<span style="background-color: #fff0f0">if(document.getElementById('button4') .style.display=='none') {document.getElementById('button4') .style.display=''}</span>

<span style="background-color: #fff0f0">else{{document.getElementById('button4') .style.display='none'}{document.getElementById('default') .style.display=''}}"</span><span style="color: #007700">></span>

<span style="color: #888888"><!-- Name of button 4 --></span>
<span style="color: #007700"><b><u></span>- Button 4; -<span style="color: #007700"></u></b></span> 


<span style="color: #007700"></button></span>

<span style="color: #007700"></td></span>
<span style="color: #007700"></tr></span>
<span style="color: #007700"></table></span>


<span style="color: #888888"><!-- HERE ARE THE CONTENT OF THE BUTTONS. WHEN YOU PRESS A BUTTON, THE CORRESPONDING DATA WILL SHOW IN THE DIV TAG WITH THE APPROPRIATE ID. FEEL FREE TO MAKE A TABLE WITH A BORDER, USE FONT TAGS FOR FONT COLOR, BOLD, ITALIC, UNDERLINE. USE <BR> FOR LINE BREAKS. YOU CAN CHANGE THE BGCOLOR OF THE TABLE TOO. --></span>


<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"default"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"display:inherit"</span><span style="color: #007700">></span>
<span style="color: #888888"><!-- CONTENT OF DEFAULT. THIS SHOWS BY DEFAULT WHEN PAGE IS OPENED. PRESSING A BUTTON A SECOND TIME WILL CLOSE IT AND RE-SHOW DEFAULT --></span>
    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#ffffff"</span><span style="color: #007700">></span>
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      
      Default content. Put stuff here.
      
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      <span style="color: #007700"></td></span>
      <span style="color: #007700"></tr></span>
      <span style="color: #007700"></table></span>
<span style="color: #007700"></div></span>


<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"button1"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"display:none"</span><span style="color: #007700">></span>
<span style="color: #888888"><!-- CONTENT OF BUTTON 1 --></span>
    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#ffffff"</span><span style="color: #007700">></span>
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      
      Button 1 content. Put stuff here.
      
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      <span style="color: #007700"></td></span>
      <span style="color: #007700"></tr></span>
      <span style="color: #007700"></table></span>
<span style="color: #007700"></div></span>

<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"button2"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"display:none"</span><span style="color: #007700">></span>
<span style="color: #888888"><!-- CONTENT OF BUTTON 2 --></span>
    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#ffffff"</span><span style="color: #007700">></span>
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      
      Button 2 content. Put stuff here.
      
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      <span style="color: #007700"></td></span>
      <span style="color: #007700"></tr></span>
      <span style="color: #007700"></table></span>
<span style="color: #007700"></div></span>

<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"button3"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"display:none"</span><span style="color: #007700">></span>
<span style="color: #888888"><!-- CONTENT OF BUTTON 3 --></span>
    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#ffffff"</span><span style="color: #007700">></span>
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      
      Button 3 content. Put stuff here.
      
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      <span style="color: #007700"></td></span>
      <span style="color: #007700"></tr></span>
      <span style="color: #007700"></table></span>
<span style="color: #007700"></div></span>

<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"button4"</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">"display:none"</span><span style="color: #007700">></span>
<span style="color: #888888"><!-- CONTENT OF BUTTON 4 --></span>
    <span style="color: #007700"><table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">"1"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span><span style="color: #007700">></span>
      <span style="color: #007700"><tr></span>
      <span style="color: #007700"><td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"400"</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">"center"</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"#ffffff"</span><span style="color: #007700">></span>
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      
      Button 4 content. Put stuff here.
      
      <span style="color: #007700"><br</span> <span style="color: #007700">/><br</span> <span style="color: #007700">/></span>
      <span style="color: #007700"></td></span>
      <span style="color: #007700"></tr></span>
      <span style="color: #007700"></table></span>
<span style="color: #007700"></div></span>

<span style="color: #888888"><!-- END OF BUTTONS --></span>

</html>

Retrieved from "http://vh.mucktopia.com/wiki_files/index.php?title=Raeschen%27s_button_layout&oldid=693"
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox