Group Soapbox Design / Coding

Role : Designer & Coder Location : Indianapolis, IN, USA

Group Soapbox Design / Coding
I am in the process of adding visual aid. Please be patient!

This tutorial will go over the basics of IMVU group soapbox design and BB Coding aspects, as well as give a
basic refresher course in basic IMVU BB Code / IMVU Group styles. (They are different than what you would use here.
And as always, if you have a question, feel free to post it in the reply below!

Phase I. Design
What I will be doing a tutorial over is the full-page soapbox effect as seen in some bigger IMVU groups.
Like the "Pastellix" group, owned by Lyx : Link to Their Group

Basic Stuff

Dimensions need to be 740px wide, to get the full effect.
The height can vary, but we will cover that later.
How you link images:

Code:

[img]LINK[/img]
How you link websites:

Code:

[url=LINK]Whatever[/url]
Keep in mind that you will want to make things consistent, don't go nuts with the pattern(s)!

Now, as seen with the Pastellix group image, we had left white space between the dividers - this was so the group owner could add clickable content (yes, you can still design that part, but it's a tad more tricky, see the advanced portion below.). Do not make your image very huge in height, because it will take much longer for the server to load the image, instead divide it up onto 3-5 parts. Like, the Pastellix header is (740x260) and the staff portion is (740x238) instead of the whole thing being (740x493). It loads faster and when you need to edit a piece (ex. changing a officer display picture) you only have to change one part and the rest of the display is un-touched.

Role : Designer & Coder Location : Indianapolis, IN, USA

advanced soapbox
Slicing

Slicing is the act of cropping the file in equal segments to create a whole picture, when re-arranged later. For our purpose, we will use the slicing method to make elements of our soapbox linkable and clickable. Before starting, you should consider the following:

• This will take practice. You will not slice right the first time.
• Patience is key.
• You will need to use the Google URL Shortener.*
• This works in either Gimp or Photoshop, though Photoshop is represented in the screen grabs.
• Click the spoilers to view the images.

--------------------------
Step One: Open your 740x000 Section of soapbox. - for my demonstration I am using a 740x200 section for my group link buttons. Do NOT use your whole soapbox image for this, it is easier to use smaller sections for linking.

Spoiler:

--------------------------
Step Two: Using your crop tool, clip your section into smaller pieces. The images below display making the first clipping, be sure to repeat this step for all clickable elements you wish to have! ** CAUTION: Take your time clipping the sections and try to line them up as much as possible, this is the step that will be the most frustrating. In the events where I have made this, I took an older group I owned and tested out the soapbox in there first, to make sure it lined up edge to edge (740px), before I started linking in. This step will require you to add pixels, delete pixels and re-save several times.

Spoiler:

--------------------------
Step Three: Prepare your links with the Google URL shortener. It is advised to open a new Notepad/TextEdit document for this step.

• Copy/Paste in a list of the URL's you'll be needing.
• Plug the URL's in the shortener widget.
• Copy/Paste the URL into your document, underneath your original URL.

--------------------------
Step Four: Start your coding.* This coding is going to be a little different from how we would normally code. Instead of < , >, and so on we will be using brackets. or [ ]. The base coding is below, for this part I will display the images outside of spoilers to hopefully help you understand a bit better! Here's some tips before we start:

• IMVU "BBCode" is much different than the coding we use for our forum. If you wish to change the size of written text, you would write [size=9px] instead of the normal [_size=9] (taking out that underscore). Please have a glance at the "Syntax Help" for more conversions and what is really different about their coding!
• This tutorial is for a soapbox that would be all images. So, the following coding is just for placing URL's and linked images. Ya' dig?

Base Coding - Our base coding, in this tutorial, looks a lot like this.

Code:: [url=LINK][img=IMAGE][/url]

It's simple, but mighty! Please take into account, at this time, the character limit of the IMVU soapbox area. Images that have longer URL's CANNOT be shortened with the URL shortener!

Role : Designer & Coder Location : Indianapolis, IN, USA

faq

• Q: If I am not the owner of a group, how can I edit the soapbox?
• A: You must be the owner of the group to edit the soapbox, if you need to get that access granted, the group owner can transfer ownership - but the most
common solution is to send the coding to the owner with instructions on how to install the soapbox. (If you need tips on what to write, let me know and I
can add that to this tutorial.)

Location : California

Great tut thank you soo much!

Role : Designer & Coder Location : Indianapolis, IN, USA

@lilredhalo: Glad you like it! If you end up making one, mind linking me to it?
I just want to see what people create! ^_^

UPDATE: Changed the wording to the font sizing part, in the advanced portion. It should be right, now.

Role : Student Location : Griffith, IN

How would add text to a box?
For example, Pastellix's newest soapbox design. There is a box where there is text added.
How do we do that?

Role : Designer & Coder Location : Indianapolis, IN, USA

That would be added in the .PSD or .XCF (Gimp File) by hand and saved as an image. ^_^

Role : Student Location : Griffith, IN

Thank you. Very Happy

Role : Designer & Coder Location : Indianapolis, IN, USA

My pleasure! Smile

Location : California

here are the only two ive done so far. 1st is Beautiful Distress Group - http://www.imvu.com/groups/group/Beautiful%2BDistress/ and 2nd was Toxic Group - http://www.imvu.com/groups/group/%25E2%2598%25A3Toxic%25E2%2598%25A3/

Location : Brazil

Thank You!

Role : Designer & Coder Location : Indianapolis, IN, USA

Our pleasure! ^_^

Role : Designer & Coder Location : OK

I've always wondered how to do this! I feel like this will definitely take some time getting used to, so thank you for posting it and letting me get some practice! c:

» [SOURCE] Group Organizational Tools
» Dynamic DIV Homepage
» Coding Custom Cursors