This is for the base profile only. Each /*TEXT HERE*/ should explain what goes inside each CSS code that's provided. I highly suggest choosing your palette out first.
Code:
<style>
/*BACKGROUND COLOR, USE BACKGROUND:URL(URLHERE); FOR AN IMAGE*/
body {
background: #COLOR;
}
/*CUSTOM IMAGE + LINE UNDER HEADER*/
header {
background: url(https://i.imgur.com/oNvaL1r.png?1) no-repeat scroll 0 0 transparent;
background-position: 35%;
box-shadow: 0 -3px #COLOR inset;
height: #PX;
}
/*REMOVES HEADER IMAGE*/
a img {
max-width: 0%;
height: auto;
}
/*UNDER HEADER*/
.navigate_section {
background: #COLOR;
}
.breadcrumb {
background: #COLOR;
}
.breadcrumb li a {
color: #COLOR;
}
/*SUBACCOUNT (optional for main accounts)*/
.breadcrumb .active {
color: #COLOR;
}
/*CATEGORY BARS*/
h3.catbg, h4.catbg, div.cat_bar {
background: #COLOR;
text-align: center;
color: #COLOR;
}
/*SUMMARY TEXT COLORS*/
td {
color: #COLOR;
}
/*INFORMATION UNDER CATEGORY BOXES*/
.windowbg {
background: #COLOR;
color: #COLOR;
}
.windowbg span.topslice span {
background: #COLOR;
}
.windowbg span.topslice {
background: #COLOR;
}
.windowbg span.botslice span {
background: #COLOR;
}
.windowbg span.botslice {
background: #COLOR;
}
/*COMMENTS*/
.poster h4 {
background: #COLOR;
}
.poster h4, .poster h4 a {
color: #COLOR;
}
.poster ul li {
Background: #COLOR; }
form {
background: #COLOR;
}
.content {
background: #COLOR;
}
.windowbg2 span.botslice span {
background: #COLOR;
}
.windowbg2 span.botslice {
background: #COLOR;
}
.windowbg2 span.topslice span {
background: #COLOR;
}
.windowbg2 span.topslice {
background: #COLOR;
}
.windowbg, #preview_body, .windowbg2, .windowbg3 {
color: #COLOR;
background-color: #COLOR;
}
a:visited {
color: #COLOR;
}
/*DROP MENU / PROFILE INFO / MODIFY PROFILE / ACTIONS*/
.dropmenu li li
{
background: #COLOR;
}
.dropmenu li li a
{
color: #COLOR;
}
.dropmenu li a.active
{
color: #COLOR;
background: #COLOR;
}
.dropmenu li a.active:hover, .dropmenu li:hover a.active
{
color: #COLOR !important;
}
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
color: #COLOR;
}
.dropmenu li li a:hover, .dropmenu li li:hover a
{
background: #COLOR;
}
.dropmenu li a.firstlevel span.firstlevel {
background: #COLOR;
}
/*HEADER*/
header ul.reset li, header ul.reset li a
{
color: #COLOR;
font-family: "Segoe UI";
font-size: 11px;
}
header ul.reset li a:hover
{
color: #COLOR;
text-decoration: none;
}
/*FOOTER*/
footer
{
background: #COLOR;
box-shadow: 0 -7px #COLOR;
}
footer, footer a
{
color: #664C90;
}
span.smalltext {
color: #COLOR;
}
a:link {
color: #COLOR;
text-decoration: none;
}
a:link, a:visited {
color: #COLOR;
text-decoration: none;
}
a:visited {
color: #COLOR;
}
a.new_win {
color: #COLOR;
}
a.new_win:link, a.new_win:visited {
color: #COLOR;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
color: #COLOR;
}
/*NAVIGATION BAR AT THE TOP*/
.navbar-default .navbar-nav .active a {
background: #COLOR;
color: #COLOR;
text-shadow: 0 2px #COLOR;
box-shadow: 0 -3px #COLOR inset; }
.navbar-default {
background: #COLOR;
color: #COLOR;
box-shadow: 0 -3px #COLOR inset;
}
.navbar-default .navbar-nav li a {
color: #COLOR;
text-shadow: 0 2px #COLOR;
}
.navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
background: #COLOR;
color: #COLOR;
box-shadow: 0 -3px #COLOR inset;
}
.dropdown-menu {
background: #COLOR;
}
input, button, select, textarea {
color: #COLOR;
background: #COLOR;
}
/*AVATAR BY UPDATED TOPICS*/
.img-thumbnail {
background-color: #COLOR;
border: 1px solid #COLOR;
}
/*SIGNATURE TEXT COLOR*/
h1, h2, h3, h4, h5, h6 {
color: #COLOR;
}
/*LINE ABOVE SIGNATURE*/
.signature, .custom_fields_above_signature {
border-top: 1px #COLOR solid;
}
/*HORIZONTAL RULE/HR SIZE AND COLOR*/
hr, .hrcolor {
height: 1px;
background-color: #COLOR;
}
/*LINE UNDER DATE OF PROFILE REPLIES*/
.inner {
border-top: 1px solid #COLOR;
}
/*PAGE LINKS*/
.pagelinks {
color: #COLOR;
}
/*FOOTER LINKS*/
footer a:link, a:visited {
color: #COLOR;
text-decoration: underline;
}
footer a.new_win:link, a.new_win:visited {
color: #COLOR;
text-decoration: underline;
}
/*SPOILER CODE*/
.YASM_wellwisher {
background-color: #COLOR;
border-radius: 4px;
border: 0px solid #COLOR;
}
.YASM_wellwisher .YASM_border {
border-bottom: 1px solid #COLOR;
}
</style>
Need any further coding help? Comment below and I'll be sure to help out + provide some tips.