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:
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:
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:
- 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")
});