HexagonReborn

Frequently Asked Questions

How to make custom bbcode look like the standard one.

In this tutorial I will show you how to make custom bbcodes look like the standard ones.
This is how they look now:
bbcodebefore.png
bbcodebefore.png (3.89 KiB) Viewed 245 times
and this how it's gonna look after:
bbcodeafter.png
bbcodeafter.png (3.85 KiB) Viewed 244 times

I used Youtube bbcode as an example but the procedure is the same for all kind of custom bbcodes.
First thing you wanna do is to get a class that is specific for every custom bbcode in this case it's gonna be

CODE: Select all

bbcode-Youtube
To check what class you need to use right click on the custom bbcode button and select inspect element and you should get something like this:
inspectelement.png
Now that we've gathered all the info we need to open hexagaon.css file (if you intend to use both dark and light version you need open both of them and apply the the changes separately.) and add two elements for it to work.
First thing is making the text disappear by adding:

CODE: Select all

.bbcode-Youtube {
 font-size: 0;}
if you have more the one custom bbcode you can add do something like this:

CODE: Select all

.bbcode-Youtube, .bbcode-Twitch, .bbcode-Spoiler {
 font-size: 0;}
so it will apply that setting to all of your custom bbcodes.

Then we need to add an icon to the bbcode. Every custom bbcode icon needs to be added separately by adding this to the hexagon.css file below the previous addition:

CODE: Select all

.bbcode-Youtube:after {
    content: "\f16a";
    font-family: FontAwesome;
    z-index: 2;
    position: absolute;
    top: -3px;
    left: 8px;
    font-weight: 400;
    font-size: 14px;
}
You can choose the icon from this list. From that list you need the code for specific icon in this example it's "\f16a" and put it in as content value.
You might want to adjust the position of the icon in the button by manipulating with top and left setting it may differ from icon to icon.