Profiles I made for others

Everything related to our vore chat room and vore roleplaying room can go here!

Profiles I made for others

Postby Someone92 » Fri Oct 28, 2022 10:49 am

As my template profile thread got too crowded I put profiles I made for others here.

Statera
Spoiler: show

Profile Body
Code: Select all
<marquee class="myMarquee">Queen of the Seas </marquee>
<div class="center"><button id="button_ShowHide_1" class="button" onclick="onclick_ShowHide_1()">PERSONALITY</button>
<button id="button_ShowHide_2" class="button" onclick="onclick_ShowHide_2()">BACKSTORY</button>
<button id="button_ShowHide_3" class="button" onclick="onclick_ShowHide_3()">ABOUT</button></div>
   <div id="div_ShowHide_1" class="wrapper_for_RunningText">
      Loving but serious with her morals. will fight if provoked. always open for RP but it is going to be longer or shorter depending on mood! loves pet play and such, dominant as hell. her personality is hard to explain for it is my irl one as well! always in character, for I am my character at heart.
   </div>
   <div id="div_ShowHide_2" class="wrapper_for_RunningText">
     Statera was born during the dinosaurs, forced to grow larger and hunt the Predators. as the extinction began, she escaped to the water; taking a form expertly shaped for the sea. Her predatory growth caused her to drive the Megaladons into extinction. her first mate- Raznatio- made the mistake of eating her meal, leading to her consuming the last male of her species. As the planet cooled, she ventured south until she reached the Mariana trench. once there, she entered a hibernation like state of growth, feeding off the natural heat. A couple hundred years later, she entered the metateranian and wreaked havoc on the human-packed boats, then hibernating once again in the trench. Decades later, she awoke during the medieval age. entering the human infested world once again, she was attacked by ships armed with cannons. She then sunk the ship with her tentacles. Finding the humans annoying, she slept for three hundred years; awakening in the 20th century. her awakened state wss starving, leading her to hunt whales and venture onto land. upon finding human militaries, she fought against them and prevailed. and here we are!
   </div>
   <div id="div_ShowHide_3" class="wrapper_for_RunningText">
      Statera is a Shapeshifter, born to the depths. She is responsible for stories like Scylla, the Kraken, the Bloop, and other unexplained myseries. she can shift between forms, but her true form is clear as glass with a crystal for a brain, and two for each heart. Her limbs are as such; 90 tentacles, 8,000 centipede legs, 4 humanoid arms, and two lbster claw arms. She has four wombs for maximum child rate, two 1 tonne breasts, 16(or 140) feet tall, a 15(or 130) foot throat, and is 97(or 700) feet long. she has four eyes the size of football/soccor balls(or Ford 150s), smaller are tennis balls size(or smartt cars), and a 7ft(or 90) tongue. she also has 9(or 160) feet long tentacle hairs and can see electricity as well! But most of all, she is a herm. Statera MeerTier love the ocean, and her nickname is queen of the seas. she is over 60million years old, but was asleep for most of it. NOTE, she has a 6ft(or 60) ovipositer and 2 balls per side of sack. She lives on Muzean, and planet from <a class='autolink' href='/profile/Micro_Worlds'><span  style='color: #63b06a;'>Micro_Worlds</span></a>
  </div>



