FREE ARTFIGHT PROFILE CSS CODES

[ By MagicaJaphet ]
Last Updated July 4, 2021

Table of Contents
[Click on the link to jump or click the outline on the left side]
Table of Contents
Rules
List of Suggestions / Ideas
Rejected Ideas
Snippets
Layout Changes
Custom Banner
No Banner
Font Change
Full Page Links [Fixed]
One-Line Full Nav Tabs
Stackdown Nav Tabs
Thumbnail Outline Change
Avatar to Page Doll
Profile header / Nav merge
Blog Style
Compact Style
Color Changes
Simple 5-Color Palette
Themes
New Themes
Cyberpunk [WIP]
Old Themes
Tea/Watermelon [Preview]
Space [Preview]
Windows XP [Preview]

Rules
❖ Use and modify my themes to your delight, all I ask is that you credit me.
➢ My creditable pages are on my page.
❖ I’d really love to hear feedback and suggestions, my discord is MagicaJaphet#3869.
➢ I am also in the CSS-help chat on the Artfight server, which is where you likely found this doc in
the first place.
❖ Do not claim to have created my themes, I find it very disrespectful of my effort.

List of Suggestions / Ideas

[You can write them below, hit enter to add a new line]

Ocean Undertale
Sunrise Red/Blue/Yellow
 3 Column Links Steampunk
Color Palette Bowling Carpet
Cyberpunk
Rejected Ideas

🗙 None yet~

Snippets
Layout Changes

Custom Banner

.banner {
background: url(URL HERE) !important; /*Don't put quotations around the URL,
but keep the parenthesis*/
background-size: cover !important;
background-position: center !important; /*You can specify: top, bottom, right,
left, or center twice*/
height: 400px !important;
}

No Banner

.banner {
background: none !important;
height: 0 !important;
}
 Font Change

* {
font-family: Roboto, serif !important;
}
.fa, .fas, .fab, .far, .fal {
font-family: "Font Awesome 5 Pro", 'Font Awesome 5 Brands' !important;
}

Full Page Links [Fixed]

/*Makes table fit page width*/

.col-md-6 {
min-width: 100% !important;
}

/*Optional: Makes page links cells 50-50 instead of 25-75*/

.w-25 {
width: 50% !important;
}
 One-Line Full Nav Tabs

#content li {
width: 20% !important;
}

Stackdown Nav Tabs

#content li {
width: 100%;
text-align: center; /*Optional, does what it implies*/
}
Thumbnail Outline Change

.thumbnail {
border-style: solid !important; /* Default is dotted, but you can choose none,
solid, dashed, double, grooved, ridge, inset, or outset */
border-width: 2px !important;
}
.thumbnail:hover {
border-style: solid !important; /* Changes when you hover over the image */
border-width: 2px !important;
}

Avatar to Page Doll

/* Code that messes with the background of the .panel class will affect the
transparency of this element. */

.profile-avatar-panel .icon-user {
display: none !important;
}
.profile-avatar-wrapper {
border: none !important;
background: none !important;
}
.profile-avatar-panel {
 background: url(URL HERE) no-repeat !important;
}
.profile-avatar-wrapper, .profile-avatar-panel {
width: 200px !important; /* Change these to reflect your image size */
height: 300px !important;
}

Profile header / Nav merge

.profile-header-wrapper {
min-width: 49% !important;
float: left !important;
}

.profile-header-background {
padding-bottom: 110px !important;
}

.profile-header-normal-status {
margin: 4% !important;
}

.nav {
min-width: 49% !important;
max-width: 100% !important;
float: right !important;
}

.nav li {
min-width: 100% !important;
}

.profile-description {
clear: both !important;
}
Blog Style

.profile-header-wrapper {
width: 30% !important;
float: left !important;
}

.profile-normal-header {
padding-bottom: 120px !important;
}

.profile-header-buttons {
margin-top: 40px !important;
float: left !important;
}

.profile-header-name {
white-space: pre-line !important;
}

.profile-avatar-wrapper {
margin-top: 40px !important;
}

.follows-you {
margin-left: -30px !important;
}

