Raeschen's button layout

From Vulpine Hollow
(Difference between revisions)
Jump to: navigation, search
(Created page with "For an easier to read version click here http://pastebin.com/sxnUe4cG <nowiki> <!-- START OF BUTTONS --> <!-- COLORS OF BUTTONS ARE SHOWN. WIDTH, BACKGROUND-COLOR, BORDER CO...")
 
Line 1: Line 1:
 
For an easier to read version click here http://pastebin.com/sxnUe4cG
 
For an easier to read version click here http://pastebin.com/sxnUe4cG
  
−
<nowiki>
+
<html>
 +
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #888888">&lt;!-- START OF BUTTONS --&gt;</span>
 +
<span style="color: #888888">&lt;!-- COLORS OF BUTTONS ARE SHOWN. WIDTH, BACKGROUND-COLOR, BORDER COLOR, AND JUST &#39;COLOR&#39; (FOR TEXT COLOR IN BUTTON) ARE ALL EDITABLE. THEY USE HEX CODES. GOOGLE IT. --&gt;</span>
  
−
<!-- START OF BUTTONS -->
+
<span style="color: #888888">&lt;!-- TO USE THIS CODE, YOU MUST DISABLE AUTO-FORMATTING. THIS MEANS YOU WILL HAVE TO CREATE NEW PARAGRAPHS/LINES WITH A SERIES OF &lt;BR&gt; TAGS INSTEAD OF SIMPLY PRESSING RETURN/ENTER. EACH &lt;BR&gt; TAG IS ONE PRESS OF &#39;RETURN&#39; --&gt;</span>
−
<!-- 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. -->
+
  
−
<!-- 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 style="color: #888888">&lt;!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER=&quot;1&quot; TO BORDER=&quot;0&quot; --&gt;</span>
  
−
<!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER="1" TO BORDER="0" -->
+
    <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;1000&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
 
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
    <table width="1000" border="1" align="center">
+
−
       <tr>
+
 
        
 
        
 
        
 
        
−
         <td width="250" align="center" bgcolor="#000000">
+
         <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;250&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#000000&quot;</span><span style="color: #007700">&gt;</span>
 
          
 
          
−
         <!-- Button 1 -->
+
         <span style="color: #888888">&lt;!-- Button 1 --&gt;</span>
 
          
 
          
  
