Beasts of Beyond
FULL PROFILE CODE + PROFILE HELP THREAD [updated 7/16] - Printable Version

+- Beasts of Beyond (https://beastsofbeyond.com)
+-- Forum: General Category (https://beastsofbeyond.com/forumdisplay.php?fid=3)
+--- Forum: Artist Loft (https://beastsofbeyond.com/forumdisplay.php?fid=10)
+---- Forum: Coding Corner (https://beastsofbeyond.com/forumdisplay.php?fid=11)
+---- Thread: FULL PROFILE CODE + PROFILE HELP THREAD [updated 7/16] (/showthread.php?tid=3334)



FULL PROFILE CODE + PROFILE HELP THREAD [updated 7/16] - Orion - 07-16-2018

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.