[NEWS] New Template & Stuff!
#1
[html]
News & Updates

New Board Template & Skin!



Finally, after five months, there's a new skin! Rejoyce! Rejoyce in your FIRE, ASH, AND BRIMSTONE. Buwahaha! Celebrate your springtime with the 5th anniversary of the fire! (Aw, geez, was it really that long ago??)


The less obvious part is that the new skin is on a completely new board template as well. The general goal was to parry down the insanely specific CSS classes that the old template used and which made skinning really, really hard. The old template required a CSS file that was 3932 lines long. ._. The new one's CSS file is just 1868 lines long. Yeah. Also included with the rewrite were various modifications to overall layouts and minor tweaks in functionality. Some adjustments are more obvious than others, but some of the ones you'll notice first might include:

  • User profiles: now resemble the ones we had on the old IPB board. :)
  • User profiles: will auto-generate a link to the character's wiki if you have something in the post log field
  • Topicview: thread subtitles are now displayed
  • Topicview: reply titles have been removed altogether
  • Topicview: quick reply buttons are flush with the rest now & load faster
  • Topicview: signatures are automatically cut off if they exceed 400px in height
  • Post editor: topic icons can only be chosen for new threads, not replies
  • Post editor: previews now display in the width they'd be at when posted
  • Memberlist: now also displays OOC names
  • Misc: usernames are only colored by pack in 'who's online?'
  • Misc: fixed a bug with multi-page topics generating improper pagination links for custom "posts per page" amounts


Of course, as with all major board changes, there's a possibility we missed something! If you see anything that's off or weird-looking, or something isn't working right, please do let us know! We still need to adjust some styling in our various informational topics, but that shouldn't take more than another day or two. Pardon our dust in the meantime!


With the launch of the new template, we will be retiring the old skin, Lost One Kills Intimately. You were probably all sick of it anyway, right. 8D All new skins will use the new template.


Broken HTML Rendering



As a side note, yes, HTML still does not render properly in various parts of the board, including search results, topic review, signature previews, and PMs. This is something we'd like to see fixed, if only because it's kind of ugly otherwise, but that isn't likely to happen any time soon, if ever. :(


Technical explanation: Because HTML now only renders for past and present members, the board needs to verify permissions prior to parsing any HTML for render. Most parts of the board don't have access to individual user permissions (and they don't really need it!), so there's no way for them to know when it's okay to render the HTML. Giving them access to the permissions would require a lot of modifications of core forum files and would also require some additional calls to the database, which are really kind of needless. In the end, we don't think the time and effort it would take both on our part and the board's part to render HTML in those areas is worth it. So yeah, sorry about that! Figured we'd let you know.


Anyway, hopefully skinning will be easier from now on and it won't be another five months before you see a new skin!


Column-hiding CSS Hack



A lot of you now use the CSS hack to hide the user info column in topic views, like this. Since we've updated the template a bit, the footer areas of each post may look a bit weird. We encourage everyone wanting to hide columns in this manner to update their relevant posts using the following code only, so it will always look right in future template updates, etc. As a reminder, this hack should be used in OOC informational topics only and never in an IC thread. :>

[/html]

Code:
<style>@import url('/forum/headers/extracode/singleColumn.css');</style>

[html]

New Wallpaper


Oh yeah, you can download a wallpaper version of the art used in the new skin here. :)

Community & Spotlight Souls



Congrats to Chloe Taregan (Zita), our Spotlight Soul! Syringe (Ridpath Stelyan) is our Community Soul! Read more in our Community and Spotlight Soul topic!


[/html]
  Reply
#2
Sorry if this is the wrong place for this, but some things are off when I view the website on my Android phone (grant it, its way outdated so maybe thats the issue). I've waited tihs long to post, simply because I was trying to find a way to screenshot the issues on my phone, but apparently that is something my phone is not capable of.

First, Usernames/avatars align with the bottom of posts rather than the top.


Second, and what I really wish I could screenshot, is when viewing a joining topic where the SA has posted the Welcome to Souls text box, after the first part of the first sentence of the second paragraph, "If you've joined the game as a ..." is the last bit that is actually in the forum field. the rest continues beyond the actual forum layout. (it is on the dark background color, rather than the lighter forum/post field) If a pack leader posts after the SA, as in the case of OOC joiners, then their post shows up normally.

