[CODE] text signature

POSTED: Thu Jan 24, 2013 12:42 am

Notes
  • I use @import to draw CSS from my personal server and only need to update it once to have ALL of my character's signature styles update. Using IDs (#NAMEONE in the CSS and id="NAMEONE" I can make adjustments to individual signatures as needed, without updating every signature manually. Change NAMEONE in both instances (CSS and HTML) in order to use an ID to declare your character's signature.
  • Please replace "textSignature" when you use this resource. If everyone is using the same classes to style their signatures, we're gonna have some problems. Use Find and Replace (CTRL + H in Windows) and replace "textSignature" with "playernameSignature" -- using your OOC name or player name instead of just "text."
  • The buttons will center when you put them in your signature, no worries.
  • Remember your signature preview does not parse HTML. Look at an old post to view your signature.

Example
Character Name
Character is sick from 1 Feb–10 Feb.
Player is absent from 28 Jan–3 Feb.
Avatar by Artist


Code
Code: Select all
html]
<style>
   @import url('http://fonts.googleapis.com/css?family=Englebert');
   
   /*Basics re: signature*/   
   table.textSignature {
      width:500px;
      height:100px;
      margin:10px auto;
   }

   /*Basic stylings for each cell of the signature table*/
   .textSignature 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*/
   .textSignature td.name {
      padding:25px 0 10px 0;
      font-size:40px;
      line-height:30px;
      font-family: 'Englebert', '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*/
   .textSignature td.links {
      font-size:18px;
   }
   /*"Notes" section for your credits, a note about your character, etc.*/
   .textSignature td.note, span.note {
      font-size:11px;
      font-weight:normal;
      text-transform:lowercase;
      line-height:14px;
      }
   /*phpBB link underline fix*/
   table.textSignature a { text-decoration: none; }
   /*Background image*/
   table.textSignature { 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="textSignature" id="NAMEONE" cellpadding="0" cellspacing="0">
<tr>
   <td class="name">Character Name</td>
</tr>
<tr><td class="links">
   <a target="_blank" href="#">Link</a> &middot;
   <a target="_blank" href="#">Link</a> &middot;
   <a href="http://wiki.soulsrpg.com/index.php?n=Players.PLAYERNAME" target="_blank">Player Wiki</a>
</td>
</tr><tr>
<td class="note">
   Character is sick from 1 Feb&ndash;10 Feb.
   <br/> Player is absent from 28 Jan&ndash;3 Feb.
   <br/> Avatar by <a href="#">Artist</a>
</td></tr>
</table>

<a href="http://wiki.soulsrpg.com/index.php?n=Packs.SalsolaDirectory#adoptNPCs"><img src="http://soulsrpg.com/salsola/public/images/adoptionpx/featured_adoptable_sm.png"></a>

<a target="_blank" href="http://soulsrpg.com/salsola/policies/joining"><img src="http://soulsrpg.com/salsola/public/pride/salsola_88x31_sie.png" title="JOIN THE FAMILY!" /></a>

<a href="http://wiki.soulsrpg.com" target="_blank"><img src="http://soulsrpg.com/images/pride/promo/soulswiki_88x31.png" title="EDIT THE WIKI!" /></a>[/html]
Myrika Tears

User avatar
Sie
Luperci Chaos Star And it always, at the end, came round to the same place again.
the gunslinger's lament
Rota Vitae
the mask & the marrow

POSTED: Tue Jun 25, 2013 3:09 pm

Soo umm... it provides the resource for a background image, but what if I want just an image on the side of it? (like in my current signature)

I would use the code from my current sig, but it was just so damn complicated and this one is soooo much easier. X_x

User avatar
Sammiie
Luperci A kiss with a fist is better than none
I WANT YOU
I WANT YOUR EYES
I WANT YOUR WORDS

POSTED: Thu May 15, 2014 10:40 pm

I am notoriously dumb with code, but I can't get Cal's or Lila's to display the font I want them to?

EDIT: Cal's shows Arial to me, and Lila's does Comic Sans, but Cal's is supposed to do Belleza (from google apis) and Lila's is supposed to be Tangerine.
Lila Jordans



User avatar
Katie

POSTED: Thu May 15, 2014 10:47 pm

Code: Select all
   @import url('http://fonts.googleapis.com/css?family=Tangerine');


Gotta be in quotes like images. I fixed Lila's. :>
Myrika Tears

User avatar
Sie
Luperci Chaos Star And it always, at the end, came round to the same place again.
the gunslinger's lament
Rota Vitae
the mask & the marrow

POSTED: Thu May 15, 2014 10:59 pm

...I knew it was just a little detail somewhere. v.v' Sheesh. I was like "the first one worked? this one doesn't? but?"
Lila Jordans



User avatar
Katie

POSTED: Thu May 15, 2014 11:08 pm

Thank you! I think I have 'em figured out now. It doesn't help that the site doesn't stick quotes around 'em, so if you just copy the import code, you have to add the apostrophes in.
Callum Knight

Casa di Cavalieri
Second Officer (NPC)
User avatar
Katie
Luperci Pupsitter White Knight Rage, rage against the dying of the light

POSTED: Thu May 15, 2014 11:16 pm

No worries! I have been bitten by that one before. @__@
Myrika Tears

User avatar
Sie
Luperci Chaos Star And it always, at the end, came round to the same place again.
the gunslinger's lament
Rota Vitae
the mask & the marrow

Templates

cron