Profile Styling

>> CLICK HERE IF YOU JUST WANT THE CODE <<



Hello, friends! Some of you have noticed the profile of Nathaniel over here and asked me what I did to it, so I put together a quick tutorial on how to style them! This involves embedding a stylesheet, which is purely CSS — no html here! That goes in the other profile fields.

So, what does that mean? Basically, you're writing some new rules for the page to follow, and putting them in this field:


You will need to know a little about CSS to follow this quick tutorial. You are welcome to dm me with any questions!

Let's take a look at Seiji's profile:


Right now, it matches the rest of the boards. But, if we know the names of the different elements, we can embed our own stylesheet, and change it to look however we want! Note: I don't recommend moving things around or otherwise altering the layout drastically. You could, but you probably want your profile to match the style of the rest of the site! That helps keep it all cohesive and avoids breaking things.

Following is a list of the elements you will probably want to mess with (NOTE: you must include the style type html tag at the top and close the style tag at the bottom; any google font styles you want to use can go above the style type tag):

Code:

<style type="text/css">

/* MAIN STUFF (background texture, font family, basic formatting) */

body {
font-family: "EB Garamond";
background:url('https://i.imgur.com/8nadmsW.png');
background-repeat: repeat;
background-color: #101010;
}

a {
color: #e9e9e9;
text-shadow: 0px 0px 2px #f4f4f4;
}

a:active, a:hover {
color: #e9e9e9;
text-shadow: 0px 0px 2px #f4f4f4;
text-decoration: none;
}

table {
font-family: "Oswald";
color: #e9e9e9;
}


/* HEADER STYLES */

h1, h2, h3, h4, h5, h5, h6, h7, h9 {
font-family: "Oswald";
}

h5 {
color: #e9e9e9;
}

h7 {
color: #e9e9e9;
text-shadow: 0px 0px 2px #f4f4f4;
}

h8 {
color: #636363;
font-family: "EB Garamond";
font-size: 15px;
}


/* TOP STUFF (logo, top menu) */

/* banner dimensions should match 1040X350 main site banner */
#logobanner {
background: #101010;
min-width: 1140px;
max-width: 100%;
position: relative;
background-image: url('https://i.imgur.com/QVsXsnp.png');
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}

.logotitle {
font: normal 100px/1 "Alex Brush";
}

.logotitle a:link,
.logotitle a:visited {
font: normal 100px/1 "Alex Brush";
   color: #c2cfcf;
}

.plotheader {
position: absolute;
 margin: auto auto;
 top: 75%;
left: 35%;
 font: normal 30px/1px "Cormorant Upright", sans-serif;
 color: #8e9090;
text-shadow: 2px 2px 3px #000000);
text-decoration: none;
letter-spacing: 2px;
}

#panel .upper {
height:0px;
padding: 0px;
background: #101010;
border-top: 8px solid #2e2e2f;
border-bottom: 8px solid #2e2e2f;
}

#header ul.menu {
background: #101010;
border-bottom: 5px solid #2e2e2f;
color: #e9e9e9;
}

#header ul.menu a,
#header ul.menu a:visited {
color: #e9e9e9;
text-shadow: 0px 0px 2px #f4f4f4;
font: normal 18px/1 "Oswald", serif;
}

#header ul.menu a:hover,
#header ul.menu a:active {
color: #e9e9e9;
text-decoration: none;
font: normal 18px/1 "Oswald", serif;
}


/* SIDEBAR STUFF */

.go-top {
   background: #2e2e2f;
   border: 3px solid #e9e9e9;
}

.sidebarbutton {
   background: #2e2e2f;
   border-top: 3px solid #4d4d4d;
   border-bottom: 2px solid #4d4d4d;
   border-left: 2px solid #4d4d4d;
   box-shadow: -1px 1px 3px #000000;
   color: #e9e9e9;
}

.trow1 {
font-family: "EB Garamond";
}

.trow2 {
font-family: "EB Garamond";
}

.thead {
background: #919191;
border-top: 5px solid #1e1e1f;
color: #101010;
text-shadow: 0px 0px 3px #2e2e2f;
}

.trow1forum {
font-family: "EB Garamond";
background: #1e1e1f;
}

