Formatting your Storefront [Guide]
Posted: Thu Feb 28, 2013 3:15 amHi there! I'm Maltropia. You may or may not know me, but I'm a reasonably regular GE&Ter whose greatest advantage seems to be my knowledge of forum formatting - BBCode. I tend to be pretty hopeless with the actual content side of my storefronts, but people see my nicely formatted threads and assume I know what I'm doing. I don't, but I know how to give the impression that I do.
You see, the thing that binds together all the really good storefronts, the ones with hundreds of posts, isn't what they sell or who they are. Yes, being well-known or selling arms is always a help, but the most important thing is having a storefront that looks good. I know there are people who'll kill me for saying that, but in all honesty I rarely give a second glance to anything that just consists of a few pictures thrown around the place and maybe a line of plain text next to each. Anyone can make a storefront look presentable with just a bit of time and patience, and the end result can be something that looks very sleek and professional and will draw in customers without effort.
In this guide, I'll be describing some of the most useful bits of coding for when you're building a storefront. You'll be surprised just how ugly it looks when you're typing it up, but when you press the Preview button - and eventually Submit - it will look amazing.
So, without further ado, I'll move onto the actual guide and stop using these [align] and [tab] tags that I love so much.
You see, the thing that binds together all the really good storefronts, the ones with hundreds of posts, isn't what they sell or who they are. Yes, being well-known or selling arms is always a help, but the most important thing is having a storefront that looks good. I know there are people who'll kill me for saying that, but in all honesty I rarely give a second glance to anything that just consists of a few pictures thrown around the place and maybe a line of plain text next to each. Anyone can make a storefront look presentable with just a bit of time and patience, and the end result can be something that looks very sleek and professional and will draw in customers without effort.
In this guide, I'll be describing some of the most useful bits of coding for when you're building a storefront. You'll be surprised just how ugly it looks when you're typing it up, but when you press the Preview button - and eventually Submit - it will look amazing.
So, without further ado, I'll move onto the actual guide and stop using these [align] and [tab] tags that I love so much.
"Wait, you were using codes there?" say you. Yes, that's right. Notice how each paragraph starts with an indent, like when you're writing by hand? For that we have the [tab] codes, which look like this:
- Code: Select all
[tab=30][/tab]-Your text goes after the tab-
and looks like this:
-Your text goes after the tab-
The number in there is how many pixels the line will be pushed to the right. If you're using tags to align the content to the right then the [tab] will go on the right of the line.
I usually only use [tab] for roleplay, when I have long blocks of text, and for letters, where it can look very professional especially when put it before your "Dear sir". Play around a bit with the size of the indentation to see what suits your own needs for each occasion.
I also mentioned [align] tags earlier. Without a doubt, these are some of the handiest tags around, as they let you put text anywhere you want it to be. The ones people know best are the right and center, which do exactly what they say on the tin. Here's an example of how to format it:
- Code: Select all
[align=right]Look at me, I'm way over here![/align]
[align=center]Right in the middle - can't miss this.[/align]
And it looks like this:
Look at me, I'm way over here!Right in the middle - can't miss this.
The third one - my personal favourite - is justify, which makes the text stretch a bit to fill the line. I won't provide an example since it's essentially the same as above, but you can see the results at the start of this post.
So now that content text formatting is out of the way, what next? Well, I should probably have started with headers, so we'll get onto that now. Many storefronts go to the trouble of making out a separate picture for each header, so that they can have a nice font, shaded lettering, a picture, or whatever. While that definitely helps with the overall image, they're not strictly necessary. What matters is that it stands out, which can be accomplished simply by making the font bigger or recolouring it.
The basic style of header is the "bigger is better". Often this is just bolded text, but that hardly stands out at all. Let's try making it bigger.
Our Products
A definite improvement, but let's see if we can't make it even better.
OUR PRODUCTS
Now the font looks more distinct from the rest of the thread, since it's all capitalised, but it can be varied as much as you want. You may prefer an even larger font size, or you might try italicising or underlining the header. Colours work well too, but make sure you're consistent throughout the thread and that they actually look good.
In the larger storefronts, which sell many different things or have separate threads for their catalogues, you'll frequently see a Table of Contents towards the start, so that's what I'll move onto next. The most basic form is a plain list, but we can do better than that with some judicious code magic. The Table I'll use for this example comes from my most successful storefront.
The first thing I advise is the use of the [box.] tags. Some storefronts, especially my own, go a bit overboard with these, but one or two can be put to great effect. You'll also notice it tends to fill the page, so put [floatleft.] tags around it and it will stick to one side. Let's see what our Table of Contents looks like in a box:
Not too bad, but there are a few things we could do to improve it. It's a list, for one thing, so we can make use of the [list.] tag here. Since it's an ordered list, you can put =1 to make each bit appear with a number and =I for Roman numerals. I also like to make the box's header stand out; not a lot, but enough that it's noticeable. Finally, [hr.] tags will put in a horizontal line which can be used anywhere you want and is coded like so:
- Code: Select all
[hr][/hr]
and looks like so:
A second one can be used for added effect.
So, let's see how it looks now, shall we?
Does the job, I think, though of course it's up to you to decide what goes in and what doesn't and how the whole thing is presented. Something to keep in mind is that your text will appear directly adjacent to of any float tags you may be using, so if you want the text to appear below you'll have to skip a lot of lines. There may be a better way, but I don't know it.
If you've looked at the coding for the table, you'll have noticed a few interesting bits to the URLs. Most specifically, the p=8296164#Hist and other such endings. When you're looking a post, its specific link can be found by clicking the Post icon in this bit:
by Maltropia ยป Tue Jan 22, 2013 12:26 amand copying that. You can, if you like, link to the post specifically with [post] tags which give this: A storefront and are formatted like this:
- Code: Select all
[post=12621915]A storefront[/post]
But why the #Hist? That's one of the things I find most useful. Normally the URL will say p=12621915#p12621915 at the end, or something like that, but you can make the bit after the # link to a subsection of a post by using [anchor] tags. Basically, you take the text/header/picture you want to link to, drop a tag around it that says
- Code: Select all
[anchor=yourtexthere]Whatever you're linking to[/anchor]
yours is quite fine, I'm sure mine wouldn't be any better.