Tips & Tricks and An Introduction To...
Usergroup Styles
by Mikers
Tutorial Was Made For MyBB Beginners (and to teach vets a few new tricks perhaps)
Scroll Below "Introduction" For Various Tricks
Well hello there gent. Sit back, relax. Get a soda or something and relax in that chair of yours as you pour your eyes through this article. Unless you're sitting up, then you're insane. You should sit down. NOW. Before I hit you. Also, here's some music to listen to while you scan through.
http://www.youtube.com/watch?v=QgaCHmxmeUo
*Ahem*
Usergroup Styles. The ability to tell a forum software to decorate a username to distinguish groups from the others. We all know 'em. We all love 'em. And we all use 'em to pimp ourselves out. This little tut here is to help you utilize this feature to the best of it's ability, and to explain a bit on how it works. It's mostly for those who are new to MyBB
Introduction
Skip this section if you already know how MyBB Usergroup Styles work. This part was made simply as an introduction to those porting over from MyBB, or those who haven't figured the system out yet. If you want to see the many tricks you can do with MyBB's Usergroup Style system, scroll below this section.
Those of you that port over from phpBB or similar softwares will find usergroup styles are quite a bit different for MyBB. Whereas you mostly fill out a couple fields in phpBB, as well as selecting a color. Usergroup Styles in MyBB run completely on HTML code, as well as CSS and a few other languages if you find out how to cleverly utilize them.
To edit your usergroups' styles, go to...
ACP -> Users & Groups -> Groups -> Edit Group (Options Button)
The
Username Style field is what'cha wanna edit.
Now, we'll check the code for one of the usergroups, in this case, Administrators. In this case, the code I currently have for my Admin's styles (very similar to the original)
Code:
<span style="color: #FF0000;"><strong><em>{username}</em></strong></span>
Full HTML in all it's glory.
Just remember, it's always simply based on HTML.
{username} should obviously dictate where the username will appear within the HTML code. And in case you're a bit rusty on HTML (which if you don't know, you SERIOUSLY need to learn), here's what each of 'em mean.
<span style="color: #FF0000;"> - This spans a different style of HTML, in this case, color. You can change the color a username appears by changing the hex code, which I highlighted in red. The hex code I highlighted is also red. If you don't really know your hexes, go find a color picker. Like this one.
http://www.colorpicker.com/
<strong> - Basically just means "
Bold".
<em> - Means "emphasize". Really, all it does is just italicize it halfway.
These are of course not the only HTML functions you can use. You can use just about any HTML function in a username if you're clever enough. Below are some tips and tricks to help you with pimping yourself out.
Tips & Tricks
Pure Basic Emphasis
I suppose to artificially lengthen this tutorial (Lol), I'll add in the basic functions to distinguish a username/usergroup.
Code:
<strong>{username}</strong>
Appears As:
Mikers
-
Appears As:
Mikers
-
Appears As:
Mikers
-
Etc.
Now for more fun stuff.
"Tagging" Text
Not really sure what to call it other than "tagging" text due to it being right next to the username. But it's pretty simple. In this case, I'll take my group "Retired Staff Members" as an example.
Code:
{username}<span style="color: #FF0000;"><strong>⌠</strong></span>
Appears As: Mikers
âŒÂ
Basically just places text with optional decoration next to their name (you can combine this with decorating the username too of course.
I do recommend you distinguish the text next to their name, to prevent others from passing themselves off as members of that group of course (if you chose to keep the username normal).
I personally like using this sometimes, due to the fact it allows me to help distinguish some groups from regular users without having to use any real fancy effect.
It's also pretty useful for people who run gaming clans and often place the text next to clan members usernames.
"Tagging" Images
It's a common function, but I think some people may overlook it a bit. This is for those people who want images next to their usernames.
This code,
Code:
<img src=LINK/PATH TO IMAGE><span style="color: #FF0000;"><strong>{username}</strong></span>
Will make your username appear as
![[Image: FounderStar3.png]](https://pulselifeent.com/forum/images/icons/FounderStar3.png)
Mikers
(whatever you placed on the image path/link will appear next to the name)
Yup. A star next to my name.
Do I want two stars? Heck yes I do.
Code:
<img src=LINK/PATH TO IMAGE><span style="color: #FF0000;"><strong>{username}</strong></span><img src=LINK/PATH TO IMAGE>
Will make your username appear as
Mikers
Username Image
The ultimate "I AM
THE BOSS" tag. This is NOT good to be used with usergroups who have multiple members, but for you admins out there who have your own usergroup, or if you're just a single admin, it's pretty cool.
Alright, this...
Code:
<img src="LINK/PATH TO IMAGE" alt="{username}"/>
Appears As:
![[Image: MichaelValentine3267387.png]](https://pulselifeent.com/forum/images/MichaelValentine3267387.png)
It replaces your text username with an image of your design.
As said, it's only good for a usergroup that was only meant for a single member.
There IS a way to allow it so users (or just admins/founder/staff) can place a link in profile field and replace their username with an image, but that's best suited for it's own tutorial, which I'll probably add some other day.
There's many many ways to customize group styles, so explore and try some different ways out. You may be pleased with what you come up with.
My Next Tutorials
Yeah, I know. This wasn't really a good tutorial. Mostly I created it as a filler to continue to work on my larger tutorials I'm creating. So as something to look forward to, the tutorials I'm working on are...
Registration Form On Index
Embed a quick registration form on the index for a no-hassle registration for users. Includes CAPTCHA support, and optional check boxes for "Are You Over {Age}?" and "I Agree To The {link}Terms of Services{/link}". So look forward to that.
Full Length/Featured Guide On Creating Custom MyBB Themes
It's about time the MyBB Community had a large manual to creating themes, methinks. So I'm gonna be doing that for all of you who need it.
Later for now, gents.