Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Welcome to Fundayforum.com

Take a moment to join us, we are waiting for you.

Sign in to follow this  
ADMIN

IPS4-Tutorial [Guide] Group Formatting ( Should Work In Most/All Versions )

Rate this topic

Recommended Posts

Group Formatting is a great way to apply flare and personality to a usergroup, by making their names so fancy they become the envy of anyone who see's them, and there is quite a lot you can do with it. A little understanding in CSS/HTML goes a long way with these. You can really get creative and tinker away like crazy with these once you get into it (I personally find it fun, xD).

Before getting into it (for the benefit for anyone literally just stepping into this the makeup for your usergroup is configured in the form of prefix code and suffix code. Prefix code controls what comes before the code, and how the group name is formatted, and the suffix code closes off the prefix code and if you want anything like an image to appear after the username, then it's added into the suffix code.

For IPB when you go to the edit screen for a group the group formatting part is just:
Group Formatting           [                           ]  Group Name  [                           ]

FIRST BOX (PREFIX): <span style=''>
SECOND BOX (SUFFIX): </span>

So! The above code is where it all starts! Just drop the prefix part into the first box, and the suffix part into the second box. All the code you add to fab-up your usergroup will go between the apostrophes ( ' ' ) and if you are using multiple elements in your formatting you must make sure to put a space after the semicolon ( ; ). If you are unsure, don't worry I show examples of how to do this later on down the guide.

FORMAT
When we think of text format we mainly think of it's use in posts and comments. It comes in many flavours bold, italic, underline and strikethrough but all of these can be applied to group formatting too. An example of this is where staff groups have their names in bold to make them standout more, or someone who is banned has a line through their name, and I suppose some people can be weird and find uses for italic and underline in group formatting, that's cool too!

FIRST BOX (PREFIX): <span style='font-weight:bold;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-style:italic;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='text-decoration:underline;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='text-decoration:line-through;'>
SECOND BOX (SUFFIX): </span>

Buuuut... There is a simpler way of doing text style, of which I'll show below...

FIRST BOX (PREFIX): <b><span style=''>
SECOND BOX (SUFFIX): </span></b>

Or...

FIRST BOX (PREFIX): <i><span style=''>
SECOND BOX (SUFFIX): </span></i>

Or...

FIRST BOX (PREFIX): <u><span style=''>
SECOND BOX (SUFFIX): </span></u>

Or...

FIRST BOX (PREFIX): <strike><span style=''>
SECOND BOX (SUFFIX): </span></strike>


COLOUR
More than often people first think of colour when it comes to customizing the makeup of a group, and I'm not joking, an almost infinite well of possibility is with colour! You can use the HEX code of any colour you want and if you aren't into that there is still a lot of options for people that wish to specify their colour by name. Just remember if you're using HEX to include the hashtag ( # ), and if you put in a colours name and it doesn't work, then use it's HEX instead. If you wish to browse the infinate well of colours I will leave two sources for your viewing pleasure.
Colour Names: http://www.html-color-names.com/  or http://www.computerhope.com/htmcolor.htm

FIRST BOX (PREFIX): <span style='color:red;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='color:#ff0000;'>
SECOND BOX (SUFFIX): </span>


FONT
In terms of adding uniqueness to your group name, giving it it's own font is really up there! It's not that common seen either (in my experience anyway) which is a darn shame because in my opinion it's the top way to add personality to your group, and allows you to really create a unique style look between your groups. A list of fonts below!

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Now for how we actually use 'em!

FIRST BOX (PREFIX): <span style='font-family:arial;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:comic sans ms;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:courier new;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:lucida sans unicode;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:tahoma;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:times new roman;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:trebuchet ms;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style='font-family:verdana;'>
SECOND BOX (SUFFIX): </span>


SHADOW
One thing I see being askws commonly in communities like this is "How do I add shadows to usernames?" and in honesty it's easy, buuut... If you are wanting to tinker with the shadow you can change the colour and pixel ( px ) values until you get a result you are happy with. Oh! I almost forget! With the right amount of tinkering you can also make the shadow act like an outline.. Which is also! VERY COOL!

So! The shadow! Though a quick heads up, text shadow often looks like a glowing effect, but trust me.. It's still awesome!

FIRST BOX (PREFIX): <span style='text-shadow: 2px 2px 5px black;'>
SECOND BOX (SUFFIX): </span>

Now for code for making your text shadow act like an outline! I've used this quite a bit myself, and do think it looks really good!

FIRST BOX (PREFIX): <span style='text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;'>
SECOND BOX (SUFFIX): </span>


COMBINING ELEMENTS
Now you've got all these elements to choose from, it's time to start combining what we wanna use and create something awesome and unique! ...And good news! It's easy! At the start of the guide that I'd provide examples of combining the elements, so! Let's go!

  • Verdana
  • Blue
FIRST BOX (PREFIX): <span style='font-family:verdana; color:blue;'>
SECOND BOX (SUFFIX): </span>

 

  • Red
  • Italic
  • Shadow (Glow)
FIRST BOX (PREFIX): <span style='color: red; font-style:italic; text-shadow: 2px 2px 5px black;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <i><span style='color: red; text-shadow: 2px 2px 5px black;'>
SECOND BOX (SUFFIX): </span></i>

 

  • Underline
  • Indigo
  • Comic Sans MS
  • Shadow (Outline) 
FIRST BOX (PREFIX): <span style='test-decoration:underline; color:indigo; font-family:comic sans ms; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;'>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <u><span style='color:indigo; font-family:comic sans ms; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;'>
SECOND BOX (SUFFIX): </span></u>


ADDING IMAGE TO THE FORMATTING
Another great way to really make your groups look unique is to put little images before or after the names them. Remember if you want the image to be before the username then you put the code in the prefix box, and if you want it to come after the username then you put the code in the suffix box. just take extra care to remember that the code either goes before your code in the prefix box, or after your code in the suffix box!

FIRST BOX (PREFIX): <img src="" width="" height=""><span style=''>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style=''>
SECOND BOX (SUFFIX): </span><img src="" width="" height="">

Not in order to get the image to show you'll need a direct link to the image so it can be grabbed, if you are worried about your image being taken down or anything you can host it in your own webspace, or through a imaging website like imgur ( www.imgur.com ). As long as you are using the direct link to the image, it'll work. Oh! Also, don't forget to fill in the width and height numbers so the code knows what dimensions you want the image to be.  

Example for reference...

FIRST BOX (PREFIX): <img src="http://i.imgur.com/QeM3VxE.png" width="20" height="20"><span style=''>
SECOND BOX (SUFFIX): </span>

Or...

FIRST BOX (PREFIX): <span style=''>
SECOND BOX (SUFFIX): </span><img src="http://i.imgur.com/QeM3VxE.png" width="20" height="20">


FUN EXTRAS
Now! While we've explored many ways to make your group unique and fancy through formatting, there is plenty otherwise to go about it too! Here are just a few more bits of code to tinker with your group formatting!

FIRST BOX (PREFIX): <span style='font-variant:small-caps;'>
SECOND BOX (SUFFIX): </span>

And...

FIRST BOX (PREFIX): <span style='text-decoration:overline;'>
SECOND BOX (SUFFIX): </span>

And...

FIRST BOX (PREFIX): <span style='background-color:black;'>
SECOND BOX (SUFFIX): </span>

Have fun with it! Tinker around and see what dastardly level of cool, super and awesome you can come up with! Here is one you can try if you want!

FIRST BOX (PREFIX): <img src="http://i.imgur.com/QeM3VxE.png" width="20" height="20"><span style='font-weight:bold; font-family:lucida sans unicode; color:red; background-color:black; text-decoration:overline;'>
SECOND BOX (SUFFIX): </span>


THANKS FOR READING!!!
Annnnnd... There we go! I sincerely hope from the bottom of my lil; tinkers heart that you enjoyed this guide and I do hope it's helped you out, even if just a little! I welcome feedback, and if you require assistance or support don't hesitate to drop it in a comment and we'll see what we can do to help! Oh! ...And if you want to learn more about this stuff for yourself I recommend going to http://www.w3schools.com and exploring, there is a lot of goodies there to make the heart of any tinker flutter and explode! 

BEST OF LUCK!!! & HAVE OODLES OF FUN TINKERIN'!!!
P.S: Special thanks to the songs for keeping me sane during the time I was writing this! xD : Led Zeppelin - Whole Lotta Love, Flogging Molly - Seven Deadly Sins, Ram Jam - Black Betty, Muse - Panic Station, Shinedown - Sound Of Madness, Hollywood Undead - Bullet and  Queen & David Bowie - Under Pressure ) 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Forum Statistics

    1,861
    Total Topics
    7,955
    Total Posts
×