I hope that makes sense, its kinda hard to explain without a screenshot of what I am seeing...

[html]
<style>
@import url('http://fonts.googleapis.com/css?family=Milonga');

/*Basics re: signature*/
table.KatieDSignature {
width:500px;
height:100px;
margin:10px auto;
}

/*Basic stylings for each cell of the signature table*/
.KatieDSignature td {
text-align:center;
font-family:arial, helvetica, sans-serif;
font-size:14px;
line-height:16px;
}

/*Style and over the name field for your signature*/
.KatieDSignature td.name {
padding:25px 0 10px 0;
font-size:40px;
line-height:30px;
font-family: 'Milonga', 'times new roman', times, serif;
text-shadow:#2B2B2B 0 0 2px;
letter-spacing:-1px;
}

/*Adjustments for individual characters -- e.g., if your character has a very short name, and the font size used above is too small -- you can change them by using the ID of your character name*/
table#NAMEONE td.name { font-size:35px;}
table#NAMETWO td.name { font-size:25px;}

/*The links beneath your character name*/
.KatieDSignature td.links {
font-size:18px;
}
/*"Notes" section for your credits, a note about your character, etc.*/
.KatieDSignature td.note, span.note {
font-size:11px;
font-weight:normal;
text-transform:lowercase;
line-height:14px;
}
/*phpBB link underline fix*/
table.KatieDSignature a { text-decoration: none; }
/*Background image*/
table.KatieDSignature { background-repeat:no-repeat; background-position:center center; }
table#NAMEONE { background-image:url(YOURIMAGEURL); }
table#NAMETWO { background-image:url(YOURIMAGEURL); }
table#NAMETHREE { background-image:url(YOURIMAGEURL); }
</style>
<table class="KatieDSignature" id="NAMEONE" cellpadding="0" cellspacing="0">
<tr>
<td class="name">Bishop Russo</td>
</tr>
<tr><td class="links">
<a target="Bishop Russo Wiki" href="http://wiki.soulsrpg.com/index.php?n=Characters.BishopRusso">Character Wiki</a> &middot;
<a target="Imgur Gallery" href="http://imgur.com/a/BYtvW#0">Gallery</a> &middot;
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Katie" target="Katie D.">Player Wiki</a>
</td>
</tr><tr>
<td class="note">
Avatar by <a href="http://wiki.soulsrpg.com/index.php?n=Players.Alaine">Alaine</a>
</td></tr>
</table>

[/html]
  Reply
#3
No idea if these help, but here's shots from my mobile relating to what Katie pointed out (I hope!)

[Image: zKV2qLK.png]

[Image: gLX30kj.png]
[html]<div class="ValerianSigIcons">
<div class="packicons">
<div class="ValerianSigname"> Funny how in just one moment, things can turn upside down.
<div class="ValerianSigname2">Wish I could turn back time to when you were still around. </div>
</div>

<div class="bottom">
<div class="sigicons" id="signature-icons">
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Kitty" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="http://www.soulsrpg.com/forum/viewtopic.php?f=13&t=16051" target="_blank" title="POST LOG" class="post-log"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.KittyAdoptions" class="adoptables-available" title="ADOPTABLES available!"></a>
<a href="http://www.soulsrpg.com/forum/viewtopic.php?f=35&t=16050" class="commissions" title="COMMISSIONS"></a>
<a href="aim:goim?screenname=paintedpetz&message=%27Souls+RPG" class="player-contact" title="CONTACT: AIM"></a>
<a href="#" title="I will roleplay mature material." class="will-mature"></a>
<a href="#" class="reply-medium" title="REPLY SPEED: MEDIUM"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.ValerianCoeur" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="#" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#!" class="skill-generic" title="Valerian is a skilled gardener."></a>
<a href="#!" class="skill-hunting" title="Valerian is a skilled hunter."></a>
</div>

