Smitefire logo

Join the leading SMITE community.
Create and share God Guides and Builds.

Create an MFN Account






Or

Coding Help & FAQ

Please review our General Rules & Guidelines before posting or commenting anywhere on SmiteFire.

Forum » Build & Guide Discussion » Coding Help & FAQ 10 posts - page 1 of 1
Permalink | Quote | +Rep by Mowen » October 13, 2016 9:05am | Report
First of all, we have a list of all the available bbcode tags here, if you're just looking for what we have and how to word it.

There are already a lot of options at the top of the text editor (click "more options" when posting comments / in chapters when writing guides) so check those out too!

When using multiple parameters such as text that is both bold and underlined, make sure the parameters are nested. This means the parameter that comes first ends last, the parameter that comes second ends second to last, the parameter that comes third ends third to last, and so on.

Example: [b][i][u]Bold Italicized AND Underlined![/u][/i][/b] = Bold Italicized AND Underlined!

Here are some useful / common coding examples:


Database Icons

[[neith]]
[icon=neith]
[icon=neith size=75]


Images and Media

When linking an image it needs to be uploaded somewhere on the internet. You then need to get the IMAGE URL (not the page url). Do this by right clicking the image and selecting "Copy Image URL", then paste into the [img] code. If you need somewhere to upload your image, you can use an image upload service like Imgur or Photobucket.

