So, as of late I'm noticing more and more people prettying up their profiles with BBcode and yet being lost on how to do certain things. Myself included. The guide already available on here is a great start, but there is SO much more that can be done that isn't covered and should be. Also, I'm not 100% sure if all BBcode is universal or if every "host" can dictate which tags will work - such as you can with CSS. So, it would be nice if either the how-to guide could be updated more in-depth or we could get an entire page of what all tags are accepted in RPR's specific BBcode.
Furthermore, it would be nice to have a list of fonts that can be used with BBcode. I've found a list before of widely accepted basic fonts but not all of them ended up working. For example, here are some very basic and common fonts, all of which I believe are default on PC.
This is Arial
This is Arial Black
This is Arial Narrow
This is Book Antiqua
This is Century Gothic
This is Comic Sans MS (ew)
This is Courier New
This is Fixedsys
This is Franklin Gothic Medium
This is Garamond
This is Georgia
This is Impact
This is Lucida Console
This is Lucida Sans Unicode
This is Microsoft Sans Serif
This is Monotype Corsiva
This is Palatino Linotype
This is System
This is Tahoma
This is Times New Roman
This is Trebuchet
This is Verdana
There may be others that our BBcode supports but I'm unsure - which is why a list would be awesome. This is also an example of a formatting option many have no idea about. Then there are things such as being able to change height and width of default youtube embeds, indenting in columns, ect.
Furthermore, it would be nice to have a list of fonts that can be used with BBcode. I've found a list before of widely accepted basic fonts but not all of them ended up working. For example, here are some very basic and common fonts, all of which I believe are default on PC.
This is Arial
This is Arial Black
This is Arial Narrow
This is Book Antiqua
This is Century Gothic
This is Comic Sans MS (ew)
This is Courier New
This is Fixedsys
This is Franklin Gothic Medium
This is Garamond
This is Georgia
This is Impact
This is Lucida Console
This is Lucida Sans Unicode
This is Microsoft Sans Serif
This is Monotype Corsiva
This is Palatino Linotype
This is System
This is Tahoma
This is Times New Roman
This is Trebuchet
This is Verdana
There may be others that our BBcode supports but I'm unsure - which is why a list would be awesome. This is also an example of a formatting option many have no idea about. Then there are things such as being able to change height and width of default youtube embeds, indenting in columns, ect.
You can also post things in superscript and subscript using (sup)(/sup) and (sub)(/sub) respectively. :>
Also, if you hover here you can add hover text using (acronym)(/acronym)
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
I'm not 100% sure I understand the request about going more in depth?
Our BBCode does not "support" fonts in any unique way. It simply converts your fonts directly into embedded CSS. From your own post:
As you can see, it turns into CSS's font family -- support for fonts is then up to the computer/browser that renders it, in identically the same fashion as if you were writing regular ol' CSS directly.
There's no special font blacklist that the RPR refuses to allow.
But it's also impossible to provide you with a list of supported fonts, because it runs by the same rules as all fonts on the web -- only fonts that are installed on the specific computer (or on a specific page, such as via Google Web Fonts) can be rendered. A 100% web safe font is a myth. You can work by statistics and say that such and such a font is 90% likely to appear, but then you get into the area of phones which can have as few as 2 fonts installed on them and all bets are off again. This is why using a list of potential fonts in the order that you'd prefer them is such a good idea.
Converting to sanitized HTML/CSS is essentially how all the tags work, except perhaps for the collapse tag which throws in a tiny sprinkle of javascript for the interaction. I've tried to keep our tags extraordinarily simple to give them the highest possible chance of working with all browsers, as there's not many browsers out there that won't render an HTML table or a strong tag.
Our BBCode does not "support" fonts in any unique way. It simply converts your fonts directly into embedded CSS. From your own post:
Code:
<br>
<span style="font-family:'Arial'">This is Arial</span><br>
<br>
<span style="font-family:'Arial Black'">This is Arial Black</span><br>
<br>
<span style="font-family:'Arial Narrow'">This is Arial Narrow</span><br>
<br>
<span style="font-family:'Book Antiqua'">This is Book Antiqua</span><br>
<br>
<span style="font-family:'Century Gothic'">This is Century Gothic</span><br>
<br>
<span style="font-family:'Comic Sans MS'">This is Comic Sans MS</span> (ew)<br>
<br>
<span style="font-family:'Courier New'">This is Courier New</span><br>
<br>
<span style="font-family:'Fixedsys'">This is Fixedsys</span><br>
<br>
<span style="font-family:'Franklin Gothic Medium'">This is Franklin Gothic Medium</span><br>
<br>
<span style="font-family:'Garamond'">This is Garamond</span><br>
<br>
<span style="font-family:'Georgia'">This is Georgia</span><br>
<br>
<span style="font-family:'Impact'">This is Impact</span><br>
<br>
<span style="font-family:'Lucida Console'">This is Lucida Console</span><br>
<br>
<span style="font-family:'Lucida Sans Unicode'">This is Lucida Sans Unicode</span><br>
<br>
<span style="font-family:'Microsoft Sans Serif'">This is Microsoft Sans Serif</span><br>
<br>
<span style="font-family:'Monotype Corsiva'">This is Monotype Corsiva</span><br>
<br>
<span style="font-family:'Palatino Linotype'">This is Palatino Linotype</span><br>
<br>
<span style="font-family:'System'">This is System</span><br>
<br>
<span style="font-family:'Tahoma'">This is Tahoma</span><br>
<br>
<span style="font-family:'Times New Roman'">This is Times New Roman</span><br>
<br>
<span style="font-family:'Trebuchet MS'">This is Trebuchet</span><br>
<br>
<span style="font-family:'Verdana'">This is Verdana</span><br>
<br>
As you can see, it turns into CSS's font family -- support for fonts is then up to the computer/browser that renders it, in identically the same fashion as if you were writing regular ol' CSS directly.
There's no special font blacklist that the RPR refuses to allow.
But it's also impossible to provide you with a list of supported fonts, because it runs by the same rules as all fonts on the web -- only fonts that are installed on the specific computer (or on a specific page, such as via Google Web Fonts) can be rendered. A 100% web safe font is a myth. You can work by statistics and say that such and such a font is 90% likely to appear, but then you get into the area of phones which can have as few as 2 fonts installed on them and all bets are off again. This is why using a list of potential fonts in the order that you'd prefer them is such a good idea. Converting to sanitized HTML/CSS is essentially how all the tags work, except perhaps for the collapse tag which throws in a tiny sprinkle of javascript for the interaction. I've tried to keep our tags extraordinarily simple to give them the highest possible chance of working with all browsers, as there's not many browsers out there that won't render an HTML table or a strong tag.
Exodus wrote:
Also, if you hover here you can add hover text using (acronym)(/acronym)
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
Exo dear...we need to discuss fonts. xP
Hello beautiful.
this is one of my favourite things. there is so much you can do to a profile with bbcode and unicode to make a profile stand out and everyone needs to know!!
i love design and i love profiles -- they are the introduction a person has to your character. the first impression. because of this i love both simple and intricate profiles because they are so, so powerful.
so i'll put some useful things here...
like moki and kim say, the use of (font=fontname) (/font) gives you the option to use a web friendly font and change the feel of a template, for sure! as long as it's installed on everyone's computer as a default font, they'll see it, otherwise they'll see the default template text imported via css.
so how do people get their aligning so precise? (color=transparent)xxxxx(/color) will nudge your item for a more precise positioning. i've seen people use alternative things but that's the one i've always used!
bbcode and unicode combine into such a powerful force for profiles; check out these character profiles and you'll see what i mean:
nominus
lightning
mama
(be sure to nudge the players if you want to derive from their layout)
you can use generators like this to create text gradients. the subtle colour changes can just make a profile so pretty. i tend to use three key colours on a profile with subtle variations of the dominant three.
there's so many cool things you can do that makes even a plain profile pop and leave a lasting effect.
will update as necessary.
ᶦᶠ ʸᵒᵘ'ʳᵉ ᵃ ᵗᶦᶰʸ ᵗᵉˣᵗ ᶠʳᵉᵃᵏ ᶫᶦᵏᵉ ᵐᵉ ʸᵒᵘ ᶜᵃᶰ ᵍᵉᵗ ʸᵒᵘʳ ᶠᵒᶰᵗ ᵒᶰ ʰᵉʳᵉ
this is one of my favourite things. there is so much you can do to a profile with bbcode and unicode to make a profile stand out and everyone needs to know!!
i love design and i love profiles -- they are the introduction a person has to your character. the first impression. because of this i love both simple and intricate profiles because they are so, so powerful.
so i'll put some useful things here...
like moki and kim say, the use of (font=fontname) (/font) gives you the option to use a web friendly font and change the feel of a template, for sure! as long as it's installed on everyone's computer as a default font, they'll see it, otherwise they'll see the default template text imported via css.
so how do people get their aligning so precise? (color=transparent)xxxxx(/color) will nudge your item for a more precise positioning. i've seen people use alternative things but that's the one i've always used!
bbcode and unicode combine into such a powerful force for profiles; check out these character profiles and you'll see what i mean:
nominus
lightning
mama
(be sure to nudge the players if you want to derive from their layout)
you can use generators like this to create text gradients. the subtle colour changes can just make a profile so pretty. i tend to use three key colours on a profile with subtle variations of the dominant three.
there's so many cool things you can do that makes even a plain profile pop and leave a lasting effect.
will update as necessary.
ᶦᶠ ʸᵒᵘ'ʳᵉ ᵃ ᵗᶦᶰʸ ᵗᵉˣᵗ ᶠʳᵉᵃᵏ ᶫᶦᵏᵉ ᵐᵉ ʸᵒᵘ ᶜᵃᶰ ᵍᵉᵗ ʸᵒᵘʳ ᶠᵒᶰᵗ ᵒᶰ ʰᵉʳᵉ
If the question is not "how does BBCode's font differ from CSS's font-family", but rather, "what are some ways to make advanced use of BBCode?" Jane wrote some wonderful tutorials for the site about how she likes to use BBCode, still available in the help center: http://www.rprepository.com/help/advanced-profile-bbcode
If a cadre of advanced profile prettifiers would like to write some follow-up articles, I'd be happy to feature those as well.
If a cadre of advanced profile prettifiers would like to write some follow-up articles, I'd be happy to feature those as well.
I want to point out that special use of unicode and small fonts are the absolute worst for people who browse profiles from mobile a lot. Half the unicode that is used doesn't load on mobile devices, and tiny fonts make reading the text nearly impossible unless you zoom in ridiculously much. (There is a reason why default text on the mobile adjustments is larger.)
You can decorate your profile however you like, but if you care about your profile visitors, try to keep functionality in mind and don't sacrifice it for design. It kind of sucks for a lot of us out there.
You can decorate your profile however you like, but if you care about your profile visitors, try to keep functionality in mind and don't sacrifice it for design. It kind of sucks for a lot of us out there.
Fiebs wrote:
so how do people get their aligning so precise? (color=transparent)xxxxx(/color) will nudge your item for a more precise positioning. i've seen people use alternative things but that's the one i've always used!
You could also null the space used between your transparent tags by just using (columns) and then (nextcol)(nextcol) ad nauseum until you've arrived at your general destination and then go from there. If you're a clean-freak in your text boxes like I am, anyway...
Merenrave wrote:
Exodus wrote:
Also, if you hover here you can add hover text using (acronym)(/acronym)
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
(Note: hover text does not underline, it's just to indicate the target area.)
Edit: also, to save on flooding this thread with unnecessary posts, I'm just going to keep adding to this one.
Another font to add is Gabriola.
Exo dear...we need to discuss fonts. xP
Oh, dear. I now fear for what I've just done... but I'll be home in a couple hours?
For even columns I usually make a quick transparent little banner and stick it in the end of each column.
I play with font size and colors a lot, as well as img align to separate large blocks of text.
Huge paragraphs of information make my brain go "nope" and not read any of it, so....spacing is key. Not sure if this is the same for everyone, but design school drilled that into my head.
Some templates work better with multiple text widgets, and 90% of the time I leave titles blank. It's my preference, though.
YouTube videos can be put into columns with an image, so that's where those transparent banners get helpful too!
Speaking of videos, I usually make them the same width as an img close to them - and sometimes, if I'm lucky, lyric videos can fit the aesthetic I'm going for. So I search for those first.
Giphy and pixlr are my friends. Big imgs do better cropped to pieces, or thinned to at least 400 (on my screen, but I also use a 40 inch monitor and that makes things difficult LOL) if you're aligning them to put text next to.
I'm trying to think of everything I do and suggest to others when helping them w their code.....but for now, there's that!
I play with font size and colors a lot, as well as img align to separate large blocks of text.
Huge paragraphs of information make my brain go "nope" and not read any of it, so....spacing is key. Not sure if this is the same for everyone, but design school drilled that into my head.
Some templates work better with multiple text widgets, and 90% of the time I leave titles blank. It's my preference, though.
YouTube videos can be put into columns with an image, so that's where those transparent banners get helpful too!
Speaking of videos, I usually make them the same width as an img close to them - and sometimes, if I'm lucky, lyric videos can fit the aesthetic I'm going for. So I search for those first.
Giphy and pixlr are my friends. Big imgs do better cropped to pieces, or thinned to at least 400 (on my screen, but I also use a 40 inch monitor and that makes things difficult LOL) if you're aligning them to put text next to.
I'm trying to think of everything I do and suggest to others when helping them w their code.....but for now, there's that!
You are on: Forums » Suggestions & Development Discussion » More BBcode tips
Moderators: Mina, Keke, Cass, Auberon, Claine, Ilmarinen, Ben, Darth_Angelus