'Morning, 'Afternoon, 'Evening,
Welcome to Nerva's Poorly written but Mildly helpful BB Code generators
They are ugly, they use var in (new Date()).getFullYear() but they are mildly useful.
Huh? For a guy who talks about BB code, this post of yours has almost no formatting.
Dr.Mittens'approval certifies that this thread is immune to drama.
For some time now I have been aiding people either by helping them understand how BB code works, or by jumping in and formatting the posts for them.
I soon realized that many players miss out on some of the formatting options we have on the forum. Unfortunately, my free time is really limited, and I can't really help everyone (sorry people that I've turned down
). Thus, I started making some small html/css/js generators (hosted on Codepen) for various issues that I noticed people are struggling with.
This is not the final list, more will come. I am also planing on starting BB Code Templates Thread as soon as I get some decent free time.
Oh, and be sure to check the
BB Code Repository
Right then, let's get back to business:
Simple Things
#1
BB [Code] Table Generator
Pretty easy to use:
- Enter the number of columns
- Enter the number of lines
- Generate the code for the table
- Use the button to select the table -> then Crtl C to Copy . Voila you have your BB code for the table, each cell is populated with a Default Text.
- Max Size that can be generated 99*99
#2
BB[Code] Auto Thumbnail creator
This came to life after seeing
's request
here
This one creates a thumbnail which contains the direct link to the imgur image.
- Go to your Imgur image
- Find the link that looks like this one : https://imgur.com/myCmN3m (notice that there is no png, jpg etc. extension)
- Copy the link in the the text box.
- Choose the thumbnail size that fits your needs.
- Use the corresponding copy link button -> Ctrl+C.
#3
BB[Code] Colour Tag Generator
Another thing that I've encounter while formatting posts was that people were using only the colors available in the forum editor.
(still has to be improved a bit)
- Open the link.
- Adjust the sliders until you see the colour you like.
- Generate the tag
- Use the select generated tag button to select, erhm... the tag
-> Ctrl+C.
#4
BB[Code] BB [Code] List Creator]
This one isn't that fancy, but it does save you some time.
There are 3 types of lists:
Numbered:
Lettered Lists:
Simple List
- Open the link.
- Enter the number of items in the corresponding text box.
- Use the generate button.
- Max amount of items is 99.
- Select the text. -> Ctrl + C and off you go
Fancy things
#5
BB [Code] Diplomacy Bar Generator
"How do I make those cool diplomacy bars?" is one of the top 3 things that people usually ask me.
The bar is split into 20 blocks.
[rep=Starting value, End value] color1, color2, color3, color4[/rep]
The code for a bar has 4 parts:
- green - the tag
- yellow - the starting value which indicates the starting block.
- brown - ending value which tells the site at which block to stop.
- teal - those are the four colour "slots". (colour code + transparent goes here)
- Open the link.
- Adjust the sliders until you see the colour you like.
- Set the color you want using the Set Colour Buttons
- To set transparent, click on Set Transparent then click on the Set Colour (1, 2, 3, 4) Button depending on which one of those you want to be transparent.
- Repeat Steps 2,3 or 4 until you've set all the colours.
- Set the Starting Value, should always be more than 1.
- Set the End Value, max is 100.
- When you are happy with everything, press Generate Diplomacy Bar button
- To select the text, use the Select.... button. Ctrl + C; now go declare everyone an enemy, and do it with style
#6 BB [Code] Commodity Table Creator
What does this do? I can explain, but it's better if I show you.
| Silver | ![[Image: Sake.jpg]](https://discoverygc.com/wiki/images/d/db/Sake.jpg) | 10000 | 99999 | 89999 |
| Silver | | 10000 | 99999 | 89999 |
| Silver | | 10000 | 99999 | 89999 |
| Commodity | Details | Current Stock | Max Amount | Still Needed |
| Silver | ![[Image: Silver.jpg]](https://discoverygc.com/wiki/images/5/5d/Silver.jpg) | 1000 | 9000 | 8000 |
| Silver | | 1000 | 9000 | 8000 |
Let's do this then.
Part 1 - Mandatory stuff
- Font:
- Use can use the default forum fonts (you can see them in the forum post editor)
- Check Corile's font pack
- Size:
- You can use the default disco ones ( you can see them in the forum post editor)
- Use numbers just like in any text editor.
- Colours:
- By name: red, green, blue etc.
- Hex values: #4286f4, #12ad0f etc. (Google Hex Color picker for this)
Part #2 - Getting the info in the table. (for custom header jump to part #3)
- Enter Commodity Name - self-explanatory
- Enter the commodity's Wiki link:
- use the link in the app (the green one) or click here
- copy/paste the link
- Enter direct link to commodity wiki image:
- On the same page - right corner
- Right-click on the image ->open image in new tab
- Copy/paste the link
- Enter commodity image size (widthxlenght):
- The commodity images are usually 64x64.
- I use, most of the time, 40x40.
- Enter current commodity value:
- The amount of units you already have of your commodity
- Has to be smaller than or equal to the Maximum Quantity
- Enter max commodity value:
- The maximum amount that you need.
- Has to be larger than or equal to the Current Quantity
- The remaining amount is calculated automatically.
Part #3 - Generating the custom table header
This one is pretty easy: Just enter the values you want, the above values are just an example.
Part #4 - Generating the code:
Once you have set up everything go ahead and:
- Generating header (Do not use multiple times. You only need one)
- If you want the standard header - use Generate header Code Button
- If you want the custom header - use Generate custom header Code Button
- To select text - use the Select Text Button / triple (yes, triple) click on the generated code
- Copy paste to your thread and come back to the app
- Generating table lines (Can be used multiple times)
- To generated a line - use the Generate Table Line button
- Change commodity name, wiki link etc.
- To select text - use the Select Text Button / triple (yes, triple) click on the generated code
- Copy/Paste to forum post
- Repeat until you get to the penultimate/first-to-last entry
- Generating the table footer (Do not use multiple times. You only need one)
- After you entered the info for you last commodity entry from the table
- To generate the Footer - use the generate footer button.
- To select text - use the Select Text Button / triple (yes, triple) click on the generated code
- Copy/Paste to forum post.
| |
Custom Header Example - Click image for full size | Custom Header Example - Click image for full size |
You should now have a really nice table with all your data. Also, click on the commodity icon to got the its wiki page.
Pfew, this took some time to write.
I hope some of you find this helpful. The first two comments will be reserved for future work.
That is it for today!
![[Image: KsDpsQ3.gif]](https://i.imgur.com/KsDpsQ3.gif)
![[+]](/forums/images/collapse_collapsed.png "[+]")
BBcodeTableGenerator![[Image: myCmN3m.gif]](https://i.imgur.com/myCmN3m.gif)
![[Image: i7EsbOa.gif]](https://i.imgur.com/i7EsbOa.gif)
![[Image: 6TAAxMW.gif]](https://i.imgur.com/6TAAxMW.gif)
![[Image: G3N9qKo.gif]](https://i.imgur.com/G3N9qKo.gif)
![[Image: CsFkekG.gif]](https://i.imgur.com/CsFkekG.gif)
![[Image: Pk5g7S9.png]](https://i.imgur.com/Pk5g7S9.png)
![[Image: Aiabl2I.png]](https://i.imgur.com/Aiabl2I.png)
![[Image: jIcHiVq.png]](https://i.imgur.com/jIcHiVq.png)
![[Image: O7cxrKC.gif]](https://i.imgur.com/O7cxrKC.gif)
![[Image: 0PtjKYH.gif]](https://i.imgur.com/0PtjKYH.gif)