NEUS Projects
Tips, Tricks, and Code Snippets - A Profile Beautifying thread - Printable Version

+- NEUS Projects (https://neus-projects.net/forums)
+-- Forum: Sigrogana Legend 2 (OOC) (https://neus-projects.net/forums/forumdisplay.php?fid=8)
+--- Forum: Guides (https://neus-projects.net/forums/forumdisplay.php?fid=50)
+--- Thread: Tips, Tricks, and Code Snippets - A Profile Beautifying thread (/showthread.php?tid=8023)

Pages: 1 2

Tips, Tricks, and Code Snippets - A Profile Beautifying thread - chimeranyx - 05-30-2021

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.

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - Miller - 05-30-2021

(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:
color 
background
font-size
font-style
font-weight
font-family
font
text-decoration
text-align 
vertical-align
text-indent
margin-left
margin-right
width
height
line-height
text-shadow


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/

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - Miller - 07-02-2021

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.


Code:
#all{text-align:center; line-height:1.1;}
/* A personal choice of mine is to set a DIV at the start of a profile and define something universally shared by all pages.

line-height decreases or increases the space between lines, allowing you to make more use of space in your profile at lower values.

text-align is self-explanatory. (left/right/center )*/

b{font-weight:normal; color:#F95;}
/* Sets the bold html element to not be bold and changes the color. */

i{font-style:normal; color:#59F;}
/* Sets the italic html element to not be italic and changes the color. */

#title, #border{color:#FF0;}
/* Adding a comma between Element definitions allow you to define multiple elements at the same time, incredibly useful if you share a color scheme across the profile. */

#title{font:italic bold 25pt 'Cardinal'; text-shadow:0 0 2 #FF0;}
/* The font attribute should always have an order of
style>weight>size>face, there is some information omited here but this is mostly what you need to know in the case of profiles.

Text-shadow allows you to make a neat little shadow or 'glow' behind the text. The first number is horizontal offset, the second is vertical offset and the third is the blur. Do not set the third value to anything absurd. */

#border{-dm-text-outline:1px #F90;}
/* The -dm-text-outline attribute allows you to add an outline around text. The first value is for the size of the outline. (Please do not set it to anything absurd.) while the second is the hexcolor. */

#maintext{font:italic 9pt 'Cambria'; margin:10px;}

/* Margin is an attribute that allows you to space your text away from the borders of a documents.
margin-left: and margin-right: are also attributes that also exist and serve a similar role for each side. */


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:




Code:
<div id=all><div id=border>==================================</div>


<div id=title>Ren Brown</div>





<div id=border>==================================</div>

<div id=maintext>

This is an example.



The <b>brown fox</b> jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence.



The <i>brown fox</i> jumped over the <b>big iron fence</b>. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox <i>jumped</i> over the big iron fence.



The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence.





</div>
<div id=border>==================================</div>




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.

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - lalchi - 09-20-2021

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.)

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - lalchi - 03-21-2022

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_utf_geometric.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_emoji_smileys.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 !

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - FatherCrixius - 03-21-2022

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.

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - Autumn - 03-21-2022

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

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - lalchi - 03-21-2022

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

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - adamkad1 - 05-25-2022

(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

RE: Tips, Tricks, and Code Snippets - A Profile Beautifying thread - Miller - 02-01-2024

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.