Advanced BBCode Box

Frequently Asked Questions

[How To] Customize BBCode Icons & Toolbar

#######################################################################

BBCode icons:

Switch between ABBC3's icon sets.
ABBC3 comes with 2 retina-friendly icon sets! There is an SVG set and a PNG set. You can switch between the two sets in ABBC3's settings panel.
iconbar-png.png
iconbar-svg.png

Add or replace BBCode icons.
You can replace the icons ABBC3 provided, and add new icons for your custom BBCodes too! ALL icons must be in the same image format (SVG or PNG) as the icon bar image format you have set in ABBC3's settings panel.
  • Your new icons must have the exact same name as the BBCode. For example, the BBCode [foobar][/foobar] would work with foobar.svg or foobar.png.
  • Add your new icons to the core's phpBB/images/abbc3/icons/ directory. Note that this is not inside the ABBC3 extension. This is phpBB's own image directory. Using this directory for your custom icons means you won't lose them when you upgrade to newer versions of ABBC3!
    files.png
    files.png (12.74 KiB) Viewed 3974 times
  • You may need to purge phpBB's cache AND your browser's cache to see the new icons.
Here are some icon sources:
https://icons8.com/icons
https://iconify.design/icon-sets/

#######################################################################

BBCode sorting/order:

The top row of the ABBC3 icon bar is set in stone and displays phpBB's built-in BBCodes. The lower rows contain custom BBCodes and they can be sorted in any order from the "BBCodes" settings in the ACP. They can be sorted using either the up/down icons associated with each BBCode or you can drag-and-drop the BBCode rows into the the order you would like.

#######################################################################

BBCode toolbar color:

The background color of the toolbar can be changed with a CSS edit.

Change the background styling for the abbc3_buttons_row class in abbc3/styles/all/theme/abbc3_posting.css. You can also tweak some of the other CSS values in the file to adjust border and button colors as needed.

What about customizing the toolbar color differently for different styles? That can be done too! In the vse/abbc3/styles/ directory create a new folder named exactly the same as your style's folder name. Then save a copies of abbc3_posting.css to abbc3/styles/name-of-your-style/theme/ and make any styling changes.

What about the BBCode icon colors? If you are using the SVG icons, they can be edited in a text editor and you can change fill="#626262" to a new hexadecimal color code that works better with your new toolbar color.

Next you will have to minify the CSS files you edited, and save it with the .min.css extension.

Here are some useful links:
Use CSS Minifier to minify CSS files.
Use Ultimate CSS Gradient Generator to design your own gradients.

You will also need to empty your browser's cache to see the changes.

Warning: Make a backup of the CSS files you create, add and/or change because they could be lost when you update this extension. You will need to re-upload your custom CSS files again after the update.