Stylesheet
Code: Select all
body{
//  background-image: url('https://media.discordapp.net/attachments/1023309382173339649/1035577908707721387/20221028_103647.jpg');
  background-image: url('https://media.discordapp.net/attachments/1023309382173339649/1035581744402931742/HUW-1024x653.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Resize the background image to cover the entire container */
  background-attachment: fixed;
  background-position: center;
}

.wrapper_for_RunningText{
   white-space: pre-line;
   margin: auto;
   text-align: left;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   max-width: 1080px; /* Makes sure the profile description does not exeed X pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
   padding: 5px 25px 5px 25px;
}

.myMarquee{
  font-size: 60px;
  color: purple;
}

#div_ShowHide_1 {
    display: none;
}
#div_ShowHide_2 {
    display: none;
}
#div_ShowHide_3 {
    display: none;
}

.center{
   text-align: center;
}


JavaScript
Code: Select all
function onclick_ShowHide_1() {
   var x = document.getElementById("div_ShowHide_1");
   var y = document.getElementById("button_ShowHide_1");
   if (x.style.display === "block") {
      x.style.display = "none";
      y.innerText = "PERSONALITY";
   } else {
      x.style.display = "block";
      y.innerText = "PERSONALITY";
   }
}
function onclick_ShowHide_2() {
   var x = document.getElementById("div_ShowHide_2");
   var y = document.getElementById("button_ShowHide_2");
   if (x.style.display === "block") {
      x.style.display = "none";
      y.innerText = "BACKSTORY";
   } else {
      x.style.display = "block";
      y.innerText = "BACKSTORY";
   }
}
function onclick_ShowHide_3() {
   var x = document.getElementById("div_ShowHide_3");
   var y = document.getElementById("button_ShowHide_3");
   if (x.style.display === "block") {
      x.style.display = "none";
      y.innerText = "ABOUT";
   } else {
      x.style.display = "block";
      y.innerText = "ABOUT";
   }
}




For a certain bat:
Spoiler: show


Profile Body:

Code: Select all
<div class="wrapper_CharacterProfile">Your profile here - copy paste it from a .txt file or something

<img src="https://rp.aryion.com/img/profile/158924_a74f9c8d65b149cd9b58eb9fdef922ab.png" id="span_ShowHide_1" class= "imgButton center" onclick="onclick_ShowHide_1()">

<div id="div_ShowHide_1"> ## add here anything you want to appear / disappear if you click on the image <img src="https://rp.aryion.com/img/profile/158924_a74f9c8d65b149cd9b58eb9fdef922ab.png" class="downsized center"> ##</div>

</div>


Stylesheet:
Code: Select all
/* Centers the profile picture, and makes sure the profile description appears underneath it */
.profile-image-container{
   width: 100%;
   text-align: center;
}

/* Centers the profile picture, and makes sure it is at max as wide as the browser */
img.profile-image{
   border-radius: 16px;
   max-width: 100%;
   height: auto;
   margin: 0px;
}

/* Gives the pref sliders thin dashed borders so it becomes easier to discern where one description ends and the next one begins */
td {
   border: 1px dashed grey;
   padding: 6px 2px; /* Adds some space between the description and the borders to make the text easier to read */
   text-align: left;
}

/* Centers the pref buttons */
div#pref-sliders{
   text-align: center;
}

/* Centers the pref sliders */
table#pref-slider-table{
   margin: auto;
   max-width: 1080px; /* Makes sure the prefs sliders + description does not exeed 1080 pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
}



/* Automatically makes line breaks */
.wrapper_for_RunningText{
   white-space: pre-line;
   margin: auto;
   text-align: left;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   max-width: 1080px; /* Makes sure the profile description does not exeed X pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
   padding: 5px 25px 5px 25px;
}

.center_Text_Align {
   text-align: center;
}

div#div_ShowHide_1 {
   display: none;
}

img.imgButton {
   max-width: 100%;
   width: 400px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.downsized {
   max-width: 100%;
   width: auto;
//   max-height: 1000px; // This limits the size of the image to either the width of the browser or the the height to 1000px, whatever comes first.
//   max-height: auto; // With this, every image will be displayed at most as wide as the browser's width. Remove "//" before what you wanna use
}



JavaScript:
Code: Select all
function onclick_ShowHide_1() {
   var x = document.getElementById("div_ShowHide_1");
   if (x.style.display === "block") {
      x.style.display = "none";
   } else {
      x.style.display = "block";
   }
}




For a certain fang:
Spoiler: show

Profile Body:

Code: Select all
<img src="https://rp.aryion.com/img/profile/87093_5c4d56562b1e44c9a8827bc51eee9ace.png" class="downsized center">


Stylesheet:

Code: Select all
img.downsized {
   max-width: 100%;
   width: auto;
//   max-height: 1000px; // This limits the size of the image to either the width of the browser or the the height to 1000px, whatever comes first.
//   max-height: auto; // With this, every image will be displayed at most as wide as the browser's width. Remove "//" before what you wanna use
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}





For Transformation:
Spoiler: show

Profile Body:
Code: Select all
<div class="header">
  <h1>TF World</h1>
  <p>A <b>world</b> Where Bad people are Transformed into things.</p>
</div>

<div class="navbar">
  <button onclick="onclick_Alternative_ShowHide_1()">Information</button>
  <button onclick="onclick_Alternative_ShowHide_2()">Button 2</button>
  <button onclick="onclick_Alternative_ShowHide_3()">Button 3</button>
  <div class="topnav-right">
    <button onclick="onclick_Alternative_ShowHide_4()">Button 4</button>
  </div>
</div>

<div id="div_Alternative_ShowHide_1">
<div class="row">
  <div class="side">
    <h2>About this world</h2>
    <h5>Photo of The main City:</h5>
    <img src="https://i.imgur.com/FUTkpLsm.jpg" title="source: imgur.com">
    <p>This City is very advanced and also where the TF building is.</p>
    <h3>More Small Info</h3>
    <p>Here is the TF Building:</p>
    <img src="https://i.imgur.com/bsEHW5Lm.jpg" title="source: imgur.com">
    <p>This is the TF machine for TF'ing people into bigger objects:</p>
    <img src="https://i.imgur.com/S6XOMxBm.jpg" title="source: imgur.com">
    <p>This is the TF gun for TF'ing people into small Objects:</p>
    <img src="https://i.imgur.com/mUz2Gz5m.png" title="source: imgur.com">
  </div>
  <div class="main">
    <h2>Basic Information</h2>
    <h5>Last edited on 07/20/2021</h5>
    <img src="https://i.imgur.com/YSAxg6N.jpg" title="source: imgur.com">
    <p>This world changed when Some anime Gamers wanted world peace.</p>
    <p>They had a pretty good understanding of programming, science and so on to make a machine that can Transform people into Inanimate Objects.</p>
    <p>They intended to use it to turn bad people, like criminals, into objects to make the world a better place.</p>
    <p>They would then make it, Turning Criminals into clothing, food, and other stuff in front of the government. They were impressed and approved of it.</p>
   

    <h2>World Today</h2>
    <h5>Last edited on 07/20/21</h5>
    <img src="https://i.imgur.com/feTFHzP.gif" title="source: imgur.com">
    <p>Today Everyone now uses People as clothing and other daily objects since it was easier to just turn Evil doers into Objects.</p>
    <p>Of course no one can tell the difference between normal objects and objects that were once human. 400 years have went by since that machine was created and the world is a more peaceful place.</p>
    <p>There were people wo wanted to be turned to objects though and the government now sells Guns with a miniature version of the machine in it. It wont let you pull the trigger when the person is innocent or doesn't consent though.</p>
    <p>It prevents people from missusing it. All people who are transformed, cant transform back. So be careful Into what you want someone to turn into.</p>
  </div>
</div>
</div>




<div id="div_Alternative_ShowHide_2">Here you write Information_2</div>

<div id="div_Alternative_ShowHide_3">Here you write Information_3</div>

<div id="div_Alternative_ShowHide_4">
    <div class="wrapper_PrefSliders"><span id="appendPrefSlidersHere"></span></div>
</div>

<div class="footer">
  <h2>Happy Transforming~</h2>
</div>


Stylesheet:
Code: Select all
    #div_Alternative_ShowHide_1{
       
    }

    #div_Alternative_ShowHide_2{
       display: none; /* These are hidden when the profile is opened */
    }

    #div_Alternative_ShowHide_3{
       display: none; /* These are hidden when the profile is opened */
    }

    #div_Alternative_ShowHide_4{
       display: none; /* These are hidden when the profile is opened */
    }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  color: #AAAAAA;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

