Login

chimeranyx · 05-30-2021, 04:26 PM

As you probably know, in-game profiles accept HTML and CSS style sheets. The unfortunate thing, however, is that a lot of us aren't very... versed in such things.

That's where this thread comes in - It's here for everyone to share their tips, tricks, and code if they're so inclined.

I, personally, use this website for previewing my HTML, and this website for various symbols that can be used in text. Unfortunately, a lot of alt codes have been phased out for emoji, and I have no clue if they'll work as symbols or not.

Miller · (This post was last modified: 02-01-2022, 05:49 AM by Miller.)

(05-30-2021, 04:26 PM)chimeranyx Wrote: As you probably know, in-game profiles accept HTML and CSS style sheets. The unfortunate thing, however, is that a lot of us aren't very... versed in such things.

That's where this thread comes in - It's here for everyone to share their tips, tricks, and code if they're so inclined.

I, personally, use this website for previewing my HTML, and this website for various symbols that can be used in text. Unfortunately, a lot of alt codes have been phased out for emoji, and I have no clue if they'll work as symbols or not.

BYOND only supports a handful of attributes in maptext when it comes to CSS.

The current usable attributes are:

As for how to handle a style sheet.

Style Sheets allow you to predefine elements (the <b> tag for example) for everything in a document and generally allow you to make your HTML more uniform and easier to modify/change, while having additional features not in standard hypertext markup documents; you can precisely define sizes and list alternatives for fonts with style, although the latter doesn't work too well on BYOND from quick tests.

An example style sheet would be.

Code:
css

#ID{font:bold 11pt 'BlackChancery'; color:#F00;}

