Roleplay Forums | Map

Basic CSS Tutorials (and requests!)
A conglomeration of some profile styling tricks.

12703
Name Player
Shade Dingo
Achievements (?)
1year 2mos 6mos 100posts 250posts helper profile wikicontributor
 

This thread is just to give some basic examples. If you need help implementing them, ask away. Also, let me know if there’s anything you want to know how to do.

If you want to change your background image, place this in the CSS field of your profile:

body {
    background
-imageurl('place an image link in these single quotes');
    
height:100%;
    
background-sizecover;

If you want to change your profile’s font, use this in the CSS field:

(Hint! Read this article for info on font styling: https://www.w3schools.com/css/css_font.asp)

p {
 font
-family"Times New Roman"Timesserif//check the link for examples.
 
font-size10px//change to any px value.
 
font-stylenormal//can be italic and oblique as well.
 
font-variantnormal//can change to "small-caps". 
 
font-weightnormal//alternatively can be "bold"
 
line-height23.8px//line-height in pixels. 
 
color#000000; //changes text color. #000000 is black.

small-caps example: https://www.w3schools.com/css/tryit.asp?filename=trycss_font-variant

CSS and HTML use hexcode to determine color. He code is formed by a six-character string of letters (a-f) and numbers (0-9) preceded by a pound. Example: #D09AB4 (this is a shade of pink). While there are keywords for color, such as red, dark red, and Grey, hexcode provides greater versatility in shades you can use. Note: you don’t have to use one or the other. Both keywords and hex can be used throughout your profile’s CSS. Check out these sites for color generators:
https://www.w3schools.com/colors/colors_picker.asp
(this one is great for choosing colors to match others!)
http://www.december.com

 


Apr 14, 2018 02:42 PM

  [ ignore ]
[ Edited: Apr 15, 2018 05:07 PM by Shade ]
205481
Name Player
Peregrine Isabel
Achievements (?)
1year 2mos 6mos artist bugsuggestion helper profile supporter tumblr welcomeguide
 

yessssss dingo the coding masterrrrr !

also smol side note to anyone who also wants html stuffs: copy html from here
aaaand:
HTML Generator!


Apr 15, 2018 10:29 AM — Post #1

  [ permalink ]   [ ignore ]
205501
Name Player
Cleo Divinity armadillo
Achievements (?)
None yet!
 

ty guis so much, i hate how plain my profile is but i am just super afraid of code.


Apr 15, 2018 03:27 PM — Post #2

  [ permalink ]   [ ignore ]
205515
Name Player
Shade Dingo
Achievements (?)
1year 2mos 6mos 100posts 250posts helper profile wikicontributor
 

If there’s something you’d like to know how to do, let me know and I can tell you (to the best of my capability!) how. I’ll add in how to change profile colors, such as table backgrounds and background colors sometime soon.


Apr 15, 2018 05:06 PM — Post #3

  [ permalink ]   [ ignore ]
205537
Name Player
Igbo Black J
Achievements (?)
None yet!
 

Does anyone know how to change the color of name links ex: {Igbo}? My link color becomes blue on my table and I am not sure how to change it.


Apr 15, 2018 09:19 PM — Post #4

  [ permalink ]   [ ignore ]
205543
Name Player
Nala Vãduvã Kori
Achievements (?)
2mos artist helper profile
 

I believe this should work but let me know if there’s any issue :3

table.darkTable a:link {
color: #000;
}
table.darkTable a:visited {
color: #000;
}
table.darkTable a:hover {
color: #000;
}
table.darkTable a:active {
color: #000;
}

note that this only works for your dark table class. any other classes you’re going to have to do the same with (there’s also a way to shorten it, if you need to)
and for general link colors on the rest of the site just do the same thing without the table.darkTable part :)


Apr 15, 2018 10:40 PM — Post #5

  [ permalink ]   [ ignore ]
Showing page 1 of 1.
 
Please log in or register to reply to this thread.