.nav {
width: 70% !important;
float: right !important;
}
.nav li {
width: 20%;
text-align: center !important;
}

.profile-header-normal-status {
padding: 20px !important;
}

.profile-description {
float: right !important;
clear: right !important;
width: 70% !important;
height: 860px !important;
overflow: auto !important;
}

.col-md-6 {
clear: right !important;
min-width: 100% !important;
}

.profile-gallery-header {
clear: both !important;
}

.profile-stats-title, .profile-characters-title, .profile-attacks-title{

text-align: center !important;
}

.d-flex {
display: inline !important;
text-align: center !important;
}

Compact Style

.profile-header-wrapper {
float: left !important;
width: 40% !important;
}

.nav li {
width: 20% !important;
}

.profile-description {
float: left !important;
width: 40% !important;
clear: left !important;
height: 800px !important;
overflow: auto !important;
}

.profile-links, .profile-followers {
float: left !important;
min-width: 100% !important;
}

.profile-links {
height: 210px !important;
overflow: auto !important;
}

.col-6 {
min-width: 10% !important;
float: left !important;
}

.profile-gallery-header {
width: 15% !important;
float: right !important;
}

.comments h2 {
clear: both !important;
}

.profile-defenses, .profile-attacks, .profile-characters, .profile-stats {

clear: both !important;
}
Color Changes
Simple 5-Color Palette

/* Search these colors with CTRL + F or your computer's equivalent and replace
them with your new palette. You can use coolors.co to generate a 5-color palette.
#0B0033 - NEW HEX HERE
#370031 - NEW HEX HERE
#832232 - NEW HEX HERE
#CE8964 - NEW HEX HERE
#EAF27C - NEW HEX HERE*/

#wrapper, .progress, .badge-success {

background-color: #EAF27C !important;
}
.profile-defenses-title, .profile-attacks-title, .profile-characters-title,
.profile-stats-title {
color: #EAF27C !important;
}
.profile-header-normal-status, .nametag, .text-break i, .progress-bar,
.badge-info{
background-color: #370031 !important;
color: #CE8964 !important;
}
.profile-description, .profile-avatar-wrapper, .card td, .profile-links td a,
.panel-body, .profile-follower a, .icon-user, .btn-primary, .page-item a {
background-color: #CE8964 !important;
color: #0B0033 !important;
}
.profile-description table {
background-color: #832232 !important;
color: #EAF27C !important;
}
.panel-heading, .panel-heading a, .comment-footer, .nav, .nav li a, .navbar,
.navbar a, .dropdown-menu, .dropdown-item, .profile-header-name .element-disabled,
.btn-danger, .footer .contain, .footer .contain a {
background-color: #0B0033 !important;
color: #CE8964 !important;
}
.active, .nav .active a, .panel-footer, .panel-footer a, .card .w-25,
.btn-warning, .follows-you, .pagination li span{
background-color: #832232 !important;
color: #EAF27C !important;
}
.follows-you:after {
border-bottom-color: #832232 !important;
}
.nav li a, .panel-heading, .active, .panel-footer, .profile-avatar-wrapper, td,
.dropdown-divider, .btn, .pagination li a, .pagination li span, .achievement-panel
span {
border: none !important;
}
.achievement-panel span {
background: none !important;
}
.nav, .profile-links table {
border-bottom: 25px solid #832232 !important;
}

/* Team Colors: Cyberpunk - #BF54E2 Steampunk - #BB6726 */

.profile-header-name a {
color: #BF54E2 !important;
}
.element-disabled {
opacity: 1 !important;
}
.thumbnail, .thumbnail:hover, .icon-user {
border-style: inset !important;
border-width: 8px !important;
}
Themes
New Themes
Cyberpunk [WIP]

[Preview 1]
 [Preview 2]

Old Themes

Tea/Watermelon [Preview]
.banner {
display: none !important;
}

#wrapper{
background: #fceddc !important;
}

#content {
font-weight: bold !important;
letter-spacing: .05em !important;
}

.nav, .active, td, .active a, #content li:hover a {

border: none !important;
}

#content ul li {
margin: auto !important;
width: 20% !important;
text-align: center !important;
}