.sidebarstyle {
background: #2e2e2f;
font-family: "EB Garamond";
color: #919191;
}

.sidelinks {
font-family: "Oswald";
letter-spacing:1px;
}

.sidelinksmenu a:link,
.sidelinksmenu a:visited, .thresholdsubs a:link,
.thresholdsubs a:visited, .oocsubs a:link,
.oocsubs a:visited {
 background: #2e2e2f;
 border-right: 3px solid #101010;
 border-bottom: 2px solid #101010;
 border-left: 2px solid #101010;
 box-shadow: 1px 1px 3px #000000;
 color: #e9e9e9;
 text-shadow: 0px 0px 2px #f4f4f4;
}

.sidelinksmenu a:hover,
.sidelinksmenu a:active, .thresholdsubs a:hover,
.thresholdsubs a:active, .oocsubs a:hover,
.oocsubs a:active {
 background: #2e2e2f;
 color: #e9e9e9;
}


/* PROFILE CONTENT */

.navigation {
       background-color: #101010;
color: #919191;
border-bottom: 4px solid #2e2e2f;
}

.navigation a:visited {
       background-color: #818992;
color: #e9e9e9;
}

.navigation a:hover,
.navigation a:active {
color: #e9e9e9;
}

.navigation .active {
       background-color: #101010;
color: #e9e9e9;
text-shadow: 0px 0px 2px #f4f4f4;
}

#container {
color:
font-family:
font-size: 15px;
background: rgba(0, 0, 0, 0.7);
border-right: 10px solid #
border-left: 10px solid #
}

#profilecategory {
color: #919191;
font-family: "EB Garamond";
font-size: 15px;
background: rgba(16, 16, 16, 0.7);
border-right: 10px solid #2e2e2f;
border-left: 10px solid #2e2e2f;
}

.profilecategory {
background-color: #4d4d4d;
font-family: "Oswald";
color: #000000;
letter-spacing: 1px;
font-weight: lighter;
}

ul.proftabs li a {
   text-decoration: none;
   background: #4d4d4d;
   color: #e9e9e9;
   text-shadow: 0px 0px 2px #f4f4f4;
}

ul.proftabs li a:hover {
background: rgba(46,46,47,0.5);
}

ul.proftabs li a.active {
   background: rgba(46,46,47,0.5);
   color: #e9e9e9;
   text-shadow: 0px 0px 2px #f4f4f4;
}

.proftab_container {
 width: 100%;
 margin: 0 auto;
 margin-top: -30px;
 background: rgba(46,46,47,0.5);
}

.ptab_content {
padding: 30px 40px;
font-size: 11px;
margin: 0;
}

.trow1padded, .trow1, .trow2 {
background: #2e2e2f;
}

.tfoot {
border-top: 10px solid #37383c;
border-bottom: 8px solid #bbc0d3;
background: #919191;
color: #e9e9e9;
}

.footwrapper {
border-top: 10px solid #37383c;
border-bottom: 8px solid #bbc0d3;
background: #919191;
color: #e9e9e9;
}

</style>

A couple notes:

• Comments that look /* like this */ are invisible and do not need to be removed. They won't show up on your profile! I have added them to help you identify which elements you are dealing with.
• Strings that look like, for example, 2px 2px # need a color code at the end (such as 000000; ) I just left the # there already so you know where to put it.
• Styling information for each element must be contained within brackets { } and must adhere to css rules, or it won't work.
• I have not included absolutely every element here. If you can't figure out how to change something you want to change, you can ask, or you can look it up yourself using your browser's inspect tools.

NOW A QUICK EXAMPLE:

I want to change up the text on Seiji's header menu. I want to use the google font "Righteous", want the letters to be white, and want the background aqua/blue. I find the elements that control this portion of the page and insert the styling I want:



And.....



BEAUTIFUL! :D I'm off to a great start.

HELLO FRANDS

Since this is being popular again, I went ahead and made a little onenote reference guide for what each section does and where the colors are located, etc!!

Let me know if you have any questions <3 ilyall

https://1drv.ms/u/s!AqxUbQXzgbZbhccv0ZeU_O_2_u0d3A