Gasrforum
HomeLandingContactStaffMemberlistSend creditsRegisterLog in

GASR News

New Moderators Needed
Feb 19, 2017 #moderators

We are in need of new moderators! Applications are open for a Contest Mod and Technician. Click here for more information. The deadline to send applications is March 4.

GASR Mascot Contest
Jan 8, 2017 #event

As a community we’ve come to realize that GASRForum does not have an official mascot! If you have an idea for our mascot, please help us out! The deadline to submit a mascot is January 29.

New Years Event
Jan 5, 2017 #event

We are looking into making some collages that feature artwork, pixels, and screenshots from 2016. These collages will be featured on GASR's social media. If you are interested in submitting your favorite works from 2016, please click here. The deadline to submit art is January 15, 2017.

Xmas Charity - Begin Donations
Dec 11, 2016 #event

It's the season of giving and what could be better than giving to those who are most in need? In order to help others celebrate the holidays we'd like for all of GASR to come together and help donate money to those who are less fortunate and to help put a smile on a child's face this year! Click here to donate. The deadline to donate is December 20.

Artist of the Moment

GUROE

Visit my shop View my bio

Hi, I'm Kori. I joined GASR in 2014 and have grown to love the community and people here. I'm a self taught hobby artist but I've liked to draw and paint ever since I can remember. I didn't get into using a tablet till a few years ago- and I love it. My family has always been a really big supporter in whatever I do, so I hope to continue and make it a more serious thing. I believe there's always room for me to improve so that's what I plan to do.

Online Staff

Staff Status Updates

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






Statistics

We have 25891 registered users
The newest registered user is xRobbyBoy

Our users have posted a total of 1554082 messages in 29987 subjects

GASR Time


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


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 Sat Feb 04, 2017 11:12 pm; edited 25 times in total
Tue Dec 29, 2015 2:33 pm
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 Sat Oct 01, 2016 10:19 pm; edited 48 times in total
Tue Dec 29, 2015 2:51 pm
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 Dec 29, 2015 3:25 pm; edited 2 times in total
Tue Dec 29, 2015 2:56 pm

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 Tue Aug 16, 2016 9:28 pm; edited 17 times in total
Tue Dec 29, 2015 3:25 pm
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 Sat Oct 01, 2016 9:32 pm; edited 10 times in total
Tue Mar 15, 2016 3:40 pm
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 Sat Oct 01, 2016 9:20 pm; edited 6 times in total
Wed Apr 27, 2016 6:38 pm
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 Sat Oct 01, 2016 10:21 pm; edited 4 times in total
Wed May 04, 2016 6:07 pm
Thank you ^-^
Mon May 30, 2016 7:19 pm
Is there a way to do this in an IMVU group? Is it like Soapbox coding?
Tue Jun 07, 2016 2:15 pm
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.
Tue Jul 05, 2016 6:04 pm
@Queen - Are we allowed to use tables on our gasr profiles? o:
Tue Jul 05, 2016 6:07 pm
^ Of course you can, I have one now :-D
Tue Jul 05, 2016 6:10 pm
@Kelso - Awwwwwesome! Thank you ^^
Wed Jul 06, 2016 2:13 am
Ye, this stuff will pretty much work on most things that accept bbcode.

Fri Jul 08, 2016 7:11 am
Updated to add more information about centering your table and your text within it.
Page 1 of 2Go to page : 1, 2  Next