How to make your profile easier to edit and nicer looking

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

How to make your profile easier to edit and nicer looking

Postby Someone92 » Wed Jun 17, 2020 6:02 am

In this thread I will present simple and short code snippets aiming to make your profile look nicer and more readable.

I will periodically expand the list.

If you want to know how something specific is done ask in this thread, if I know how to do it I'll add it to this thread.
Or, ask me in the chat: SOIB

.






1.)

Many who have tried to add html code to your profile properly have run into the following issue:

You have written your profile, and added sensible formatting to make it readable:
Use HTML For Profile Body_Before.jpg

Then you want to e.g. add a link to a picture, and thus enable "Use HTML For Profile Body", and suddenly the formatting is screwed up:
Use HTML For Profile Body_After.jpg

The straight-forward, but very tendious solution is to add a <br> every time you want to have a linebreak.

However, there is a way more elegant solution:

- Check the box before "Use HTML For Profile Body"
- Add this to Profile Body
Code: Select all
<div id="wrapper_ProfileText">Add your entire profile text here.</div>

-Add this to "Stylesheet"
Code: Select all
#wrapper_ProfileText  {
  white-space: pre-line;
}






2.)

The following code makes your profile-image appear in the center of the page, and all text you write beneath it:

- Add this to "Stylesheet"
Code: Select all
.profile-image-container{
  width: 100%;
  text-align: center;
}






3.)

The following code adds a sex symbol (♂, ♀, ⚥) directly to the right of your character's name:

Sex_Symbol_Right Side.jpg
Sex_Symbol_Right Side.jpg (6.81 KiB) Viewed 3651 times


- Add one of these anywhere to "Profile Body"
Code: Select all
<span id="sex-symbol"> ♂</span>

<span id="sex-symbol"> ♀</span>

<span id="sex-symbol"> ⚥</span>


- Add this to "JavaScript"
Code: Select all
$(document).ready(function(){
   $('#sex-symbol').detach().appendTo('#charname')
});


- If you want to change the color of the sex symbol add one of these to "Stylesheet"
Code: Select all
#sex-symbol  {
  color: #6060FF; //Male;
}
#sex-symbol  {
  color: #D93838; //Female;
}
#sex-symbol  {
  color: #C32AAF; //Herm;
}






4.)

The following code adds a sex symbol (♂, ♀, ⚥) directly below your character's name:

- Add one of these anywhere to "Profile Body"
Code: Select all
<div id="sex-symbol">♂</div>

<div id="sex-symbol">♀</div>

<div id="sex-symbol">⚥</div>


- Add this to "JavaScript":
Code: Select all
$(document).ready(function(){
   $('#sex-symbol').detach().appendTo('#charname')
});


- If you want to change the color of the sex symbol add one of these to "Stylesheet"
Code: Select all
#sex-symbol  {
  color: #6060FF; //Male;
}
#sex-symbol  {
  color: #D93838; //Female;
}
#sex-symbol  {
  color: #C32AAF; //Herm;
}

You can also use this code to add anything else directly underneath your profile name and above the profile picture.





5.)

Want to remove the profile name at the top of your profile?

- Add this to "Stylesheet"
Code: Select all
#charname {
  display: none;
}






6.)

Want to add a button to your profile that toggles the visibility of a portion of your profile?

- Add this to "Profile Body":
Code: Select all
<button id="button_ShowHide_1" class="button" onclick="onclick_ShowHide_1()">Click here to show content (You can replace this text with anything you want)</button>
   <div id="div_ShowHide_1">
      This text is hidden when loading the profile, and becomes visible / invisible when pressing the button
   </div>


- Add this to "Stylesheet":
Code: Select all
#div_ShowHide_1 {
    display: none;
}


- Add this to "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 = "Click here to show content (You can replace this text with anything you want)";
   } else {
      x.style.display = "block";
      y.innerText = "Click here to hide content (You can replace this text with anything you want)";
   }
}

- Instead of "Show" and "Hide" you can also write different texts.
- If you want to add more than one button simply copy&paste everything and change every "1" to another number.

- If you want to customize how the button looks add this to "Stylesheet":
Code: Select all
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}






7.)

Want to add an audio player to your profile? That is surprisingly easy.

