Post by • Ambrose • on Mar 31, 2020 8:12:48 GMT -8
The forum in question is in maintenance mode, but if one needs to see it I will gladly send the URL in a message. We don't want to open the forum to the public until it's all done and ready.
This won’t be easy to explain because I’m not that skilled with coding. In fact, I didn’t even know that a code from a certain host other than ProBoards would be compatible with ProBoards’s structure, but I realize it’s just a matter of HTML and CSS, and JavaScript as needed.
Because it was from a different host, a lot of things are missing. I have asked in Support if I can convert the Gift tab to a simple button or link, and I’m awaiting a response. In the meantime, I’m trying to add back the ProBoards elements where needed, including the custom profile fields. Now, I have never done it this way before, and we won’t know yet what we want showing in our mini-profiles. We do know what we want showing in our profiles when someone comes to look at our characters.
The default features we need to include are the online/offline, last post, and message features. We will probably add the Gift button at the end, and the Alias (who the player is).
For our custom profile fields, we already have some set up for the mini-profile. However, there are going to be two pictures because the Hover Image for the mini-profile would be smaller than the one showing in the profile at this time. The other fields are:
Age
Race
(If Student)
House / Year
(If Staff)
Occupation
Subject (if Mentor)
Sexual Orientation | Relationship Status
Exclusively for the profile, we would also include
Introduction || History
Appearance || Personality
And a tracker for threads posted as URLs.
I’m not worried about styling them right now. I’m just trying to figure out how to include them either way. The House will probably be an icon.
We used a code called "Land of a Billion Lights" by someone using a different host for their forums (available through a website called RPG-Directory.)
This is what we have for User Profile:
Here's what we are using for the CSS. Everything is still as it was when installed; we haven't tried to mess with the CSS yet because we're trying to figure out the User Profile first.
This won’t be easy to explain because I’m not that skilled with coding. In fact, I didn’t even know that a code from a certain host other than ProBoards would be compatible with ProBoards’s structure, but I realize it’s just a matter of HTML and CSS, and JavaScript as needed.
Because it was from a different host, a lot of things are missing. I have asked in Support if I can convert the Gift tab to a simple button or link, and I’m awaiting a response. In the meantime, I’m trying to add back the ProBoards elements where needed, including the custom profile fields. Now, I have never done it this way before, and we won’t know yet what we want showing in our mini-profiles. We do know what we want showing in our profiles when someone comes to look at our characters.
The default features we need to include are the online/offline, last post, and message features. We will probably add the Gift button at the end, and the Alias (who the player is).
For our custom profile fields, we already have some set up for the mini-profile. However, there are going to be two pictures because the Hover Image for the mini-profile would be smaller than the one showing in the profile at this time. The other fields are:
Age
Race
(If Student)
House / Year
(If Staff)
Occupation
Subject (if Mentor)
Sexual Orientation | Relationship Status
Exclusively for the profile, we would also include
Introduction || History
Appearance || Personality
And a tracker for threads posted as URLs.
I’m not worried about styling them right now. I’m just trying to figure out how to include them either way. The House will probably be an icon.
We used a code called "Land of a Billion Lights" by someone using a different host for their forums (available through a website called RPG-Directory.)
This is what we have for User Profile:
<!-- <div class="container show-user">
<div class="title-bar">
<h1>View Profile - $[user.name] ($[user.username])</h1>
</div>
<div class="content cap-bottom">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
<div class="pad-all-double clear">
<div class="float-left">
<div class="float-left pad-right">$[user.avatar_medium]</div>
<div class="name_and_group float-right">
<span class="big_username" style="color: $[user.color];">$[user.name]</span><br />
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]
{else}
$[user.rank.name]<br />$[user.rank.stars]
{/if}
</div>
</div>
<div class="float-right controls">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
<div class="float-right clear pad-top">
Username: <span class="note pad-right">$[user.username]</span>
{if $[user.is_online]}
Member is Online
{else}
Last Online: <span class="note">$[user.last_online]</span>
{/if}
</div>
</div>
</div>
<div class="pad-all-double ui-helper-clearfix clear">
$[content]
</div>
</div>
</div>
-->
<div class="lbl-pro-con">
<div class="lbl-pro-img">
<!-- |field_1| -->
</div>
<div class="lbl-pro-name">
<a href="index.php?showuser=<!-- |id| -->">
<!-- |name| -->
</a>
</div>
<div class="lbl-pro-status">
$[user.last_online]
$[send_message_button]
</div>
<div class="lbl-pro-gifs">
<span class="lbl-pro-gifsrsz"><img src="http://placehold.it/175x75" /></span>
<span class="lbl-pro-gifsrsz"><img src="http://placehold.it/350x150" /></span>
<span class="lbl-pro-gifsrsz"><img src="http://placehold.it/350x150" /></span>
<span class="lbl-pro-gifsrsz"><img src="http://placehold.it/350x150" /></span>
</div>
<div class="lbl-pro-bio"><span class="lbl-slide1-title">Character Biography</span>
<br />
<!-- |field_7| -->
</div>
<div class="lbl-pro-rltnshps"><span class="lbl-slide1-title">Relationships</span>
<br />
<!-- |field_8| -->
</div>
<div class="lbl-pro-plthks"><span class="lbl-slide1-title">Plot Hooks</span>
<br />
<!-- |field_9| -->
</div>
</div>Here's what we are using for the CSS. Everything is still as it was when installed; we haven't tried to mess with the CSS yet because we're trying to figure out the User Profile first.
/*----------------------------------------------- *
LAND OF A BILLION LIGHTS - CUSTOM PROFILE
-----------------------------------------------
CODED BY THISBE OF THE RPG-DIRECTORY
----------------------------------------------- */
.lbl-center {
display: table-cell;
vertical-align: middle;
}
.lbl-pro-con {
width: 980px;
height: 512px;
margin: 0 auto 20px;
position: relative;
}
.lbl-pro-img {
width: 300px;
height: 500px;
margin: 5px;
position: absolute;
border: 1px solid rgba(238, 238, 238, .15);
outline: 1px solid rgba(238, 238, 238, .15);
outline-offset: 4px;
background: rgba(204, 204, 204, .1);
}
.lbl-pro-name {
width: 640px;
height: 40px;
margin: 0 0 0 316px;
position: absolute;
_position: relative;
font-size: 3.5em;
padding: 10px;
font-family: 'earth_orbiterregular';
color: #eee;
text-align: center;
letter-spacing: 1px;
}
.lbl-pro-name a:link,
.lbl-pro-name a:visited,
.lbl-pro-name a:active {
background: transparent;
padding: 0 15px;
position: relative;
z-index: 1;
color: #eee;
text-decoration: none;
-webkit-transition: 1.25s;
-moz-transition: 1.25s;
-o-transition: 1.25s;
transition: 1.25s;
}
.lbl-pro-name a:hover {
text-decoration: none;
color: #ff9c61;
-webkit-transition: 1.25s;
-moz-transition: 1.25s;
-o-transition: 1.25s;
transition: 1.25s;
}
.lbl-pro-name:before {
background: #eee;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
opacity: 0.15;
}
.lbl-pro-name:before {
left: 0;
}
.lbl-pro-status {
width: 659px;
height: 20px;
margin: 60px 0 0 316px;
position: absolute;
text-align: center;
font-size: .9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.lbl-pro-status a {
color: #ff9c61;
}
.lbl-pro-status a:hover {
color: #9f494d;
}
.lbl-pro-gifs {
width: 671px;
height: 87px;
margin: 80px 0 0 306px;
position: absolute;
}
.lbl-pro-gifs img {
margin: 5px 0 0 15px;
float: left;
border: 1px solid rgba(238, 238, 238, .15);
outline: 1px solid rgba(238, 238, 238, .15);
outline-offset: 4px;
background: rgba(204, 204, 204, .1);
}
.lbl-pro-gifsrsz {
width: 150px;
overflow: hidden;
}
.lbl-pro-gifsrsz img {
width: 150px;
height: 75px;
}
.lbl-pro-bio {
width: 643px;
height: 170px;
margin: 175px 0 0 320px;
position: absolute;
font-size: .9em;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 5px;
overflow: auto;
text-align: justify;
border: 1px solid rgba(238, 238, 238, .15);
outline: 1px solid rgba(238, 238, 238, .15);
outline-offset: 4px;
background: rgba(204, 204, 204, .1);
}
.lbl-pro-rltnshps {
width: 309px;
height: 125px;
margin: 370px 0 0 320px;
position: absolute;
font-size: .9em;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 5px;
overflow: auto;
text-align: justify;
border: 1px solid rgba(238, 238, 238, .15);
outline: 1px solid rgba(238, 238, 238, .15);
outline-offset: 4px;
background: rgba(204, 204, 204, .1);
}
.lbl-pro-plthks {
width: 309px;
height: 125px;
margin: 370px 0 0 655px;
position: absolute;
font-size: .9em;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 5px;
overflow: auto;
text-align: justify;
border: 1px solid rgba(238, 238, 238, .15);
outline: 1px solid rgba(238, 238, 238, .15);
outline-offset: 4px;
background: rgba(204, 204, 204, .1);
}
@font-face {
font-family: 'earth_orbiterregular';
src: url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.eot');
src: url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.eot?#iefix') format('embedded-opentype'), url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.woff2') format('woff2'), url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.woff') format('woff'), url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.ttf') format('truetype'), url('http://thisbeskins004.b1.jcink.com/uploads/thisbeskins004/earthorbiter_webfont.svg#earth_orbiterregular') format('svg');
font-weight: normal;
font-style: normal;
}
