Gasrforum
HomeLandingContactStaffMemberlistSend creditsRegisterLog in

GASR News

Xmas Charity Volunteers
Nov 28, 2016 #event

It's almost time for our annual GASR Xmas Charity Event, and we are in need of volunteers who would be willing to make artwork for GASR's donors. If you are interested, please click here to sign up. The deadline to become a volunteer is Dec 10.

GASR Secret Santa
Nov 14, 2016 #event

It's time for GASR's annual holiday event: the Secret Santa gift exchange! Get your hot cocoa to marshmallow ratio perfect and your mistletoe hung up because it's time to get those art gifts wrapped and under the tree for a happy holiday surprise. Click here to join the fun, and make sure to sign up before the 25th of November!

Halloween Scavenger Hunt
Oct 29, 2016 #event

It's about to get spooky with the Halloween scavenger hunt! Put on your masks, makeup, and your witch hats because everyone can join! Young, old, artist, non-artist, passer-by, moose, potatoes, or any living or my favorite… non-living may join. Click here to join the fun. This event lasts from Oct 31st - Nov 14th. Check out the cool prizes!

Breast Cancer Awareness
Oct 17, 2016 #event

October is Breast Cancer Awareness month. The event mods have created an event for everyone to show support to those who have been affected by breast cancer. Click here to join.

Artist of the Moment

TOUHOU

Visit my shop View my bio

I'm a self taught artist/editor and was once an Instagram blogger but now I spend most of my times on IMVU doing DP art and maintaining a steady # of orders from various amazing people! One of my best accomplishments was winning 1st place locally in a Japanese Quiz Bowl in my state and won a chance to compete nationally against other states in Washington D.C. and so here I am still embracing my studies in Japanese although sometimes people think I look or am Japanese because I'm Asian haha. My favorite things are Anime, Utaite, Vocaloid, KPop, Fashion (especially Minimalism and Harajuku), Video Games, and Aesthetic Art :)

Online Staff

Staff Status Updates

STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS
STATUS






Statistics

We have 24597 registered users
The newest registered user is Tokins

Our users have posted a total of 1501410 messages in 29060 subjects

GASR Time


Go to page : 1, 2  Next
Tue 29 Dec 2015 - 21:33


Hey guys!  So quite a few of you ask the same question regarding tables and other odds and ends, and
since the post I created explaining them is linked most of the time, I decided to make it its own topic.  
If you've ever ventured into someone's shop and wonder how they made it all fancy with the neat squares
full of info, you've come to the right place!  If you have any further questions, don't hesitate to post them
here.  Any new information can be gladly added to what I already have.  


Index:

Creating a Table & Customization  |  GASR Compatible Fonts  |  Various Codes & Tricks  |  Premade Thread Templates  |  Art Programs  |  Updates


Contributors: @Krist, @Mar, @Diabolus, @Kia


Disclaimer:  
Copying all or parts of this guide is not allowed without my permission.  
I created this guide for GASR and HBAD only.  


Last edited by Queen on Sun 2 Oct 2016 - 5:21; edited 24 times in total
Tue 29 Dec 2015 - 21:33
CREATING A TABLE

You can get started with the table code the forum gives you by default and customize it from there.  The table button is viewable only on the Reply, Edit Post, and New Topic pages, not quick reply.



Code:
[table][tr][td][/td][/tr][/table]



We'll go over a few things that will help you as you explore the guide and possibly make it easier for you to understand how to put everything together.  

A colon (:) is used after style tags to select/read the style information you gave it afterwards.  (Border:1px)  -  Semicolons (;) are used to separate each tag section.  (Border:1px;background:transparent)  -  All of this information sits within quotation ("") marks.  

This allows you to add an infinite number of style options to your tables, customizing it to suit your needs.  

VOCABULARY

Style Tag - A style tag (or tag for short) is used to define style information.  (Ex: background-color, border, center, font, etc.)
Opening/Closing Tag -  These tags are used to begin and end style settings for specific information.  (Ex: Opening: <b>  Closing: </b>)


CUSTOMIZATION

Index: Use Ctrl+F to Jump to these Specific Sections in this Post

Centering Text & Your Table
Adjusting Size (Width/Height)
Borders
Adding a Background Color/Image
Changing the Font Color
Opacity
Adding a Table Within a Table Effect
Shadows



Centering Text & Your Table

This is important information.  Using proper centering techniques will prevent forumotion from deleting half of your shop coding once you hit preview/submit it.


Centering Text:

There are two ways you can center your text within the table.

1) Using the regular center tags around the text you want centered.
Code:
[center][/center]

2) Adding a "text-align" tag to your table data(td) style coding.

Code:
[table][tr][td style="text-align:center;"]your text here[/td][/tr][/table]