#content li a {
color: #f3585a !important;
background: transparent !important;
}

#content li:hover a {
color: #f3585a !important;
background: #c0e68e !important;
}
#content .active a, #content .active:hover a {
background: #c0e68e !important;
}

#content a {
text-decoration: none !important;
}

.panel {
border: 1px solid #f3585a !important;
}

.table td {
text-align: right !important;
}

.table .col-xs-3 {
width: 50% !important;
}

.panel, .panel-heading, .nametag, .col-xs-3, .panel-footer, .col-xs-12 .panel-body {

background: #c0e68e !important;
color: #f3585a !important;
border: 2px solid !important;
border-top-color: #fff !important;
border-left-color: #fff !important;
border-bottom-color: #f3585a !important;
border-right-color: #f3585a !important;
}

.panel-heading, .col-xs-3 {
text-transform: uppercase !important;
}

.panel a, .panel-heading a, .nametag a, .col-xs-3 a, .panel-footer a {

color: #fff !important;
}

td, .panel-body {
background: #f3585a !important;
color: #fff !important;
}

.profile-avatar-wrapper, .profile-avatar-panel {
padding: 0 !important;
background: transparent !important;
border: none !important;
}

.thumbnail {
border: 4px solid !important;
}
.comment .col-sm-2{
float: right !important;
}

hr {
border: none !important;
}

.profile-description {
color: #ff9a9b !important;
}

.profile-description strong {
color: #f3585a !important;
font-size: 20px !important;
}

Space [Preview]
.banner {
background: url(https://i.imgur.com/jgswCJK.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
height: 300px !important;
background-position: 0 -300px !important;
}

#wrapper {
background: url(https://i.imgur.com/n0gNUv8.png) !important;
background-repeat: repeat-y !important;
}

.margin-1-5em {
border-bottom: #aaa 4px dashed !important;
}

#content a {
text-decoration: none !important;
color: inherit !important;
}

#content a:hover {
color: #000 !important;
}

#content .active a {
color: #fff !important;
background: #666 !important;
}

#content .active:hover a, #content li:hover a {

background: #666 !important;
}
#content li {
width: 20% !important;
background: #ddd !important;
border-bottom: #fff 1px solid !important;
text-align: center !important;
letter-spacing: 10px !important;
font-size: 20px !important;
}

#content li:hover a {
color: #fff !important;
}

#content .nav {
border: none !important;
}

.profile-header-normal-status {
background: #888!important;
padding: 0 1% !important;
margin: 0 10% !important;
}

.col-sm-6 {
float: right !important;
clear: right !important;
width: 100% !important;
}

.btn {
letter-spacing: 2px !important;
text-transform: uppercase !important;
}

.btn-primary {
color: #888 !important;
background: #fff !important;
border-color: #888 !important;
}

.btn-primary:hover {
color: #666 !important;
background: #888 !important;
border-color: #666 !important;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:focus:active {

color: #222 !important;
background: #666 !important;
border-color: #222 !important;
}

.btn-danger {
 color: #fff !important;
background: #888 !important;
border-color: #fff !important;
}

.btn-danger:hover {
color: #000 !important;
background: #666 !important;
border-color: #000 !important;
}

.btn-danger:active, .btn-danger:focus, .btn-danger:focus:active {

color: #444 !important;
background: #000 !important;
border-color: #444 !important;
}

.panel-heading, .col-xs-3, .nametag{

letter-spacing: 5px !important;
text-transform: uppercase !important;
font-weight: bold !important;
color: #666 !important;
background: #ddd !important;
padding: 20px 1% !important;
border: #fff 1px solid;
}

.profile-header-name a, td a{
color: #fff !important;
}

.panel {
background: #222 !important;
color: #fff !important;
}

.comments h2, .profile-attacks-title, .profile-characters-title, .profile-stats-title, .profile-defenses-title {

background: #222 !important;
color: #fff !important;
margin: 10px auto !important;
width: 70% !important;
text-align: center !important;
padding: 5px 0 !important;
border: #fff 1px solid !important;
}

.fa-link, .text-right a, .panel-heading a, #content li a {

color: #000 !important;
}