{
  box-sizing: border-box;
}

/* Column container */
.row { 
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: black;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: black;
  padding: 20px;
}


.topnav-right {
  float: right;
}


JavaScript:
Code: Select all
    function onclick_Alternative_ShowHide_1() {
       var x1 = document.getElementById("div_Alternative_ShowHide_1");
       var x2 = document.getElementById("div_Alternative_ShowHide_2");
       var x3 = document.getElementById("div_Alternative_ShowHide_3");
       var x4 = document.getElementById("div_Alternative_ShowHide_4");
          x1.style.display = "block";
          x2.style.display = "none";
          x3.style.display = "none";
          x4.style.display = "none";
    }

    function onclick_Alternative_ShowHide_2() {
       var x1 = document.getElementById("div_Alternative_ShowHide_1");
       var x2 = document.getElementById("div_Alternative_ShowHide_2");
       var x3 = document.getElementById("div_Alternative_ShowHide_3");
       var x4 = document.getElementById("div_Alternative_ShowHide_4");
          x1.style.display = "none";
          x2.style.display = "block";
          x3.style.display = "none";
          x4.style.display = "none";
    }

    function onclick_Alternative_ShowHide_3() {
       var x1 = document.getElementById("div_Alternative_ShowHide_1");
       var x2 = document.getElementById("div_Alternative_ShowHide_2");
       var x3 = document.getElementById("div_Alternative_ShowHide_3");
       var x4 = document.getElementById("div_Alternative_ShowHide_4");
          x1.style.display = "none";
          x2.style.display = "none";
          x3.style.display = "block";
          x4.style.display = "none";
    }

    function onclick_Alternative_ShowHide_4() {
       var x1 = document.getElementById("div_Alternative_ShowHide_1");
       var x2 = document.getElementById("div_Alternative_ShowHide_2");
       var x3 = document.getElementById("div_Alternative_ShowHide_3");
       var x4 = document.getElementById("div_Alternative_ShowHide_4");
          x1.style.display = "none";
          x2.style.display = "none";
          x3.style.display = "none";
          x4.style.display = "block";
    }


