Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

MOBAFire's first Mini Guide Contest is here! Create or update guides for the 30 featured champions and compete for up to $200 in prizes! 🏆
's Forum Avatar

Help with guide coding

Creator: RiskyRebel July 21, 2021 11:50pm
RiskyRebel
<Member>
RiskyRebel's Forum Avatar
Show more awards
Posts:
3
Joined:
Jul 2nd, 2019
Permalink | Quote | PM | +Rep July 21, 2021 11:50pm | Report
Alright, I don't really do bbcode.. Pretty much ever. So I'm really clueless with this stuff.
I've been trying to do something like this:(https://imgur.com/3Wl05fL)
and I know it has to do with tables and such. but I can't figure out how I'd align all the things to center (Example being all the runes being centered but different sizes)

(Not sure why they center there.. I can attach image of how they don't center in my guide if need be)

I know I would have to make each horizontal line its own table (for the runes), and I was going to pack that entire thing into another table. So then its (Not going to close so it doesn't do it)
)td] Grasp of undying [\td]
)td] Grasp of undying [\td]
)td] Grasp of undying [\td]
(OR was it table row)
And while that all would be within a line they're uneven.. Heres an example of what I get

TEST

Also, how would I create spacing like so in my example of what I'm trying to do?
Sleepininthegarden's Forum Avatar
Show more awards
Posts:
125
Joined:
Jul 31st, 2019
Permalink | Quote | PM | +Rep July 23, 2021 11:21pm | Report
If you want to center things:
If you want to create spacing:

I'm sure there is a better way to do spacing, hope it helps!
Sovereign Kitten
<Teemo Master>
Sovereign Kitten's Forum Avatar
Show more awards
Posts:
567
Joined:
Jan 23rd, 2016
Permalink | Quote | PM | +Rep July 27, 2021 4:56pm | Report

It's not very hard, but Tables are one of the most annoying and difficult things to understand.

That'll be 1 million monies please.
The great thing about multitasking is that several things can go wrong at once.
Sovereign Kitten
<Teemo Master>
Sovereign Kitten's Forum Avatar
Show more awards
Posts:
567
Joined:
Jan 23rd, 2016
Permalink | Quote | PM | +Rep July 27, 2021 5:01pm | Report
It's more than just a bunch of td and /td for each icon, there are a bunch of weird things which is hard to explain like how you have one main table and many tables inside that one table to make it look like this, with either a table or I prefer to use columns for the resolve icon above the rest by simply using the nextcol width=150 to push it out far enough.

If you'd wanna actually learn tables, Katasandra is the one to look to or looking at her guide.
It's covers most of everything, but it's still not that easy to understand without detailed help.

Like all you're asking for is a copy pasta, which isn't going to teach you anything. It's not really something you can copy-pasta and break without knowing what you're breaking.

Code:
[columns][nextcol width=125][nextcol width=70][icon=Resolve size=70][/columns] [center] [table border-spacing=0px][tr height=3][/tr] [tr] [td] [table border="3px solid green" border-radius=200px][tr][td][icon=Grasp of the undying size=110][/td][/tr][/table] [/td] [td] [table border-spacing=0px][tr height=3][td width=20][/td][/tr][/table] [/td] [td] [table][tr][td][icon=Aftershock size=70][/td][/tr][/table] [/td] [td] [table border-spacing=0px][tr height=3][td width=20][/td][/tr][/table] [/td] [td] [table][tr][td][icon= Guardian size=70] [/td][/tr][/table] [/td] [td] [table border-spacing=0px][tr height=3][td width=20][/td][/tr][/table] [/td] [td] [table][tr][td][rule2] It's not very hard, but Tables are one of the most annoying and difficult things to understand. [/td][/tr][/table] That'll be 1 million monies please.

This isn't done with the intent of simply doing it for you, nor is it to make it look exactly the same, it'll simply break if you don't try to understand the code itself, but that's how tables work.

You can get the same kind of result with Columns much easier and less annoying.
The great thing about multitasking is that several things can go wrong at once.
Katasandra
<Lissandra Master>
Katasandra's Forum Avatar
Show more awards
Posts:
347
Joined:
Aug 27th, 2018
Permalink | Quote | PM | +Rep July 27, 2021 11:25pm | Report
There are multiple ways that lead to Rome. Some are... confusing, others are easier but perhaps not so straightforward. I'll link the code in the spoiler below so you can compare it to what Cat send. Everyone has their own way of coding and it's up to you to find one that suits you :p

Onto the original question: you can center basically anything by putting [center][/center] around it. Make sure to not forget the closing tag otherwise everything beyond gets centered too. As for spacing, this is done using 'empty' cells/columns (which are [td width=x][/td] or [nextcol width=x] without any text in it). Alternatively you can use padding (within [td] tags or any other column/table tag). Padding dictates the space between the content and the edge of the cell and it is a great way to create more space within code. This is done by adding padding=x (10 is my fav) to the [td] or [nextcol] tag. Lastly, it is also possible to gives cells/columns a predefined width, but this can be quite tedious opposed to copy-pasting padding=10px everywhere.

A few guides that might be helpful (you can do everything columns can with tables, but a lot of people seem to hate tables for some reason)
For tables:
A Table Coding Guide
For columns:
How to Use Columns
Column Guide

code

Hope it helps!

PS: you can make code 'visible' by putting it within [code][/code] tags (or by putting [[ ]] around every single tag)

You need to log in before commenting.

League of Legends Champions:

Teamfight Tactics Guide