−
<button title="Button1" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="
+
<span style="color: #007700">&lt;button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">&quot;Button1&quot;</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">&quot;button&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;&quot;</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">&quot;</span>
  
  
−
{document.getElementById('button2') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button2&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button3') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button3&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button4') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button4&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('default') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;default&#39;) .style.display=&#39;none&#39;}</span>
  
  
−
if(document.getElementById('button1') .style.display=='none') {document.getElementById('button1') .style.display=''}
+
<span style="background-color: #fff0f0">if(document.getElementById(&#39;button1&#39;) .style.display==&#39;none&#39;) {document.getElementById(&#39;button1&#39;) .style.display=&#39;&#39;}</span>
  
−
else{{document.getElementById('button1') .style.display='none'}{document.getElementById('default') .style.display=''}}">
+
<span style="background-color: #fff0f0">else{{document.getElementById(&#39;button1&#39;) .style.display=&#39;none&#39;}{document.getElementById(&#39;default&#39;) .style.display=&#39;&#39;}}&quot;</span><span style="color: #007700">&gt;</span>
  
−
<!-- Name of button 1 -->
+
<span style="color: #888888">&lt;!-- Name of button 1 --&gt;</span>
−
<b><u>- Button 1; -</u></b>  
+
<span style="color: #007700">&lt;b&gt;&lt;u&gt;</span>- Button 1; -<span style="color: #007700">&lt;/u&gt;&lt;/b&gt;</span>  
  
  
−
</button>
+
<span style="color: #007700">&lt;/button&gt;</span>
  
−
</td>
+
<span style="color: #007700">&lt;/td&gt;</span>
  
  
  
  
−
         <td width="250" align="center" bgcolor="#000000">
+
         <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;250&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#000000&quot;</span><span style="color: #007700">&gt;</span>
 
          
 
          
−
         <!-- Button 2 -->
+
         <span style="color: #888888">&lt;!-- Button 2 --&gt;</span>
 
          
 
          
  
−
<button title="Button2" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="
+
<span style="color: #007700">&lt;button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">&quot;Button2&quot;</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">&quot;button&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;&quot;</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">&quot;</span>
  
  
−
{document.getElementById('button1') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button1&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button3') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button3&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button4') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button4&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('default') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;default&#39;) .style.display=&#39;none&#39;}</span>
  
  
−
if(document.getElementById('button2') .style.display=='none') {document.getElementById('button2') .style.display=''}
+
<span style="background-color: #fff0f0">if(document.getElementById(&#39;button2&#39;) .style.display==&#39;none&#39;) {document.getElementById(&#39;button2&#39;) .style.display=&#39;&#39;}</span>
  
−
else{{document.getElementById('button2') .style.display='none'}{document.getElementById('default') .style.display=''}}">
+
<span style="background-color: #fff0f0">else{{document.getElementById(&#39;button2&#39;) .style.display=&#39;none&#39;}{document.getElementById(&#39;default&#39;) .style.display=&#39;&#39;}}&quot;</span><span style="color: #007700">&gt;</span>
  
−
<!-- Name of button 2 -->
+
<span style="color: #888888">&lt;!-- Name of button 2 --&gt;</span>
−
<b><u>- Button 2; -</u></b>  
+
<span style="color: #007700">&lt;b&gt;&lt;u&gt;</span>- Button 2; -<span style="color: #007700">&lt;/u&gt;&lt;/b&gt;</span>  
  
  
−
</button>
+
<span style="color: #007700">&lt;/button&gt;</span>
  
−
</td>
+
<span style="color: #007700">&lt;/td&gt;</span>
  
  
  
−
         <td width="250" align="center" bgcolor="#000000">
+
         <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;250&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#000000&quot;</span><span style="color: #007700">&gt;</span>
 
          
 
          
−
         <!-- Button 3 -->
+
         <span style="color: #888888">&lt;!-- Button 3 --&gt;</span>
 
          
 
          
  
−
<button title="Button3" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="
+
<span style="color: #007700">&lt;button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">&quot;Button3&quot;</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">&quot;button&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;&quot;</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">&quot;</span>
  
  
−
{document.getElementById('button2') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button2&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button1') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button1&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button4') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button4&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('default') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;default&#39;) .style.display=&#39;none&#39;}</span>
  
  
−
if(document.getElementById('button3') .style.display=='none') {document.getElementById('button3') .style.display=''}
+
<span style="background-color: #fff0f0">if(document.getElementById(&#39;button3&#39;) .style.display==&#39;none&#39;) {document.getElementById(&#39;button3&#39;) .style.display=&#39;&#39;}</span>
  
−
else{{document.getElementById('button3') .style.display='none'}{document.getElementById('default') .style.display=''}}">
+
<span style="background-color: #fff0f0">else{{document.getElementById(&#39;button3&#39;) .style.display=&#39;none&#39;}{document.getElementById(&#39;default&#39;) .style.display=&#39;&#39;}}&quot;</span><span style="color: #007700">&gt;</span>
  
−
<!-- Name of button 3 -->
+
<span style="color: #888888">&lt;!-- Name of button 3 --&gt;</span>
−
<b><u>- Button 3; -</u></b>  
+
<span style="color: #007700">&lt;b&gt;&lt;u&gt;</span>- Button 3; -<span style="color: #007700">&lt;/u&gt;&lt;/b&gt;</span>  
  
  
−
</button>
+
<span style="color: #007700">&lt;/button&gt;</span>
  
−
</td>
+
<span style="color: #007700">&lt;/td&gt;</span>
  
  
  
  
−
         <td width="250" align="center" bgcolor="#000000">
+
         <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;250&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#000000&quot;</span><span style="color: #007700">&gt;</span>
 
          
 
          
−
         <!-- Button 4 -->
+
         <span style="color: #888888">&lt;!-- Button 4 --&gt;</span>
 
          
 
          
  
−
<button title="Button4" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="
+
<span style="color: #007700">&lt;button</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">&quot;Button4&quot;</span> <span style="color: #0000CC">type=</span><span style="background-color: #fff0f0">&quot;button&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;&quot;</span><span style="color: #0000CC">onClick=</span><span style="background-color: #fff0f0">&quot;</span>
  
  
−
{document.getElementById('button2') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button2&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button3') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button3&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('button1') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;button1&#39;) .style.display=&#39;none&#39;}</span>
−
{document.getElementById('default') .style.display='none'}
+
<span style="background-color: #fff0f0">{document.getElementById(&#39;default&#39;) .style.display=&#39;none&#39;}</span>
  
  
−
if(document.getElementById('button4') .style.display=='none') {document.getElementById('button4') .style.display=''}
+
<span style="background-color: #fff0f0">if(document.getElementById(&#39;button4&#39;) .style.display==&#39;none&#39;) {document.getElementById(&#39;button4&#39;) .style.display=&#39;&#39;}</span>
  
−
else{{document.getElementById('button4') .style.display='none'}{document.getElementById('default') .style.display=''}}">
+
<span style="background-color: #fff0f0">else{{document.getElementById(&#39;button4&#39;) .style.display=&#39;none&#39;}{document.getElementById(&#39;default&#39;) .style.display=&#39;&#39;}}&quot;</span><span style="color: #007700">&gt;</span>
  
−
<!-- Name of button 4 -->
+
<span style="color: #888888">&lt;!-- Name of button 4 --&gt;</span>
−
<b><u>- Button 4; -</u></b>  
+
<span style="color: #007700">&lt;b&gt;&lt;u&gt;</span>- Button 4; -<span style="color: #007700">&lt;/u&gt;&lt;/b&gt;</span>  
  
  
−
</button>
+
<span style="color: #007700">&lt;/button&gt;</span>
  
−
</td>
+
<span style="color: #007700">&lt;/td&gt;</span>
−
</tr>
+
<span style="color: #007700">&lt;/tr&gt;</span>
−
</table>
+
<span style="color: #007700">&lt;/table&gt;</span>
  
  
−
<!-- 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 style="color: #888888">&lt;!-- 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 &lt;BR&gt; FOR LINE BREAKS. YOU CAN CHANGE THE BGCOLOR OF THE TABLE TOO. --&gt;</span>
  
  
−
<div id="default" style="display:inherit">
+
<span style="color: #007700">&lt;div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;default&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;display:inherit&quot;</span><span style="color: #007700">&gt;</span>
−
<!-- 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 style="color: #888888">&lt;!-- CONTENT OF DEFAULT. THIS SHOWS BY DEFAULT WHEN PAGE IS OPENED. PRESSING A BUTTON A SECOND TIME WILL CLOSE IT AND RE-SHOW DEFAULT --&gt;</span>
−
     <table width="400" border="1" align="center">
+
     <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
       <tr>
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
       <td width="400" align="center" bgcolor="#ffffff">
+
       <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#ffffff&quot;</span><span style="color: #007700">&gt;</span>
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
 
        
 
        
 
       Default content. Put stuff here.
 
       Default content. Put stuff here.
 
        
 
        
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
−
       </td>
+
       <span style="color: #007700">&lt;/td&gt;</span>
−
       </tr>
+
       <span style="color: #007700">&lt;/tr&gt;</span>
−
       </table>
+
       <span style="color: #007700">&lt;/table&gt;</span>
−
</div>
+
<span style="color: #007700">&lt;/div&gt;</span>
  
  
−
<div id="button1" style="display:none">
+
<span style="color: #007700">&lt;div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;button1&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;display:none&quot;</span><span style="color: #007700">&gt;</span>
−
<!-- CONTENT OF BUTTON 1 -->
+
<span style="color: #888888">&lt;!-- CONTENT OF BUTTON 1 --&gt;</span>
−
     <table width="400" border="1" align="center">
+
     <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
       <tr>
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
       <td width="400" align="center" bgcolor="#ffffff">
+
       <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#ffffff&quot;</span><span style="color: #007700">&gt;</span>
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
 
        
 
        
 
       Button 1 content. Put stuff here.
 
       Button 1 content. Put stuff here.
 
        
 
        
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
−
       </td>
+
       <span style="color: #007700">&lt;/td&gt;</span>
−
       </tr>
+
       <span style="color: #007700">&lt;/tr&gt;</span>
−
       </table>
+
       <span style="color: #007700">&lt;/table&gt;</span>
−
</div>
+
<span style="color: #007700">&lt;/div&gt;</span>
  
−
<div id="button2" style="display:none">
+
<span style="color: #007700">&lt;div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;button2&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;display:none&quot;</span><span style="color: #007700">&gt;</span>
−
<!-- CONTENT OF BUTTON 2 -->
+
<span style="color: #888888">&lt;!-- CONTENT OF BUTTON 2 --&gt;</span>
−
     <table width="400" border="1" align="center">
+
     <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
       <tr>
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
       <td width="400" align="center" bgcolor="#ffffff">
+
       <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#ffffff&quot;</span><span style="color: #007700">&gt;</span>
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
 
        
 
        
 
       Button 2 content. Put stuff here.
 
       Button 2 content. Put stuff here.
 
        
 
        
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
−
       </td>
+
       <span style="color: #007700">&lt;/td&gt;</span>
−
       </tr>
+
       <span style="color: #007700">&lt;/tr&gt;</span>
−
       </table>
+
       <span style="color: #007700">&lt;/table&gt;</span>
−
</div>
+
<span style="color: #007700">&lt;/div&gt;</span>
  
−
<div id="button3" style="display:none">
+
<span style="color: #007700">&lt;div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;button3&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;display:none&quot;</span><span style="color: #007700">&gt;</span>
−
<!-- CONTENT OF BUTTON 3 -->
+
<span style="color: #888888">&lt;!-- CONTENT OF BUTTON 3 --&gt;</span>
−
     <table width="400" border="1" align="center">
+
     <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
       <tr>
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
       <td width="400" align="center" bgcolor="#ffffff">
+
       <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#ffffff&quot;</span><span style="color: #007700">&gt;</span>
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
 
        
 
        
 
       Button 3 content. Put stuff here.
 
       Button 3 content. Put stuff here.
 
        
 
        
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
−
       </td>
+
       <span style="color: #007700">&lt;/td&gt;</span>
−
       </tr>
+
       <span style="color: #007700">&lt;/tr&gt;</span>
−
       </table>
+
       <span style="color: #007700">&lt;/table&gt;</span>
−
</div>
+
<span style="color: #007700">&lt;/div&gt;</span>
  
−
<div id="button4" style="display:none">
+
<span style="color: #007700">&lt;div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;button4&quot;</span> <span style="color: #0000CC">style=</span><span style="background-color: #fff0f0">&quot;display:none&quot;</span><span style="color: #007700">&gt;</span>
−
<!-- CONTENT OF BUTTON 4 -->
+
<span style="color: #888888">&lt;!-- CONTENT OF BUTTON 4 --&gt;</span>
−
     <table width="400" border="1" align="center">
+
     <span style="color: #007700">&lt;table</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">border=</span><span style="background-color: #fff0f0">&quot;1&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span><span style="color: #007700">&gt;</span>
−
       <tr>
+
       <span style="color: #007700">&lt;tr&gt;</span>
−
       <td width="400" align="center" bgcolor="#ffffff">
+
       <span style="color: #007700">&lt;td</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;400&quot;</span> <span style="color: #0000CC">align=</span><span style="background-color: #fff0f0">&quot;center&quot;</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">&quot;#ffffff&quot;</span><span style="color: #007700">&gt;</span>
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
 
        
 
        
 
       Button 4 content. Put stuff here.
 
       Button 4 content. Put stuff here.
 
        
 
        
−
       <br /><br />
+
       <span style="color: #007700">&lt;br</span> <span style="color: #007700">/&gt;&lt;br</span> <span style="color: #007700">/&gt;</span>
−
       </td>
+
       <span style="color: #007700">&lt;/td&gt;</span>
−
       </tr>
+
       <span style="color: #007700">&lt;/tr&gt;</span>
−
       </table>
+
       <span style="color: #007700">&lt;/table&gt;</span>
−
</div>
+
<span style="color: #007700">&lt;/div&gt;</span>
−
 
+
−
<!-- END OF BUTTONS -->
+
  
−
</nowiki>
+
<span style="color: #888888">&lt;!-- END OF BUTTONS --&gt;</span>
 +
</pre></div>
 +
</html>

Revision as of 14:54, 22 February 2014

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