$(document).ready(function(){
   $('#pref-sliders').detach().appendTo('#appendPrefSlidersHere')
});


Button Style --- Add to StyleSheet
Code: Select all
.button_Default {
   background-color: #4CAF50;
   border: none;
   color: white;
   width: 150px;
   padding: 15px 16px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   cursor: pointer;
   display: inline-block;
   margin: 5px auto;
   font-weight: bold;
   font-family: Arial, sans-serif;
   border-radius: 25px;
}






For a certain elf:
Spoiler: show

Profile Body:
Code: Select all
<table class="border">
<tr>
<td>
<p class="fontstyle01">
<a class='autolink' href='/profile/Alts_of_Bael'><span  style='color: #9a9eef;'>Alts_of_Bael</span></a> because I clearly don't have enough elves c;
    </p>
</td>
   </tr>
   </table>
 
 

<table class="border"><br>
<tr><br>
<td>
<p class="fontstyle01 wrapper_for_RunningText"><b>Name:</b> Lehiriani
  <b>Age:</b> Young Adult (elves age slowly)
  <b>Eyes:</b> Blue
  <b>Hair:</b> Red (orange?)
  <b>Body:</b> Athletic (with some curves still)
  <b>other:</b> her mouth shape makes it look like she's constantly smirking.
  </p>
</td><br>
   </tr><br>
   </table><br>
 
 
<table class="border"><br>
<tr><br>
<td>
<p class="fontstyle01">
 
<u>General History</u> <br>
<br> 
Lehiriani comes from a world where the elves, humans, dwarves, and other races got into a long bloody war. The humans, being the<br>
most populous, had more land quarrels with the elves than anyone else, and so Lehiriani's people got sandwiched between others, <br>
and by the war's end, most of the Elven lands were completely demolished and "acquired" by the humans. <br>
<br> 
There aren't a lot of her people left, resulting in most of them retreated and disappearing.<br>
<br>
Humans and elves do not get along that well, unfortunately. Humans and Dwarves have a tenuous relationship, but Dwarves and Elves<br>
get along very well. Orcs and Centaurs are rather isolationist and have no hard feelings one way or the other. Goblins got trampled<br>
though and as a result hate just about everyone currently. The Dwarven economy is currently booming-their kingdoms growing rapidly. 
</p>
</td><br>
</tr><br>
</table><br>
 


<table class="border"><br>
<tr><br>
<td>
<p class="fontstyle01">
 
<u>Personal History</u><br>
<br>
Lehiriani chose to stay in human cities, and capitalize on her time in the war as a soldier and become a mercenary - usually doing <br>
solo jobs. She is confident in her skills, sassy, and has plenty of energy. She's an expert with a number of different weapons, <br>
and although she appears serious or sarcastic on the surface, mostly it is because she wants more people in her life. All of her <br>
family and friends were killed in the war.<br>
<br>
This makes it difficult for her personally, as she wants to learn why the humans were so particularly brutal in the war, come to<br>
terms with the result, and move on. Yet, she still wants new people in her life. Despite all this, she has a gorgeous voice and <br>
loves singing but spends most of her time in taverns reading instead of interacting with people like she wants to.<br>
</p>
</td><br>
</tr><br>
</table><br>


Stylesheet
Code: Select all
.fontstyle01 {
  font-family:Arial;
  color:#d2b48c;
  font-size:16px;
}

.border {
  border: 7px solid tan;
}

.wrapper_for_RunningText{
   white-space: pre-line;
}

User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Return to Our chat room

Who is online

Users browsing this forum: No registered users