The text-align tag will center all text within the table.  You do not have to use center tags if you use this option.  If there is a section of text you do not want centered using it, just use left or right tags to adjust them where you want.  Everything after the respective closing tags will be automatically centered again.

Example:

This text is centered.

This text is aligned to the left using a left tag.

Code:
[left][/left]

This text is aligned to the right using a right tag.

Code:
[right][/right]

This text is automatically re-centered without the need of tags.

Centering Your Table

Using center tags around your table to center it can cause part of your coding to be deleted.  It is highly recommended to use a margin tag within your table style coding.

Code:
[table style="margin: 0 auto;"][tr][td]your text here[/td][/tr][/table]

This table we used in the centering text example is now centered within the post by adding "margin: 0 auto;".  Remember, the center tags should only be used within your table coding to prevent any issues.

Example:

This text is centered.

This text is aligned to the left using a left tag.

Code:
[left][/left]

This text is aligned to the right using a right tag.

Code:
[right][/right]

This text is automatically re-centered without the need of tags.



Adjusting Size (Width/Height)


You can make set table sizes by adjusting the width and height by using those variables in your table style coding.  All you need to do is adjust the pixel amounts to get the size you want.  

Click for Width Recommendations:
 

Click for Height Recommendations:
 


Code:
[table style="width: 500px; height: 50px;"][tr][td][/td][/tr][/table]



Borders
Code:
[table style="border: 0px solid #000000;"][tr][td][/td][/tr][/table]

0px - Thickness of border.  Adjust to a higher number.
solid - Border style.  Leave or change to a border style listed below.
#000000 - Color of border.  Change to any six digit hex code.


For a groove, ridge, inset, or outset border, you will need to specify two colors for the border effect to take place.

Code:
[table style="border: 0px inset #000000 #ffffff;"][tr][td][/td][/tr][/table]

Border Styles:

  • dotted - Preview
  • dashed - Preview
  • solid - Preview  (Most popular)
  • double - Preview
  • groove - Specifies a 3D grooved border. The effect depends on the border-color value.  You will need to assign two colors.  Preview
  • ridge - Specifies a 3D grooved border. The effect depends on the border-color value.  You will need to assign two colors.  Preview
  • inset - Specifies a 3D grooved border. The effect depends on the border-color value.  You will need to assign two colors.  Preview
  • outset - Specifies a 3D grooved border. The effect depends on the border-color value.  You will need to assign two colors.  Preview


Click here for a neat gadget for you to play around with border styles, and it even shows options of having multiple styles on the same border.

Borders are versatile.  They can be placed in different positions for various reasons, such as separating different items in the same table.  

border-top
border-left
border-right
border-bottom


Example below using a border-right property.

Code:
[table style="margin:0 auto;"][tr][td style="border-right: 1px solid #000000;"]This is something in a table.[/td][td]This is something else in a table.[/td][/tr][/table]

This is something in a table.

This is something else in a table.




Adding a Background Color/Image
Code:
[table style="background-color: #000000;"][tr][td][/td][/tr][/table]

This adds a background color to your table.  Change #000000 to any 6 digit hex color code you prefer.  Common ones are #000000 for black, #ffffff for white.

Code:
[table style="background-image:url(image link here);"][tr][td][/td][/tr][/table]

This allows you to use an image for your table background instead of a solid hex color.  Just add in the link to whatever image you desire between the parenthesis and you're all set!  (Make sure you're not deleting the parenthesis.  They're needed!)



Changing the Font Color
Code:
[table style="color:#ffffff;"][tr][td][/td][/tr][/table]

This tag will change the font color of the table.  Again, you can change it to any 6 digit hex color code.  Easy peasy?

Any other font stylings, such as font-family, font-style, etc. are not discussed because you can do those easily within your table using GASR's formatting buttons.



Opacity
Code:
[table style="opacity:1.0;"][tr][td][/td][/tr][/table]