.profile-description {
color: #aaa !important;
}
.profile-description strong {
color: #fff !important;
}

.comment .panel-body {
font-size: 18px !important;
}

.panel-footer, .comment-footer {
color: #000 !important;
background: #666 !important;
}

.comment-footer hr {
border: none !important;
}

.comment .col-sm-2 {
width: 10% !important;
}

.comment .col-xs-12 {
width: 90% !important;
}

.comment .col-sm-8 {
width: 100% !important;
}

.table td {
width: 50% !important;
}

.profile-links .panel-heading, .profile-followers .panel-heading {

text-align:center !important;
}

.thumbnail {
background: none !important;
border: 6px solid !important;
}

.row {
margin: auto !important;
width: 100% !important;
}

.nametag{
width: 100% !important;
margin: inherit 6px !important;
}
 Windows XP [Preview]
.banner {
background:
url(https://cdn.discordapp.com/attachments/443150120121270293/477608549
967462400/api.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
height:350px !important;
width: 100% !important;
background-position: 0 -800px !important;
}

#wrapper{
background: #f0eedc !important;
}

#content li {
width: 20%;
}

.panel-heading, #content li a, .comment .panel-body, .nametag{

color: #fff !important;
background: #1b65f5 !important;
border-top: #4098ff 5px solid !important;
border-bottom: #0034a6 5px solid !important;
border-left: none !important;
border-right: none !important;
margin: 0 !important;
font-weight: bold !important;
font-size: 18px !important;
}

.panel-heading a, .comment .panel-body a {

background: #337ab7 !important;
color: #ddd !important;
border: #fff 1px solid !important;
padding: 5px !important;
text-decoration: none !important;
}

.profile-avatar-wrapper a {
background: none !important;
border: none !important;
padding: 0 !important;
}

.profile-header-name a {
background: none !important;
color: #ddd !important;
border: none !important;
padding: 5px !important;
text-decoration: none !important;
}
.element-disabled {
color: #222 !important;
}

.panel-heading a:hover, .comment .panel-body a:hover {

background: #0034a6;
}

.comment hr {
border: none !important;
}

#content li:hover a, #content .pagination span {

color: #fff !important;
background: #4098ff !important;
border-top: #8fbcff 5px solid !important;
border-bottom: #1b65f5 5px solid !important;
border-left: none !important;
border-right: none !important;
margin: 0 !important;
font-weight: bold !important;
font-size: 18px !important;
}

#content .active a {
color: #aaa !important;
background: #1b65f5 !important;
border-top: #4098ff 5px solid !important;
border-bottom: #000a56 5px solid !important;
border-left: none !important;
border-right: none !important;
margin: 0 !important;
font-weight: bold !important;
font-size: 18px !important;
}

.btn, .btn:hover, .btn:active, .btn:focus {

border: #fff 1px solid !important;
}

.col-sm-6 {
width: 100% !important;
margin: auto !important;
}

.panel {
border-left: #0034a6 5px solid !important;
border-right: #0034a6 5px solid !important;
border-bottom: #0034a6 5px solid !important;
}

.col-xs-3 {
background: #698ce4;
}
.thumbnail{
border: solid !important;
margin: 0 !important;
}

.nametag {
margin: 0 0 8px 0 !important;
}

.profile-characters-permissions .panel-body span, .profile-description{

background: #fff !important;
color: #999 !important;
border: #888 1px solid !important;
padding: 10px 0 !important;
}

.profile-characters-permissions .panel-body span strong, .profile-description

strong{
color: #444 !important;
}

.comment .panel-body, .comment .panel-body a {

color: #000 !important;
background: white !important;
border: none !important;
}

.table td, .panel-footer{

border-color: #aaa !important;
}

.col-xs-3, .panel-footer {
background: #eeeddb !important;
}

.comment {
color: #fff !important;
background: #1b65f5 !important;
border-top: #4098ff 5px solid !important;
border-bottom: #0034a6 5px solid !important;
border-left: none !important;
border-right: none !important;
margin: 10px 0 !important;
font-weight: bold !important;
font-size: 18px !important;
padding: 20px 0 0 0 !important;
}

.comment strong a{
color: #fff !important;
}