<div class="Valerianbuttonblock"><center>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.KittyAdoptions"><img src="http://pile.randimg.net/0/144/36029/KittyAdopts.png"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.SapientAdoptables#toc4"><img src="http://pile.randimg.net/0/144/36028/SapientAdopts.png"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.SapientAdoptables#toc4"><img src="http://sapient.soulsrpg.com/public/adoptables/Featured_Adoptable_Small.png"></a>
<a href="http://sapient.soulsrpg.com/policies/joining/"><img src="http://sapient.soulsrpg.com/public/Pride/Pride1.png"></a>
</center></div>
</div>
</div>
</div>

<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
</style>
<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Montserrat+Subrayada');
@import url('http://fonts.googleapis.com/css?family=Quicksand');

.ValerianSigIcons .ValerianSigname {text-align:center; padding:55px 0px 2px 0px; font-size:14px; letter-spacing:0px; line-height:5px; font-family: 'Montserrat Subrayada', 'times new roman', times, serif; text-shadow:#2B2B2B 0 0 2px;}
.ValerianSigIcons .ValerianSigname2 {text-align:center; padding:6px 0px 0px 0px;font-size:12px; letter-spacing:3px; line-height:10px; font-family: 'Quicksand', 'times new roman', times, serif; text-shadow:#2B2B2B 0 0 2px;}

.ValerianSigIcons .Valerianbuttonblock { margin:0 auto; }
.ValerianSigIcons .Valerianbuttonblock a { opacity:.5; filter:alpha(opacity=50%); transition:200ms linear all; -moz-transition:200ms linear all; }
.ValerianSigIcons .Valerianbuttonblock a:hover, .ValerianSigIcons .Valerianbuttonblock a:active, .ValerianSigIcons .Valerianbuttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }

.ValerianSigIcons {
width:80%;
margin:0px auto;
}

.ValerianSigIcons #signature-icon {margin:0px auto; text-align:center;}
.ValerianSigIcons .sigicons {
text-align:center;
margin:0px auto;
line-height:1em;
padding:2px 0px 2px 0px;
}
.ValerianSigIcons .packicons {
text-align:center;
margin:0px auto;
line-height:1em;
padding:2px;
}
.ValerianSigIcons a {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.ValerianSigIcons a:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
</style>
[/html]
  Reply
#4
Just wanted to add that I'm experiencing this as well on my phone (Android).
[html]<div id="signature-icons">
<a href="LINK" title="OPEN FOR THREADS!" class="open-for-threads"></a>
<a href="#!" class="reply-medium" title="REPLY SPEED: MEDIUM"></a>
<a href="#!" title="I prefer if you do NOT use graphical tables in our threads. Thanks!" class="no-tables"></a>
<a href="#!" class="apparel-accessories" title="Character typically wears a navy blue abaya, and a cotton thawb."></a>
<a href="#!" title="I will roleplay mature material." class="will-mature"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.KadarIbn-Tariq" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="#!" target="_blank" title="Character speaks Arabic, denoted by italics and bold. When they speak English, it is heavily accented." class="foreign-language"></a>
<a href="#!" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#!" class="skill-carpentry" title="Character is a skilled carpenter."></a>
<a href="#!" class="skill-stealth" title="Character is skilled in stealth."></a>
</div>
<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
</style>[/html]
  Reply
#5
i usually have the first problem on my phone, but I do not let it get to me. 'Souls isnn''''t really meant to be translated onto a phone because of quirky code boops, and as far as I can tell, it'd take some work to make it recognize mobile info that may be just too much work to even bother with. :P
[html]<div class="silvsig2">
  <div class="title">SILVANO SADIRA</div>
<span style="font-family:'Amatic SC', serif;">Now, I've learned it's better living in the moment. Enjoy youth, cause it doesn't last.</span><br>
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.CDMAdoptables"><img src="http://cdm.soulsrpg.com/public/adopts/cdmadopt.png" title="Adopt in CdM"></a><a href="https://cdm.soulsrpg.com/"><img src="http://i.imgur.com/TBrx5.png"></a><a href="http://wiki.soulsrpg.com/index.php?n=Packs.CDMAdoptables"><img src="http://cdm.soulsrpg.com/public/adopts/smallrotate.png" title="Adopt in CdM"></a><br>
<a href="https://wiki.soulsrpg.com/index.php?n=Players.Gen">Player Wiki</a> • <a href="https://soulsrpg.com/forum/viewtopic.php?f=35&t=730">Commissions</a> • <a href="https://wiki.soulsrpg.com/index.php?n=Characters.SilvanoSadira">Character Wiki</a>
  <br><span style="font-size:12px;opacity:.7;">avatar by <a href="memberlist.php?mode=viewprofile&u=3823">Lin</a></span>
</div>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
.silvsig2 {
  width:100%; margin:0px auto;font-family:garamond;text-align: center; font-size:15pt;}
.silvsig2 .title {
  margin:0px auto;
  margin-bottom: 1px;
  padding-bottom:2px;
  text-align:center;
  font-family:'Open Sans Condensed', arial, sans serif;
  font-size:22pt;
  letter-spacing:15px;
  word-spacing:4px;}
.silvsig2 a {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.silvsig2 a:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}</style>
[/html]
  Reply
#6
First problem can probably be fixed. I don't want to mess and end up breaking Kiri's wonderful templates, though, so I'll let her handle that one. x3

As for the acceptance message code -- whoops, broken tag. Should be fixed now.
  Reply
#7
I'll look into the avatar thing when I can, though I do intend to get a mobile skin done at some point too. I was hoping to get another [normal] skin done by the end of this month, but I dunno if that's gonna end up happening. x_x

kiri is a butthead; avatar by dwudles
commissions are OPEN
  Reply
#8
Yea the first ain't really an issue, more just a slight inconvenienance if anything, but figured I'd mention it since there is a mobile skin planned.

Also, I noticed the second issue in the main maintenance post too.

[html]
<style>
@import url('http://fonts.googleapis.com/css?family=Milonga');

/*Basics re: signature*/
table.KatieDSignature {
width:500px;
height:100px;
margin:10px auto;
}

/*Basic stylings for each cell of the signature table*/
.KatieDSignature td {
text-align:center;
font-family:arial, helvetica, sans-serif;
font-size:14px;
line-height:16px;
}

/*Style and over the name field for your signature*/
.KatieDSignature td.name {
padding:25px 0 10px 0;
font-size:40px;
line-height:30px;
font-family: 'Milonga', 'times new roman', times, serif;
text-shadow:#2B2B2B 0 0 2px;
letter-spacing:-1px;
}

/*Adjustments for individual characters -- e.g., if your character has a very short name, and the font size used above is too small -- you can change them by using the ID of your character name*/
table#NAMEONE td.name { font-size:35px;}
table#NAMETWO td.name { font-size:25px;}

/*The links beneath your character name*/
.KatieDSignature td.links {
font-size:18px;
}
/*"Notes" section for your credits, a note about your character, etc.*/
.KatieDSignature td.note, span.note {
font-size:11px;
font-weight:normal;
text-transform:lowercase;
line-height:14px;
}
/*phpBB link underline fix*/
table.KatieDSignature a { text-decoration: none; }
/*Background image*/
table.KatieDSignature { background-repeat:no-repeat; background-position:center center; }
table#NAMEONE { background-image:url(YOURIMAGEURL); }
table#NAMETWO { background-image:url(YOURIMAGEURL); }
table#NAMETHREE { background-image:url(YOURIMAGEURL); }
</style>
<table class="KatieDSignature" id="NAMEONE" cellpadding="0" cellspacing="0">
<tr>
<td class="name">Bishop Russo</td>
</tr>
<tr><td class="links">
<a target="Bishop Russo Wiki" href="http://wiki.soulsrpg.com/index.php?n=Characters.BishopRusso">Character Wiki</a> &middot;
<a target="Imgur Gallery" href="http://imgur.com/a/BYtvW#0">Gallery</a> &middot;
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Katie" target="Katie D.">Player Wiki</a>
</td>
</tr><tr>
<td class="note">
Avatar by <a href="http://wiki.soulsrpg.com/index.php?n=Players.Alaine">Alaine</a>
</td></tr>
</table>

[/html]
  Reply


Forum Jump: