BBcode tips and tricks

[Kenshiro70]

Just wanted to create a thread where people can share tips and tricks for formatting messages with BBcode (help page link).

Tip 1: In-page navigation​

First, if you've used Headers in your message, you may have noticed that if you hover over the header text in Preview mode, you'll see a link icon pop up. After you have posted the thread, you can right-click on that, copy link, and that will give a deep link URL to that header (i.e., the page will appear scrolled to that header being on top).

https://forums.civfanatics.com/threads/civ-vii-post-mortem-crafting-a-redemption-arc.699434/#-recent-changes

You can use that to create navigation within a long post..That's good, but it has a couple of drawbacks:

1. You have to save the post first to get the URL.
2. Even if you embed with the URLSAME tag, clicking on the link reloads the page.

But if you use the ANCHOR tag it will jump within the page with no reload, and you don't need to save the post to get the URL.

To do that, go to Preview mode, hover over the Header, then right-click and copy the URL.

https://forums.civfanatics.com/forums/site-feedback.19/post-thread#-tip-1-in-page-navigation

Go to Preview mode and copy the URL. Then take the text to the right of the hashtag, including the leading dash. Now stick it in your post in an ANCHOR tag, like so:

[ANCHOR=-tip-1-in-page-navigation]This is an in-page link[/ANCHOR]

Result:
This is an in-page link

(Note that you do need the leading dash character)

Advantages:

• You can test it out in the Preview pane even before you save the post and it won't leave the page.
• It works across replies in the same page, so if you're doing a long post that you had to split into replies, you can still put in navigation across the replies.

The only real limitation is that ANCHOR can't cross pages (e.g., from a reply on page 1 to a reply on page 2). For that you'll need to use the URL.

 

[Kenshiro70]

Tip 2: Better call out displays​

“The sea was angry that day my friends, like an old man trying to return soup at a deli.”​ ​ —George Costanza, Seinfeld, Season 5: The Marine Biologist ​

This one is a little tricky. First, here's the basic template:

[INDENT=2][TABLE width="50%"]
[TR]
[th]
Insert your formatted text here
[/th]
[/TR]
[/TABLE][/INDENT]

So here's the code for the box above:

[INDENT=2][TABLE width="50%"]
[TR]
[th][LEFT]
[SIZE=5][B][FONT=book antiqua] “The sea was angry that day my friends, 
[INDENT]like an old man trying to return soup at a deli.”[/INDENT][/FONT][/B][/SIZE]
[/LEFT]
[RIGHT][FONT=tahoma]—[B]George Costanza[/B], [I]Seinfeld, Season 5: The Marine Biologist [/I][/FONT][/RIGHT]
[/th]
[/TR]
[/TABLE][/INDENT]

Here's the tricky part. You have to edit in the BBcode view. You cannot switch to the rich text view.

If you switch to the rich text view, it will remove the leading INDENT tag. But if you can click Preview to view the results (click Preview again to return toe the BBcode editor). Then you can save the result and you get a nicer box that you can use for quotes and other call outs.

Unfortunately you can't change the background color (that I know of). But you can do a fair amount of other things, including the nested INDENT. I haven't tried the FLOAT tag; that might give some interesting results as well.

Give it a try and reply if you find any other things you can do with it. Or any other tips and tricks you might know of.

Enjoy!

 

[Kenshiro70]

Tip 3: Font pairings​

If you are using lots of headers, it's worth setting the font on the header to Book Antiqua.

Tip 3: Font pairings​

If you are using lots of headers, it's worth setting the font on the header to Book Antiqua. It makes a HUGE difference in readability.

You can leave the standard font for the body. Apparently it's standard practice to have a slightly fancier font for the titles and a simpler one for the main text (I looked it up).

 

[Kenshiro70]

Tip 4: URL unfurl​

Certain sites support a preview of content:

More Options for Cool(er) Narrator - Humankind

I've said it elsewhere, but this deserves its own thread.We need more narrators and different types/characters.His one-liners are funny and all, I enjoy listing to him a lot, but most of what he says tends to be a little bit patronising.Why pick a culture? I want to be able to pick my narrator.I

community.amplitude-studios.com

[URL unfurl="true"]https://community.amplitude-studios.com/amplitude-studios/humankind/forums/169-game-design/threads/44329-more-options-for-cool-er-narrator[/URL]

Here are the guidelines for use:

• The URL must be on it's own line
• You can't put the URL address in the BBcode tag, it must be between the tags (as above)
• The site must support the Unfurl standard
• I don't think there's an index of supported sites. You'll have to test out URLs.

 

[Kenshiro70]

Tip 5: Float​

This one is pretty, but tricky, and I'm not sure how well it handles different screen sizes. It's also got some weird sizing behavior, which I'll add in as I figure out how to best utilize it. It may be too finicky to use reliably, but I'm hoping I can get it working well, as it's a nice way to add in small notes or navigation links.

---

• Players that do too well should be penalized: Power scaling in 4X games has a peculiar side-effect: snowballing, wherein early leads tend to compound over time. Success begets more success.

-------------------------------------------------------------- The snowball is the progression.​ – Boesthius (link)​

Experienced developers realize that snowballing, while unavoidable, is not necessarily undesirable. It is both a reward for a game well-played as well as a signal to the player that it might be time to increase the difficulty on their next play through.​

Firaxis decided that snowballing is public enemy number one. In their typical hamfisted fashion they decided to use Age transitions to stamp out this menace. The results play out like the Mr Bean movie Man vs Bee, in which he destroys a mansion while trying to kill a bee.​

I shouldn’t have to explain that players don’t like having their work taken from them, as it makes them feel like they are not in control of their destiny (a major violation of one of the 4X Soul tenets). Using the Age transition doubles down on this insanity by tainting a feature that long-time players were already unsure about. Age transitions have become synonymous with income tax.​

---

Spoiler BBcode source :

[LIST]
[*][B][SET_ANCHOR='FDP-AgeReset']Players that do too well should be penalized:[/SET_ANCHOR][/B] Power scaling in 4X games has a peculiar side-effect: snowballing, wherein early leads tend to compound over time. Success begets more success.
[/LIST]
[FLOAT=right][TABLE width="95%"]
[TR]
[th][COLOR="#E3ECF2"]--------------------------------------------------------------[/COLOR]
[INDENT=1][LEFT][FONT=book antiqua][B][SIZE=5]The snowball [I]is[/I] the progression.[/SIZE][/B][/FONT][/LEFT][/INDENT]

[FONT=book antiqua][RIGHT]– Boesthius ([URL='https://www.youtube.com/watch?v=5glCFM4MYiMt=1160s']link[/URL])[/RIGHT][/FONT]
[/th]
[/TR]
[/TABLE][/FLOAT]
[INDENT=2]Experienced developers realize that snowballing, while unavoidable, is not necessarily undesirable. It is both a reward for a game well-played as well as a signal to the player that it might be time to increase the difficulty on their next play through.[/INDENT]

[INDENT=2]Firaxis decided that snowballing is public enemy number one. In their typical hamfisted fashion they decided to use Age transitions to stamp out this menace. The results play out like the Mr Bean movie [URL='https://www.youtube.com/watch?v=YQ1vN_91KO0']Man vs Bee[/URL], in which he destroys a mansion while trying to kill a bee.[/INDENT]

[INDENT=2]I shouldn’t have to explain that players don’t like having their work taken from them, as it makes them feel like they are not in control of their destiny (a major violation of one of the 4X Soul tenets). Using the Age transition doubles down on this insanity by tainting a feature that long-time players were already unsure about. Age transitions have become synonymous with income tax.[/INDENT]

I suspect you could do some very interesting things if you put an image in the table instead of text. That might also help standardize the sizing, but I'm going to have to do a little experimentation.

I think I'm going to spend some time digging around the Xenforo site. Hopefully that will shed some more light.

Edit: Checked out the Xenforo site but it is mostly aimed at the administrators. However, I did confirm that FLOAT won't work with images. Oh the humanity!

The wonky sizing is that the FLOAT takes the longest line, breaks the last word to a new line, then sizes itself to the remainder of the longest line.

It is possible to insert dashes to force a longer length and then use the COLOR tag set the dashes to E3ECF2 (as I did above). You can put the dashes at any line in the text; I tested both top and bottom.

A bit fiddly, so you'll have to decide if it's worth the effort.

 

[Kenshiro70]

Tip 6: You can use other standard web fonts​

Domo Arigato Mr Roboto
Domo Arigato Mr Lato (?)
Domo Arigato Mr Standardo

[FONT=Roboto]Domo Arigato Mr Roboto[/FONT]
[FONT=Lato]Domo Arigato Mr Lato (?)[/FONT]
Domo Arigato Mr Standardo

Domo Arigato Mr Comic Sanso

What have I done!?!

Note: per the discussion below, this one doesn't work on all browsers. YMMV.

 

[Bonyduck Campersang]

Test!

 

[Bonyduck Campersang]

Again!

 

[Bonyduck Campersang]

Not working

 

[Kenshiro70]

Interesting. It works on Firefox. You on Chrome or Safari? or something else?

Guess I need to test my tricks on the other browsers too.

FYI, you just perfectly illustrated Firaxis' current QA problem. Just because something is a standard, it doesn't mean you can skip testing it on all the platforms.

 

[Bonyduck Campersang]

I'm on Vivaldi mobile browser. I switched between mobile and desktop mode but still no change.
Maybe it works on the desktop browser

 

[The_J]

In Firefox it also displays differently, but I would not sure if maybe also forum specific settings overrule some things there.
(not intentionally, just by how it's set up)

 

[Kenshiro70]

Added in a caveat to that tip. Since it seems to revert to the standard font if it doesn't work, I'll leave the tip in since it doesn't mess the formatting up.

 

[Kenshiro70]

Tip 7: Use a slightly off-black color for better readability​

Tip 7: Use a slightly off-black color for better readability (like this)​

Apparently 212427 is the magic number according to a bunch of web design sites. It's subtle, but it definitely feels less jarring.

[COLOR=#212427]Ipsum me, Mario![/COLOR]

 

[a pen-dragon]

The problem with fixed colours is that they do not adapt for different colour schemes. Anyone reading on a dark scheme will hardly be able to read this, whereas the standard colour is switched to something compatible.

 

[Kenshiro70]

The problem with fixed colours is that they do not adapt for different colour schemes. Anyone reading on a dark scheme will hardly be able to read this, whereas the standard colour is switched to something compatible.

Great point. I prefer Dark myself. That's a change @The_J or one of the other admins would have to make, and I'm not sure if Xenforo allows you to do that. Definitely not worth messing around in CSS. That's for masochists.

 

[The_J]

That can be done, I might do it the next time I have free time behind a computer (going on holidays for the next 2 weekends, so might be a while).

 

[Kenshiro70]

Tip 8: Lists support multiple paragraphs​

If you've got a list like this where you want to share more info, the LIST tag will support it (though not by default).

---

• Sid Meier’s advice is optional: There seems to be a pervasive “anti-experience” bias among the new generation of developers. It’s not just that established principles are ignored; those principles aren’t even regarded as worth learning. What is missed is that successful rule-breakers understand the rules they are breaking intimately and choose to break them in specific ways to avoid the problems the rules were designed to guard against.
  
  Regardless, when the rules in question were created by the person whose NAME IS ON THE GAME, it’s a pretty sure bet that the rules embody the “secret sauce” behind the game's success.
  
  And yet Firaxis developers cast aside multiple rules of Sid's, as covered in more detail in the Deep Dives appendix.
  .
• Too many chefs in the kitchen: Based on the game credits, the number of Designers at Firaxis tripled between Civ VI and VII.
  
  The ratio of designers to developers is also important. Fewer developers per designer means less resources to plan and build each feature out, particularly interactions with other systems and potential error conditions. That in turn means there is a much higher chance the feature will have to be polished further post-release, slowing down work on new features.
  
  If you’re looking for the smoking gun on the Rule of Thirds violation, you’ve found it.

---

Spoiler Cleanly-coded multi-paragraph lists :

[hr][/hr][LIST]
[*][B]Sid Meier’s advice is optional:[/B] There seems to be a pervasive “anti-experience” bias among the new generation of developers. It’s not just that established principles are ignored; those principles aren’t even regarded as worth learning. What is missed is that successful rule-breakers understand the rules they are breaking intimately and choose to break them in specific ways to avoid the problems the rules were designed to guard against.

Regardless, when the rules in question were created by the person whose NAME IS ON THE GAME, it’s a pretty sure bet that the rules embody the “secret sauce” behind the game's success.

And yet Firaxis developers cast aside multiple rules of Sid's, as covered in more detail in the Deep Dives appendix.
[COLOR=#F0F0F5].[/COLOR]
[*][B]Too many chefs in the kitchen:[/B] Based on the game credits, the number of Designers at Firaxis tripled between Civ VI and VII.

The ratio of designers to developers is also important. Fewer developers per designer means less resources to plan and build each feature out, particularly interactions with other systems and potential error conditions. That in turn means there is a much higher chance the feature will have to be polished further post-release, slowing down work on new features.

If you’re looking for the smoking gun on the Rule of Thirds violation, you’ve found it.[/LIST][hr][/hr]

If you just paste it into the Rich Text editor, when it converts to BBcode, it ends the LIST after each bullet point, and adds INDENT tags to each of the lines between bullet points. Not only is it hard to read, but if you miss an INDENT tag when editing, it can do weird things to the formatting. It's not fun when you see a dangling [/INDENT] tag at the end of your three-page masterpiece and then have to figure out where you goofed up.

Note the [COLOR=#F0F0F5].[/COLOR] portion in the middle. That ensures there's a space between the last indented line and the next bullet point (because HTML white space handling).

 

[DynamicSpirit]

Thanks for the tips. Related to this, a question about images: We can embed an image from an external URL into posts using this bb code:

[img]https://(url-to-the-image-online)[/img]

It used to be possible to shift the image to the right of the page by saying

[img=right]https://(url-to-the-image-online)[/img]

However that no longer works. Is there an alternative way to link to an external image and have it display on the right side of your post?