Jump to content

Rikstar's template

rikstar

By rikstar
in Personal Page Templates

 Share

Recommended Posts

rikstar Newbie

rikstar

Posted
Posted

Hello everybody, I'm going to explain my the personal page I've coded below. So that everybody could change it and add their own text. The version I've included is also easy to copy and paste and doesn't need modification. But if you still want to change it your own way than read below:

First I'll show you an example so you know how it looks. So here is the link that will direct you to my personal page:
http://magicduel.com/players/rikstar

As you can see I've made it simple. A bunch of buttons above, and below there is the information you need. When you click those buttons they'll direct you to that page. The pages will switch in a nice way.

The code:

[spoiler]

<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
turn = 0;
function rotate_list(number)
{
turn = number;

$(document).ready(function(){

if(turn == 0)
{
	$("#first").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#first").css({"color":"rgba(0,0,0,1)"});
	$("#first").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#second").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#third").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#fourth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#fifth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#sixth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 1)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
    $("#second").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#second").css({"color":"rgba(0,0,0,1)"});
	$("#second").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#third").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#fourth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#fifth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#sixth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 2)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#third").css({"color":"rgba(0,0,0,1)"});
	$("#third").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#fourth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#fifth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#sixth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 3)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fourth").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#fourth").css({"color":"rgba(0,0,0,1)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#fifth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#sixth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 4)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fourth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fifth").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#fifth").css({"color":"rgba(0,0,0,1)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#sixth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 5)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fourth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fifth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#sixth").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#sixth").css({"color":"rgba(0,0,0,1)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#zeventh").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0);"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 6)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fourth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fifth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#sixth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#zeventh").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,1)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,1)"});
	
	$("#eighth").css({"transform":"rotateY(100deg) translateX(400px) translateZ(230px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(100deg) translateX(400px) translateZ(230px)"});
	$("#eighth").css({"color":"rgba(0,0,0,0)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,0);"});
}else if(turn == 7)
{
	$("#first").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#first").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#first").css({"color":"rgba(0,0,0,0)"});
	$("#first").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#second").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#second").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#second").css({"color":"rgba(0,0,0,0)"});
	$("#second").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#third").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#third").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#third").css({"color":"rgba(0,0,0,0)"});
	$("#third").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fourth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fourth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fourth").css({"color":"rgba(0,0,0,0)"});
	$("#fourth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#fifth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#fifth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#fifth").css({"color":"rgba(0,0,0,0)"});
	$("#fifth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#sixth").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#sixth").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#sixth").css({"color":"rgba(0,0,0,0)"});
	$("#sixth").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#zeventh").css({"transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"}); 
	$("#zeventh").css({"-webkit-transform":"rotateY(-100deg) translateX(-400px) translateZ(230px)"});
	$("#zeventh").css({"color":"rgba(0,0,0,0)"});
	$("#zeventh").css({"background-color":"rgba(249,240,213,0)"});
	
	$("#eighth").css({"transform":"rotateY(0deg) translateX(0px) translateZ(0px)"}); 
	$("#eighth").css({"-webkit-transform":"rotateY(0deg) translateX(0px) translateZ(0px)"});
	$("#eighth").css({"color":"rgba(0,0,0,1)"});
	$("#eighth").css({"background-color":"rgba(249,240,213,1)"});
}
});

}
</script> 
<style type="text/css">
#main_personalpage{
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,1);
  background-color: rgba(249,240,213,1);
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  
}
#first{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,1);
  background-color: rgba(249,240,213,1);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#second{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#third{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#fourth{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#fifth{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#sixth{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#zeventh{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
#eighth{
  position: absolute;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgba(0,0,0,0);
  background-color: rgba(249,240,213,0);
  backface-visibility: hidden;
  border-style: solid;
  border-width: 1px;
  font-family:"Arial", Times, serif;
  transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-transform: rotateY(100deg) translateX(400px) translateZ(230px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  transition: transform 1s, color 1s, background-color 1s, display 1s;
  -webkit-transition: -webkit-transform 1s, color 1s, background-color 1s, display 1s;
}
.pers{
  perspective: 2000px;
}
</style>
</head>
<body>

<div align="center">
<div id="main_personalpage" class='frm-textbutton' align="center">
	<button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Comment on self</button>
	<button id="button" onclick="rotate_list(1)" class='frm-textbutton' type="submit">Hate list</button>
	<button id="button" onclick="rotate_list(2)" class='frm-textbutton' type="submit">Military pages</button>
	<button id="button" onclick="rotate_list(3)" class='frm-textbutton' type="submit">Quest page</button>
	<button id="button" onclick="rotate_list(4)" class='frm-textbutton' type="submit">Protector page</button>
	<button id="button" onclick="rotate_list(5)" class='frm-textbutton' type="submit">Character</button>
	<button id="button" onclick="rotate_list(6)" class='frm-textbutton' type="submit">Stats</button>
	<button id="button" onclick="rotate_list(7)" class='frm-textbutton' type="submit">Misq</button>