.class{font:italic bold 15pt 'Calibri'; color:#00F;}

b{color:#0F0;}

html

<div id=ID>This is bold and red.</div>

<div class=class>This is italic, bolt and blue.</div>

<b>This is green and bold.</b>

As you can see here, an element denoted by a # would be an ID, while an element denoted by a . is a class and you can modify preexisting HTML attributes with a style sheet.

An ID is generally meant to be unique/for a singular part of the document but there's no consequence for listing everything as an ID, it also saves text-space if you care about ASCII artwork.

This is also an incredibly handy resource if you're curious about what each of the attributes do specifically.
https://www.w3schools.com/cssref/

Miller · (This post was last modified: 07-02-2021, 11:53 PM by Miller.)

To give an example of a profile utilizing CSS and HTML. I made a quick mock up to show how you can easily utilize CSS for your profile.

All of this goes into the style sheet option on your profile.

As for the actual visible HTML portion of your profile. It'd look something like this:

The results? (Not meant to be pretty by any means.)

[Image: H61TQMs.png]

The main benefit when it comes to the usage of Style Sheets within a profile is the amount of organization and the fact that you no longer have to type the same <font color="#FFFFFF"> over and over and over and over again. It saves a ton of time and effort as definitions are shared across your entire profile.

lalchi

I'm waking up this thread to talk about

FONTS !

If you people want to have fonts for your profile which everyone can read without to have to download anything, your safe bet is to use HTML Fonts.

And yet, if you look up for it, you'll notice that not everything works still.
So here we go, i'm going to put the fonts i found which SHOULD work for everyone.

(if there's a mistake or something missing, don't hesitate to let me know.)

Working HTML Fonts :

- Arial (Also the default font. You don't have to change anything to have this font.)

- Arial Black (only works on style sheet)

- Courier New

- Comic sans MS (Only works on style sheets) (Why whould you use this ?)

- Georgia

- Impact

- Times new roman

- Trebuchet MS (Only works on style sheets)

- Verdana

- Lucida Console (Only works on style sheets)

- Tahoma

- Calibri

- Cambria

- Consolas

- Verdana

- Dejavu sans

- Cardinal Alternate

How to use HTML font ? :

It's very simple, it's only one command

Code:
<p style=font-family:"Times new roman">

If put like this, the font will apply on all the text written after that command. You can close with </p>

Code:
<p Style=font-family:"Times new roman"> Everything here will be in times new roman. </p>

<p Style=font-family:"Verdana"> Everything after that command will be in verdana.

Everything here will be in times new roman.
Everything after that command will be in verdana.

Not everything work on HTML. Certain font works only on the style sheet, so...

How to use font as style ?

First you need to go to your profile option and click on "Edit style sheet"

You'll get to a text window where you can write your CSS style sheet.
There's many possibilities listed by miller above this post.

You first need to name your style and then apply the attributes you want.

You state your new style with a "." and then name it.
You put your attributes between "{ }"
You separate and end your attribute with ";"

Code:
.title {Font-family:"Times new roman";}

.text {Font-family:"Verdana";}

Once your CSS style sheet done, you need to apply it to your HTML text.
For this, the command is simple.
You ask for a "span" and then call as a class the name you gave to the style you want
Just like the <p> command. You can close it to only apply it to a certain area.
If you don't close, the style will be applied to everything written after the command.

Code:
<Span class="title"> This text is in times new roman </span>

<span class="text"> This text is in Verdana

This text is in times new roman
This text is in Verdana

(Note : Div works as well. But i personnaly prefer Span.)

lalchi · (This post was last modified: 03-21-2022, 05:34 PM by lalchi.)

This may be a cursed or not cursed thing to make you learn but...

DID YOU KNOW ?

You can put symbols and emoji on your profile.

_____________________________________

How do you do this ?

Obviously it's not going to be the simple click and send.
But every web browser has their set of emoji set by default that can be entered through HTML.

And guess what ? It turns out that BYOND clients actually act as a web browser.

So if you put the correct code for your symbol/emoji, it will appears as beautiful as ever on your splendid profile. Big Grin

They are usually assigned to two codes. One decimal and the other Hexadecimal.
For our SL2 profile. We are going to use decimal codes.

They all work the same :

&#(code);

"&#" to start,
";" to end. (don't forget it)

they work as a word. So you just have to put those directly on your text.

Example :

writting :

Code:
<p> This is my cat : &#(128008); (without parenthese)

Gives :

This is my cat : 🐈

_____________________________________

How and where do i found all those codes for symbols and emojis ?

Thanksfully our greatest free guide on internet give us all we need to know for us to put as many emoji as we want and can.

Althought you need to know that they are all separated to different category :

You have :

The arrows ←

https://www.w3schools.com/charsets/ref_utf_arrows.asp

Math operators ∀

https://www.w3schools.com/charsets/ref_utf_math.asp

Box drawings ╬

https://www.w3schools.com/charsets/ref_utf_box.asp

blocks elements ▞

https://www.w3schools.com/charsets/ref_utf_block.asp

Geometrics shapes ◉

https://www.w3schools.com/charsets/ref_u...metric.asp

Misc symbols ☠

https://www.w3schools.com/charsets/ref_utf_symbols.asp

Dingbats ✉ (for all the secrets/mystery lovers)

https://www.w3schools.com/charsets/ref_utf_dingbats.asp

Emojis ☝

https://www.w3schools.com/charsets/ref_emoji.asp

and finally. The emoji smileys ?

https://www.w3schools.com/charsets/ref_e...mileys.asp

_____________________________________

And there !

You now know how to put symbols and emoji on your profile

Now, you just need to put your background color in fluo pink, your text on comic sans and yellow color

and you are finally ready to use your profile like a teenage blog from the 2000's

You are welcome !

FatherCrixius · 03-21-2022, 06:03 PM

https://emojipedia.org/

Can shorten this process a little, has a copy button too so you don't have to grab the HTML code for each.

Autumn · 03-21-2022, 06:30 PM

If you're on windows 10 you can press the windows key + . to open up an emoji menu as well.

lalchi · 03-21-2022, 07:26 PM

oh wow, i never knew about that key press. Thanks !

adamkad1 · 05-25-2022, 10:48 PM

(09-20-2021, 01:21 PM)lalchi Wrote: *Font stuff etc*

Im surprised you didnt include Cardinal Alternate, the font game uses baseline in its UI style sheet

Miller · 02-01-2024, 10:56 AM

Code:
.tabs,.char_name,.guild_name,.guild_rank{-dm-text-outline: 1px #000 square; vertical-align:middle;}

.tabs,.char_name{text-align:center;}

.guild_name,.guild_rank{font:Constantia;}

.guild_name,.char_name{color:#DD5;}

.tabs{font: 8px 'Mangal';}

.char_name{font:20px 'Georgia';}

.guild_name{font-size:14px;}

.guild_rank{font-size:12px;}

Shrimple UI CSS for ease of editing instead of a massive blob of text.

Login
Username:
Password:	Lost Password?
	Remember me