Change order of BBC tags

[spiros]

Is it possible to change the order of appearance when posting of certain BBC tags? For example, I want to move away the FTP from the URL tag to avoid confusion. Where can this be done?

[Kindred]

Sources/Subs-Editor.php

[spiros]

Beautiful, thank you!

[shadav]

  I thought I was the only one that this annoyed 

also when moving them around, if you want a divider in between "groups"
add before and after the ones you want in a group

Code Select Expand

array(),

[Antechinus]

You can do it with CSS too. Go on. Ask me how I know.

Well, if you do this:

Code Select Expand

#bbcBox_message>div {display: flex; flex-wrap: wrap}

That turns all the BBC buttons into flex objects, which means you can use CSS order to place them wherever you want inside the parent div. You can target them individually via their ID. For example, this will put the horizontal rule button on this site in first place in its row.

Code Select Expand

#BBCBox_message_button_1_20 {order: -1}

If you have different buttons visible for different member groups, you can target by img src instead:

Code Select Expand

#BBCBox_message img[src*="hr.gif"] {order: -1}

And you can adjust spacing between them any way you like too:

Code Select Expand

#bbcBox_message img, select[id*="BBCBox_message"] {margin: 4px 2px}

You can also do other tricks to re-style the buttons without hacking the templates. This is from my live dark theme for this site:

Code Select Expand

#bbcBox_message img, select[id*="BBCBox_message"] {
margin: 4px 2px;
background-color: #242930;
color: #C0BAAC;
font-size: 1.4rem !important;
border: 1px solid #3E4954;
}
#bbcBox_message img {
padding: 0 8px;
background-image: none !important;
opacity: .7;
}

Getting rid of the background gif images makes things much less ugly IMO. That needs !important to override the inline CSS that sets the image by default. Or, if you were doing this on your own site instead of someone else's, you could just replace the background images with transparent gif's. Then you just style them up for any look you want. Padding on images works the same way as padding on anything else: it makes a space between the image and the limits of its background. And background-color will work as you'd expect for anything else. Or, if you wanted a custom CSS gradient, you could use something like this:

Code Select Expand

#bbcBox_message img {
background-image: linear-gradient(#eee, #ccc) !important;
}


The one thing that is tricky to do with this concept is shuffling dividers around, because they don't have an ID and they all have the same src. That doesn't bother me because I don't like them anyway, so I get rid of them. I also get rid of any buttons that the admin has set to display but I don't want:

Code Select Expand

img[src*="divider.gif"], #bbcBox_message img[src*="glow.gif"], #bbcBox_message img[src*="shadow.gif"] {display: none}

[Ninja ZX-10RR]

@Antechinus that's... Something between genius and evil, not sure which one (aka, thanks, might try to play with this )

[Antechinus]

Doing the dark theme for this site was a really good exercise, because it made me think outside the box to get the look I wanted. I'm fussy about detailing, so I had to invent CSS trickery in situations when I'd usually just rewrite a template or three. It's amazing what you can do when you get right into it.

I didn't actually use flex for that theme because the default button order here doesn't bother me, but I've used flex and order for similar purposes for several other things. The CSS files for the default theme changes on the https://custom.simplemachines.org/upgrades/ pages are a good example (third link in my sig).

[spiros]

Antechinus, you are a css rocket scientist -:)
Still, for me just cut and paste did the job, much easier really.

[Antechinus]

I do agree that sometimes hacking templates is easier and makes more sense. At least once you are experienced in working with PHP templates. Some people (beginners especially) find PHP templates gnarly, and changing CSS is less likely to break their site. Always good to have options.

(I can remember when I couldn't make heads or tails of PHP syntax.)