</div>
</div>

<div class="pers" class='frm-textbutton' align="center">
	<div id="first">[doc3]</div>
	<div id="second">[doc4]</div>
	<div id="third">[doc5]</div>
	<div id="fourth">[doc6]</div>
	<div id="fifth">[doc1]</div>
	<div id="sixth">
		[character]
		[weaponsets]
		[creatures]
	</div>
	<div id="zeventh">
		[alliance]
		[equipment]
		[adepts]
		[adventurelog]
	</div>
	<div id="eighth">misq</div>
</div>

</body>
</html>

[/spoiler]

 

As you can see it's a lot of code, but to edit it only the bottom is important for you. You can see that there are some buttons coded like this for example:

[spoiler]

<button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Comment on self</button>

[/spoiler]


There are also the divs(divisions spaces in which you can put stuff in). Those are used to add in your information. Below the buttons you can see the code for those, example:

[spoiler]

<div id="first">[doc1]</div>

[/spoiler]


When you want to change it you first want to know how many pages you'll need. The maximum amount of pages you can get is eigth at the moment (if you think this is too low post it below and I make some changes so that there are more pages). Lets say you want 4 pages. Then you only need to delete the last for buttons.
So you go from this:

[spoiler]

    <button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Comment on self</button>
    <button id="button" onclick="rotate_list(1)" class='frm-textbutton' type="submit">Hate list</button>
    <button id="button" onclick="rotate_list(2)" class='frm-textbutton' type="submit">Military pages</button>
    <button id="button" onclick="rotate_list(3)" class='frm-textbutton' type="submit">Quest page</button>
    <button id="button" onclick="rotate_list(4)" class='frm-textbutton' type="submit">Protector page</button>
    <button id="button" onclick="rotate_list(5)" class='frm-textbutton' type="submit">Character</button>
    <button id="button" onclick="rotate_list(6)" class='frm-textbutton' type="submit">Stats</button>
    <button id="button" onclick="rotate_list(7)" class='frm-textbutton' type="submit">Misq</button>

[/spoiler]
To this:

[spoiler]

    <button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Comment on self</button>
    <button id="button" onclick="rotate_list(1)" class='frm-textbutton' type="submit">Hate list</button>
    <button id="button" onclick="rotate_list(2)" class='frm-textbutton' type="submit">Military pages</button>
    <button id="button" onclick="rotate_list(3)" class='frm-textbutton' type="submit">Quest page</button>

[/spoiler]
If you want to change the name of the button you only need to change the words between ">" and "<", example:
From this:

[spoiler]

    <button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Comment on self</button>

[/spoiler]
To this:

[spoiler]

    <button id="button" onclick="rotate_list(0)" class='frm-textbutton' type="submit">Place your own words</button>

[/spoiler]

Now we go to the actual information on the pages. It's very easy to change that, you only need to do the same as with the buttons, example:
From this:

[spoiler]

    <div id="first">[doc1]</div>

[/spoiler]
To this:

[spoiler]

    <div id="first">Add your own text here</div>

[/spoiler]

If you want to add your comment on self, and those other pages. Then you need to read this:
http://magicduel.invisionzone.com/topic/10502-personal-page-template-replacements/
Just put those small codes in the place where you need to add your text.

I hope this was helpfull, and that you think it's a nice personal page template to use.
If you've got any questions about it just ask.

 

  • 3 months later...
Ary Endleg Newbie

Ary Endleg

Posted
Posted

dude you rock!

 

i had something very similar in mind, you just saved me from hard part. i will totally use your code, mostly because you have fully written script that does exactly what i want and i dont know how to write it myself :p but yeah i will only have to edit it to fit my style but structure and script are pretty much how i want them

Ary Endleg Newbie

Ary Endleg

Posted
Posted

haha you wrote zeventh :P i changed it all to seventh

however i have a question, what if i want that when profile loads it starts on third div and not always on first. i tried changing turn variable from 0 to 2 but it did nothing. hmm

rikstar Newbie

rikstar

Posted
  • Author
Posted (edited)

It does nothing because that small line of code isn't called, because it's outside the function. Let me program some small bits and I'll add it to the code. :)

 

The solution to the problem is that you need to call the "rotate_list()" function. You can do that this way:

<script>
rotate_list(2);
</script>

Put this right after the "<body>", then it should work correctly.

 

P.S. The number between the brackets means which page would be up, when you enter the webpage.

Edited by rikstar

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Forum Statistics

    17.5k
    Total Topics
    182.1k
    Total Posts

  • Recently Browsing

    • No registered users viewing this page.

  • Upcoming Events

    No upcoming events found

  • Recent Event Reviews

×
×
  • Create New...