[img=http://i.imgur.com/DGBRd14.jpg] OR [img]http://i.imgur.com/DGBRd14.jpg[/img]



Resize images with the "width" parameter:

[img width=200]http://i.imgur.com/DGBRd14.jpg[/img]



Link images to other web pages using the [url] code:

[url=https://www.smitefire.com/smite/guide/the-overarching-conquest-guide-s3-patch-3-18-12069][img width=200]http://i.imgur.com/DGBRd14.jpg[/img][/url]



Center images and videos with [center], and link videos with [embed]. Be sure to get the direct video url (again, right click the video and copy the video url / paste).

[center][embed=https://www.youtube.com/watch?v=5mVYnfJS73U][/center]



Text Coding

Size 7
Size 6
Size 5
Size 4
Size 3
Size 2
Size 1

[size=#]Text Goes Here[/size]
Italic Text = [i]Italic Text[/i]

Bold Text = [b]Bold Text[/b]

Underlined Text = [u]Underlined Text[/u]

Bold Italicized AND Underlined! = [b][i][u]Bold Italicized AND Underlined![/u][/i][/b]

Hyperlink = [url=https://www.smitefire.com/]Hyperlink[/url]

Colored Text = [color=blue]Colored Text[/color]

Hex Code Colored Text = [color=#8fc9c1]Hex Code Colored Text[/color]

how to make spoilers


  • Bullet 1
  • Bullet 2
  • Bullet 3
=
[list]
[*] Bullet 1
[*] Bullet 2
[*] Bullet 3
[list]


Columns

Columns and Tables are a way to put things exactly where you want them. They can get a little complicated, but if you mess around with them you can make some very nice layouts!

Columns code goes like so, you can have as many [nextcols] as you want:

[columns]

[nextcol]

[nextcol width=50]

[/columns]
This starts the column code

This adds a column

This adds another column, that is 50px wide

This ends the column code


Example:

I made the first column 65px in width, since I knew I'd be adding a 50x50 icon to it. This way there is nice spacing between my icon and my text. This is a generally useful code for explaining abilities, classes, what have you, as people can find the icons easily then read the text!

Click here to see the code!



Tables

Now onto tables! Tables are more complicated, but you have better controls for the look of your layout. Tables work exactly the same as they do in html if you are familiar with it, and you can read html table help here.

Parameters that affect [table], [tr] and [td]: bgcolor, width, height

Parameters that affect [tr] and [td]: padding, colspan

You can add as many [tr]'s and [td]'s as you want! (tr = table row, td=table cell)

Think of rows fitting in tables, and cells fitting in rows, you have to have them in order, cells within rows and rows within tables: [table][tr][td][/td][/tr][/table]

Also there needs to be the same amount of cells per row if you have multiple rows, otherwise the layout can get funky. See my example for how to handle this with colspan.

[table]

[tr]

[td]

[/td]

[/tr]

[/table]
This starts the table code

This adds a row, you always need at least 1 row

This adds a cell to the row you just made, you need at least 1 cell

This ends the cell

This ends the row

This ends the table code


Example:
The row above has padding="10px" added to the cells so that they have some breathing room, this adds an invisible 10px border around every cell. This row I'm typing on right now has a bgcolor="#2b2727" to make it pop, as well as padding="10px" to give a nice margin. The cells to the right and left are colored white and use width="15px" to control their width. The height automatically adjusts to the height of this cell. There are also 2 more cells that are the same but without bgcolor for padding. The colspan=6 makes the number of cells in both rows even, and the width="350px" in the table constrains the size so the class icons don't spread out.

Click here to see the code!



Borders

Finally, let's go over Border options! Borders can give some extra emphasis to icons, tables, pictures, and headers, and can be customized for thickness, color, and style. Below are examples of different looks.



Border Styles


In addition, tables can also be given rounded borders using the border-radius parameter:

I have borders and border radii, huzzah!!!

Border Radius



Additional Resources

The following guides give extensive information on BBCoding, what to do and what not to do, as well as other nice things that will help you to make good guides.

Mowen
<Production Coordinator>


Distinguished (57)
Posts: 852
View My Blog
Permalink | Quote | +Rep by Branmuffin17 » October 13, 2016 9:59am | Report
Nice, Mowen!!!
Branmuffin17
<Administrator>

Awards Showcase
Show more awards

Exalted (394)
Posts: 8709
View My Blog
Permalink | Quote | +Rep by xZeroStrike » October 13, 2016 12:10pm | Report
Nice, but idk if it's just me but some of the codes don't seem to work anymore. For example the [cite] and [define] ones seem broken, and the like. Basically the very advanced ones. Anybody else?

xZeroStrike
<Hunter Master>

Awards Showcase
Show more awards

Prominent (46)
Posts: 841
View My Blog
Permalink | Quote | +Rep by IceColdPappsi » October 13, 2016 12:25pm | Report
How do I do a spoiler?

IceColdPappsi
<Master Wizard>

Awards Showcase
Show more awards

Memorable (13)
Posts: 367
View My Blog
Permalink | Quote | +Rep by xZeroStrike » October 13, 2016 12:28pm | Report
Use:
Code:
[spoiler]<Text>[/spoiler]

Result:

Spoiler: Click to view

xZeroStrike
<Hunter Master>

Awards Showcase
Show more awards

Prominent (46)
Posts: 841
View My Blog
Permalink | Quote | +Rep by Mowen » October 20, 2016 9:58am | Report
You're right xZero, some of the older / more advanced tags no longer work. We've been meaning to update that list for a while but it's a bit of a project, I will look into it though!

And thank you for helping about the spoiler! I will add spoilers to this post soon.

Mowen
<Production Coordinator>


Distinguished (57)
Posts: 852
View My Blog
Permalink | Quote | +Rep by Zilby » October 20, 2016 10:06am | Report
I still just want newlines to show in code blocks :[[[[[
Smite Account: Zilby__________Steam Account: Zilby
Blizzard: Zilby#11991_________Twitch: TheZilb

I am the most foul, cruel and bad tempered rodent you've ever set eyes upon!.. Oh, her? Yes, well... she's with me.

Feel free to PM me with any questions or comments. I can offer feedback on gameplay and BBcoding tips, as well as moderation help if needed.

Zilby
<Moderator>

Awards Showcase
Show more awards

Renowned (132)
Posts: 2074
View My Blog
Permalink | Quote | +Rep by Mowen » October 25, 2016 1:13pm | Report
Ack yeah Zilby, we are aware of this bug but it is hard to find time to fix all these little things. I'll double check with the devs how quick it should be to fix, sorry!

Mowen
<Production Coordinator>


Distinguished (57)
Posts: 852
View My Blog
Permalink | Quote | +Rep by Ozanoku » November 4, 2020 1:12am | Report
how to add an anchor link to jump to a specific part of a page in html?

Ozanoku

Awards Showcase
Show more awards

Notable (1)
Posts: 25
Permalink | Quote | +Rep by Hades4u » November 4, 2020 6:28am | Report
Ozanoku wrote:

how to add an anchor link to jump to a specific part of a page in html?

Hey! I've sent you a private message on Discord about this question. :)
Hades4u
<Community Manager>

Awards Showcase
Show more awards

Distinguished (54)
Posts: 353

Quick Reply

Please log in or sign up to post!

SMITEFire is the place to find the perfect build guide to take your game to the next level. Learn how to play a new god, or fine tune your favorite SMITE gods’s build and strategy.

Copyright © 2019 SMITEFire | All Rights Reserved

} } } } }