Raeschen's button layout

Latest revision as of 15:11, 22 February 2014

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

<!-- START OF BUTTONS -->
<!-- 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' -->
 
 
<!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER="1" TO BORDER="0" -->
 
    <table width="1000" border="1" align="center">
      <tr>
     
     
        <td width="250" align="center" bgcolor="#000000">
       
        <!-- Button 1 -->
       
 
<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="
{document.getElementById('button2') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}
if(document.getElementById('button1') .style.display=='none') {document.getElementById('button1') .style.display=''}
else{{document.getElementById('button1') .style.display='none'}{document.getElementById('default') .style.display=''}}">
 
<!-- Name of button 1 -->
<b><u>- Button 1; -</u></b>
 
 
</button>
 
</td>
 
 
 
 
        <td width="250" align="center" bgcolor="#000000">
       
        <!-- Button 2 -->
       
 
<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="
{document.getElementById('button1') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}
if(document.getElementById('button2') .style.display=='none') {document.getElementById('button2') .style.display=''}
else{{document.getElementById('button2') .style.display='none'}{document.getElementById('default') .style.display=''}}">
 
<!-- Name of button 2 -->
<b><u>- Button 2; -</u></b>
 
 
</button>
 
</td>
 
 
 
        <td width="250" align="center" bgcolor="#000000">
       
        <!-- Button 3 -->
       
 
<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="
{document.getElementById('button2') .style.display='none'}
{document.getElementById('button1') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}
if(document.getElementById('button3') .style.display=='none') {document.getElementById('button3') .style.display=''}
else{{document.getElementById('button3') .style.display='none'}{document.getElementById('default') .style.display=''}}">
 
<!-- Name of button 3 -->
<b><u>- Button 3; -</u></b>
 
 
</button>
 
</td>
 
 
 
 
        <td width="250" align="center" bgcolor="#000000">
       
        <!-- Button 4 -->
       
 
<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="
{document.getElementById('button2') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button1') .style.display='none'}
{document.getElementById('default') .style.display='none'}
if(document.getElementById('button4') .style.display=='none') {document.getElementById('button4') .style.display=''}
else{{document.getElementById('button4') .style.display='none'}{document.getElementById('default') .style.display=''}}">
 
<!-- Name of button 4 -->
<b><u>- Button 4; -</u></b>
 
 
</button>
 
</td>
</tr>
</table>
 
 
<!-- 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. -->
 
 
<div id="default" style="display:inherit">
<!-- CONTENT OF DEFAULT. THIS SHOWS BY DEFAULT WHEN PAGE IS OPENED. PRESSING A BUTTON A SECOND TIME WILL CLOSE IT AND RE-SHOW DEFAULT -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />
     
      Default content. Put stuff here.
     
      <br /><br />
      </td>
      </tr>
      </table>
</div>
 
 
<div id="button1" style="display:none">
<!-- CONTENT OF BUTTON 1 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />
     
      Button 1 content. Put stuff here.
     
      <br /><br />
      </td>
      </tr>
      </table>
</div>
 
<div id="button2" style="display:none">
<!-- CONTENT OF BUTTON 2 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />
     
      Button 2 content. Put stuff here.
     
      <br /><br />
      </td>
      </tr>
      </table>
</div>
 
<div id="button3" style="display:none">
<!-- CONTENT OF BUTTON 3 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />
     
      Button 3 content. Put stuff here.
     
      <br /><br />
      </td>
      </tr>
      </table>
</div>
 
<div id="button4" style="display:none">
<!-- CONTENT OF BUTTON 4 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />
     
      Button 4 content. Put stuff here.
     
      <br /><br />
      </td>
      </tr>
      </table>
</div>
 
<!-- END OF BUTTONS -->