1. You need to have the file either in MP3, WAV or OGG format.
2. Upload the audio file in question to a website where it can be directly accessed, e.g. https://www.sndup.net/.
3. Add the following to "Profile Body":
Code: Select all
<audio controls>
    <source src="link to your audio file" type="audio/mpeg">
    <source src="link to your audio file" type="audio/wav">
    <source src="link to your audio file" type="audio/ogg">
Your browser does not support the audio element.
</audio>

- You need only one of those source lines. The "type" has to match the format you have uploaded.





8.)

If you write a lot of text in your preference sliders sometimes it is hard to discern where the description of one kink ends and the other begins. This code adds a thin dashed border around your prefs to eliminate this problem.

- Add this to "Stylesheet":
Code: Select all
td {
    border: 1px dashed grey;
    padding: 6px 2px;
}






9.)

Change the text of "As Pred" and "As Prey":

- Add this to "JavaScript":
Code: Select all
$(document).ready(function(){
   var x = document.getElementById("pref-show-pred");
   var y = document.getElementById("pref-show-prey");
   x.innerText = "Replacement for As Pred";
   y.innerText = "Replacement for As Prey";
});






10.)

You want to have multiple buttons (in this example 4) to show / hide different parts of your profile, like here:
https://rp.aryion.com/profile/SOIB

Note that you can add the
onclick=""
to pretty much any other object you want as well, e.g. img, span.

- Copy this to the box beneath "Profile Body"
Code: Select all
<button onclick="onclick_Alternative_ShowHide_1()">Button 1</button>
<button onclick="onclick_Alternative_ShowHide_2()">Button 2</button>
<button onclick="onclick_Alternative_ShowHide_3()">Button 3</button>
<button onclick="onclick_Alternative_ShowHide_4()">Button 4</button>

<div id="div_Alternative_ShowHide_1">Here you write Information_1</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">Here you write Information_4</div>


- Copy this to the box beneath "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 */
}


- Copy this the box beneath "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";
}






11.)

Change the position of the pref sliders:

- Copy this to the box beneath "Profile Body"
Code: Select all
<div class="wrapper_PrefSliders"><span id="appendPrefSlidersHere"></span></div>


- Copy this to the box beneath "Stylesheet"
Code: Select all
.wrapper_PrefSliders  {
   white-space: normal;
//   font-family: Arial, sans-serif;
//   font-size: 16px;
   line-height: normal;
   padding: 0px;
}


- Copy this the box beneath "JavaScript"
Code: Select all
$(document).ready(function(){
   $('#pref-sliders').detach().appendTo('#appendPrefSlidersHere')
});






12.)

An easy way to change the name of your character at the top of your profile.

- Copy this the box beneath "JavaScript"
Code: Select all
$(document).ready(function(){
  $("#charname span").text("Add Char Name Here")
});
Last edited by Someone92 on Sat Oct 15, 2022 6:19 am, edited 20 times in total.
User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Re: Simple code to make your profile look nicer

Postby Jeice » Sat Jun 20, 2020 11:07 pm

These tutorials would be improved with screenshots showing the default profile behavior, then showing what the code changes.
User avatar
Jeice
Intermediate Vorarephile
 
Posts: 410
Joined: Sun Mar 12, 2006 12:00 am

Re: Simple code to make your profile look nicer

Postby Rumor » Thu Jun 25, 2020 11:04 am

Not some bad stuff. For images, if you don't mind hosting and linking them from elsewhere rather than directly uploading, you can get a loooot of flexibility with this code.

Code: Select all
<img src="IMAGE LINK HERE" alt="OPTIONAL:  THIS TEXT WILL DISPLAY IF THE IMAGE FAILS TO LOAD" height="60%" width="60%" align="left" style="padding-right:25px"/>


Height and width being percentages means the image will scale to the display. In this case, the image will take 60% of the display window's height and width. If you resize the window, the image will scale appropriately. This happens to make the image much more friendly to mobile and small monitor users. Though you can also use absolute pixel values instead of percentages if needed.

Align should be self explanatory. Left, right, center.

Padding is how many prey the image has eaten how many pixels are between the image and other elements. You'll need to change/add some for left, right, top, or bottom depending on how you want things.

You can use this code to add multiple images when and where necessary and even line them side by side with a little tweaking without having to deal with massive long horizontal scrolls.