Adjusting opacity works best when you have the "adding a table within a table effect" going on.  (Scroll down, it's the next code.)  Of course, you can adjust the opacity to your main table to give it a faded effect as well.  1.0 gives the table its full opacity, meaning it won't be see-through.  Lowering the number lowers the opacity.  

1.0 = 100% opacity | 0.75 = 75% opacity | 0.5 = 50% opacity and so on.  These are just examples.  If you wanted the opacity to be 33%, you would just adjust it to "opacity:0.33;"

Table with 100% opacity. (opaque)
 
Table with 50% opacity.
 
Table with 20% opacity.



Adding a Table Within a Table Effect
table-ception

We're not actually adding another table into the code, we're just jacking up the padding on the main table to give it that effect.  Very simple.  You just add "padding:00px;" to the table style tags and adjust the "00px" to an amount you prefer.  Then you add separate td style tags based on your preferences.  Here is a code I wrote up quickly to give you an example.  We'll also be utilizing the opacity style mentioned right above.

What we're adding:  Padding on the main table and a background color.  Padding, background color, set width, and a 70% opacity effect for the table data (td).

Code:
[table style="padding:30px; background-color:#FF69B4;"][tr]
[td style="padding: 5px; background-color:#ffffff; width:500px; opacity:0.7;"][/td][/tr][/table]


Hello!  Doesn't this look fancy??

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 

You can one up this by adding a background image to the main table instead of just a solid background color!  

Code:
[table style="padding:30px; background-image:url(http://weneedfun.com/wp-content/uploads/2016/08/Tumblr-Ocean-Backgrounds-10.jpg);"][tr]
[td style="padding: 5px; background-color:#ffffff; width:500px; opacity:0.7;"][/td][/tr][/table]



Hello!  Isn't this even FANCIER???

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



Shadows

Text Shadow

Code:
[table style="text-shadow: 0px 0px 0px #000000;"][tr][td][/td][/tr][/table]

The text-shadow tag adds shadow to text. It can accept up to 4 properties to customize the shadow. They do not need to be separated by a comma, only a space.

Properties In Order: Horizontal Shadow, Vertical Shadow, Blur Radius, Color
Example: text-shadow: 2px 2px 1px #000000;

You do not need to have all 4 properties to have a shadow, but the horizontal and vertical properties are required for every shadow.

Some Examples of Different Shadows

1x1px red shadow; No blur.

Code:
[table style="text-shadow: 1px 1px #ff0000;"][tr][td]1x1px red shadow; No blur.[/td][/tr][/table]

2px horizontal red shadow; 2px blur. Must add 0 placeholder for vertical or else it will read your blur settings for it.

Code:
[table style="text-shadow: 2px 0 2px #ff0000;"][tr][td]2px horizontal red shadow; 2px blur.[/td][/tr][/table]

1px vertical green shadow; no blur. Must add 0 for horizontal placeholder or else it will read your vertical settings for it.

Code:
[table style="text-shadow: 0 1px #81bcab;"][tr][td]1px vertical green shadow; no blur.  Must add 0 for horizontal placeholder or else it will read your vertical settings for it.[/td][/tr][/table]

3px "glow" shadow around all of the text.

Code:
[table style="text-shadow: 0 0 3px #ff0000;"][tr][td]3px "glow" shadow around all of the text[/td][/tr][/table]



Box Shadow

The box-shadow tag is the same as above, only this will add a shadow to your table itself, not the text within it.

Code:
[table style="box-shadow: 0px 0px 0px #000000"][tr][td][/td][/tr][/table]

This table has a 4x4 pixel shadow added to it with no blur.

Code:
[table style="margin:0 auto; text-align:center; border:1px solid #eee; width:400px; box-shadow: 4px 4px 0px #aaa;"][tr][td]This table has a 4x4 pixel shadow added to it.[/td][/tr][/table]






Last edited by Queen on Sun 2 Oct 2016 - 5:19; edited 48 times in total
Tue 29 Dec 2015 - 21:51
GASR Compatible Fonts

Want to spice your tables up with some fancy fonts?  Good, cause Arial Black can only get you so far.  Click the stand alone "A" link button which gives you the drop down list for the fonts.  Quick reply only has the defaults, but the full posting page has all of the installed ones as well.  (Again, only the full posting page has the quick table button and the full list of compatible fonts.)

It's the second to last button on this menu:



Full list:



Examples:

Code:
[font=Oswald][/font]
[font=Montserrat][/font]
[font=Exo][/font]
[font=Voltaire][/font]
[font=Unica One][/font]
[font=Six Caps][/font]
[font=Amatic SC][/font]
[font=Seaweed Script][/font]
[font=Lobster][/font]
[font=Pacifico][/font]
[font=Oranienbaum][/font]

Oswald
Montserrat
Exo
Voltaire
Unica One
Six Caps
Amatic SC
SeaweedScript
Lobster
Pacifico
Oranienbaum




Last edited by Queen on Tue 29 Dec 2015 - 22:25; edited 2 times in total
Tue 29 Dec 2015 - 21:56

Premade Thread Templates

These are free templates you can use to get your shop set-up started on GASR!  You can use them as is or further customize them to suit your needs.






Submitted by @Mar

Code:
[table style="width: 600px; text-align: center; background-image:url(https://s-media-cache-ak0.pinimg.com/236x/2c/ba/67/2cba67c514b3e79115bc227d5b87761d.jpg); no-repeat center; padding: 10px; border: 1px solid #9C9C9C; margin:0 auto;"][tr][td style="background-color: white; padding: 5px; opacity:0.95;"]

Your content goes here.

[/td]
[/tr]
[/table]






Submitted by @Mar

Code:
[table style="background-color: #ffcc99; border:5px dotted #ff9900; border-radius: 10px; padding: 5px; width: 480px; text-align:center; margin:0 auto;"][tr][td]

Your Content Here

[/td]
[/tr]
[/table]


Have a template you want to submit?  PM @Queen!




Last edited by Queen on Wed 17 Aug 2016 - 4:28; edited 17 times in total
Tue 29 Dec 2015 - 22:25
Various Codes & Tricks

Anything that doesn't fall into a category above and isn't big enough for its own category will be placed here.
 



Scrolling Text

Horizontal Example: Add text here.

Code:
[scroll]Add text here.[/scroll]

Vertical Example: Add text here.

Code:
[updown]Add text here.[/updown]


Can be found on the Reply, New Topic, and Edit Post page as buttons, accessed by clicking the More/Less Buttons button.





Horizontal Divider

I asked Jen to update the color of the horizontal divider so that it can now be viewed on white/lighter backgrounds.  This is a simple code used to separate things quickly with a 1px horizontal line.  The divider is used throughout the entirety of this thread.

Code:
[hr]



Blur Effect

NORMAL TEXT

TEXT WITH BLURRED EFFECT
Code:
[blur]text here[/blur]

TEXT WITH BLURRED EFFECT AND FONT COLOR ADDED
Code:
[blur][color=#888888]text here[/color][/blur]



Special Characters and Symbols

The website below lists all special characters that can be used safely in your shop title, throughout your shop, as bullets in a list, etc.  

Click for Website

Just click on the character/symbol you wish to use and it will automatically copy it to your clipboard.  Paste it wherever you want it to go.

DO NOT USE mobile emojis/special characters as bullets or any kind of decoration in your shop.  They are NOT compatible with forumotion and will break your code!



Always updating...


Last edited by Queen on Sun 2 Oct 2016 - 4:32; edited 10 times in total
Tue 15 Mar 2016 - 22:40
ART PROGRAMS

This is a list of the most used art programs throughout the forum.

ProgramPriceInfoDownload Link
PhotoshopFreeVersion CS2 was made free by Adobe.  Any version after CS2 will need to be purchased.


Serial Codes
Windows Serial number: 1045-1412-5685-1654-6343-1431
Mac OS X Serial number: 1045-0410-5403-3188-5429-0639
Mac: PhSp_CS2_English.dmg.bin
Win: PhSp_CS2_English.exe
Paint Tool SaiFreeThis is a custom Sai file with more than just the default brushes/settings.  You need Winrar or 7zip to open the file.Win: MediaFire Download
GIMPFreeGIMP is a generic version of Photoshop and can do pretty much anything PS can, at the cost of convenience.Mac: GIMP for Mac OS X
Win: GIMP for Windows
FireAlpacaFreeFireAlpaca is similar to Sai, but with Mac compatibility as well.Choose Your Version Here


Last edited by Queen on Sun 2 Oct 2016 - 4:20; edited 6 times in total
Thu 28 Apr 2016 - 1:38
Updates

3.23.16 - Added more information to scrolling text coding.
3.24.16 - Added information regarding borders and how they can be used solely on a specific side(s) instead of all around.
3.25.16 - Added blur effect coding under "Various Codes & Tricks".
4.6.16 - Added art program information.
7.8.16 - Added in a section explaining how to center text & center your table.
10.1.16 - Updated "Art Programs" section to include FireAlpaca, added text/box shadow property information, and added an index list to the customization post.


Last edited by Queen on Sun 2 Oct 2016 - 5:21; edited 4 times in total
Thu 5 May 2016 - 1:07
Thank you ^-^
Tue 31 May 2016 - 2:19
Is there a way to do this in an IMVU group? Is it like Soapbox coding?
Tue 7 Jun 2016 - 21:15
I'm not sure. IMVU's formatting for soapboxes is based on the group formatting, which is pretty basic in itself, but I never ventured much into using groups, so I never tested the limits.

This guide is tailored to GASR and what it allows formatting wise on the forum.
Wed 6 Jul 2016 - 1:04
@Queen - Are we allowed to use tables on our gasr profiles? o:
Wed 6 Jul 2016 - 1:07
^ Of course you can, I have one now :-D
Wed 6 Jul 2016 - 1:10
@Kelso - Awwwwwesome! Thank you ^^
Wed 6 Jul 2016 - 9:13
Ye, this stuff will pretty much work on most things that accept bbcode.

Fri 8 Jul 2016 - 14:11
Updated to add more information about centering your table and your text within it.
Today at 13:11
Page 1 of 2Go to page : 1, 2  Next