Additionally, because I am tired of seeing unreadable buttons, here's button code that I've frankensteined from other button codes over the years. It's small, elegant, and I can't make the code anymore compact without breaking it.


Code: Select all
<div style="margin-top:5px">
<button onclick="$($(this).parent().children()[1]).toggle('Blind');">
BUTTON TEXT HERE!
</button>
<div style="display: none;">

TEXT TO SHOW/HIDE IN BUTTON HERE!

</div></div>


That goes in the main profile. The below goes into Stylesheet.

Code: Select all
button
{
  color: #000;
}


The button color will change the color of the text on the button. The code I show makes the text black, which is good because the button is white by default. This is a pretty basic button that shows/hides one chunk of text/images/whatever. If you want something fancier, like those buttons that display one thing in a specific spot and hide the other stuff, you'll have to look it up on your own.


And some other things...

Code: Select all
<p>
TEXT HERE
</p>


This formats the text as a paragraph and auto-adjusts to whatever device the user is using. Using this separately on multiple paragraphs in a row will ensure there'll be exactly one blank line between each one. If you need more blank links after one, then you can just use the classic <br/> after it. You can also add to this code to do different things, like center the text, such as...

Code: Select all
<p style="text-align:center">
TEXT HERE
</p>


Meanwhile...

Code: Select all
<hr style="width:50%; height:0px;"/>

OR

<hr/>


This will draw a line in the color of the text across the screen, starting from the center. The bottom code will keep a default max width and minimum height whereas the above code you can use to make the line shorter or add height to it. Note that adding height will not make the line thicker, but it'll start making it into a box, which can be useful if you need it to be!

For an example of how it all works, you can see all of that code in action on my profile by clicking here. The profile image is SFW, though maybe don't click it if anyone is in the room who might raise an eyebrow at a shirtless male anthro. Either way, remember to toy with your window size if you can to see how everything auto-adjusts.
User avatar
Rumor
Somewhat familiar
 
Posts: 145
Joined: Tue Aug 23, 2011 1:08 am

Re: Simple code to make your profile look nicer

Postby Someone92 » Fri Sep 25, 2020 2:40 pm

I added how to make buttons that toggle the visibly of portions of your text, e.g. to initially hide additional pictures of your character.



@Rumor:
It is good practice to use Stylesheet and JavaScript as much as possible instead of adding it to the profile itself.

E.g. in your image example you can add this to "Profile Body":
Code: Select all
<img class="linkedImage" src="IMAGE LINK HERE" alt="OPTIONAL:  THIS TEXT WILL DISPLAY IF THE IMAGE FAILS TO LOAD">


And this to "Stylesheet":
Code: Select all
img.linkedImage{
   height="60%"
   width="60%"
   align="left"
   style="padding-right:25px"
}


At first glance it seems to be more cumbersome, but if you link multiple images to your profile you only need to add >> class="linkedImage" << to each of them instead of >> height="60%" width="60%" align="left" style="padding-right:25px" <<
This also makes it much easier to change how the site should handle the linked image, as you only need to change it once in Stylesheet.

In addition, you can reuse everything in Stylesheet for every single one of your profiles. I use practically the same Stylesheet and JavaScript in all my profiles.
User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Re: Simple code to make your profile look nicer

Postby Rumor » Fri Oct 16, 2020 3:54 pm

Yeah, I usually only have one image on my profile or, if I have a second one, it's usually in a spot that needs a little different formatting anyway (usually padding). So I've not added much to the style sheets myself. And if you're referring to the button code... honestly, that thing is cobbled together from chunks of other codes and any time I touch it, it breaks. If any more of it could be off loaded to style or java (the latter of which I don't really know), that'd be great since I do use the buttons fairly often.
User avatar
Rumor
Somewhat familiar
 
Posts: 145
Joined: Tue Aug 23, 2011 1:08 am

Re: Simple code to make your profile look nicer

Postby Someone92 » Fri Oct 23, 2020 3:39 pm

Added 7.) How to add an audio player to your profile.
User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Re: Simple code to make your profile look nicer

Postby Someone92 » Wed Feb 03, 2021 8:48 am

Changed

$(window).load
to
$(document).ready

to make the changes happen more quickly.

Added
8.) How to make pref sliders with lots of text better readable
and
9.) How to change the text in the "As Pred" and "As Prey" boxes
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: Yandex [Bot]