Basic CSS help - Last updated July 14th, 2017

When you donate $25 or more to ArtFight, you unlock the CSS feature that allows you to customise your profile. The area to edit your profile CSS will be found on your Settings page under the Profile tab.

Table of contents:

Introduction

Properties

Tags

Building your CSS

CSS Template

CSS (Cascading Style Sheets) is used to visually change how a page looks. To do this, basic coding knowledge is required. If you need help with coding your profile, you should post your question in the #af-help channel of Art Fight Discord chat.

Note:  https://www.w3schools.com has an excellent CSS tutorials


Properties that can be used in your profiles

These are used to edit how certain elements on your profile look, such as the color of the text in something, the background image the element has, etc. You can generally tell what a property will do to an element based on the name, however some can be a bit harder to understand. You will use these properties by writing the property name, colon, what you want it to look like, and then a semicolon. For example: font-size: 13px;. Sometimes your CSS will not show up because the default CSS takes precedence over your profile’s CSS. To help make your custom CSS show up, you may need to use !important for the property, for example: background-color: blue !important;.

You can google these properties and find the w3schools page to help find information on what exactly the property does and what kinds of input you can use, if the property only takes select input (the font-style property for example).

Available properties:

background

background-image

border

border-bottom-style

border-color

border-left-style

border-right-color

border-spacing

border-top-color

border-width

color

font-family

font-variant

letter-spacing

list-style-image

margin

margin-right

padding-bottom

padding-top

text-decoration

vertical-align

word-spacing

background-attachment

background-position

border-bottom

border-bottom-width

border-left

border-left-width

border-right-style

border-style

border-top-style

caption-side

float

font-size

font-weight

line-height

list-style-position

margin-bottom

margin-top

padding-left

table-layout

text-indent

white-space

background-color

background-repeat

border-bottom-color

border-collapse

border-left-color

border-right

border-right-width

border-top

border-top-width

clear

font

font-style

height

list-style

list-style-type

margin-left

padding

padding-right

text-align

text-transform

width


Tags used to select elements in your profile

Last updated July 14th, 2017

Tags are what are used to select different elements in your profile, which you can then use the properties listed above on. An “element”, for example, would be the nametags shown under your character’s image on your profile. To select that element to edit, you would use the tag “.nametag”.

WIP list of available tags:

ID Tags

#wrapper

changes the background of your profile

Class Tags

.panel-heading

changes the colour of the headings in your profile, attacks / characters /etc

.clearfix

changes the colour of your profile details, (where your icon and username is)

.banner

.nametag

Element Tags

strong

bold text generally uses the strong element

More about tags:

The easiest way to find out what tags to use to select elements would be to use “inspect element”, however mobile devices do not have this capability. If you are on a computer though, you can right-click on the element that you want to edit and then click on the “Inspect Element” option.

Using this, you can then see what tags you can use to edit the element with your CSS. You will find things such as “id” and “class”. Like such: <div class="row"> 

To select this element in your CSS, you will use the words specified as the id or class. If it is an id, you will precede the words with a pound symbol (#), if it is a class, you will precede them with a period (.).

If there are spaces in the words, such as this: <div class="nametag truncate col-xs-12 h4>, you can specify multiple of the words to make your CSS more accurate, or you can use only one of the words. If you are going to use multiple words, you will need to replace the spaces with the appropriate symbol. For example, for the element depicted above, I could write .nametag, or I could write .nametag.truncate.col-xs-12.h4 to be more accurate and help ensure that the only thing being changed with my CSS is the element I am specifically looking at.

Please note that you can only edit the elements shown inside the <div id="wrapper"> element, including the wrapper element itself.

If you want to select all of a type of element, such as all italicized text, you can instead use the element itself. For example, you will find that bold text uses the <strong> element. You can then select all bold text for your CSS by using strong as your tag.


Building your CSS

Your CSS will be made up of tags and properties, in the format: tag { property/ies }, for example, #wrapper { background-color: blue; font-size: 13px; }. Each tag will need its own set of curly brackets and properties to edit the elements on your profile individually.

If you wish to use the same property style for multiple different elements, you can specify all of the tags together in a comma separated list before your curly brackets. Like such: .nametag, .profile-header-name { color: green; }. This will make any elements with the class “nametag” or the class “profile-header-name” have green text.

As stated above in the Tags section, you can also specify multiple classes, ids, or elements themselves to narrow down which elements will be changed by your CSS. You can combine all three of these to get as specific as you need. For example, if I use the following code, strong.info { color: purple; }, only bold text with the class of “info” will be changed, but other elements with the “info” class or bold elements that don’t have the “info” class will not be changed by this.

If you try to specify the exact same set of tags twice, the second time they are specified, any duplicate properties will be ignored in favor of the first time they were changed. For example,

strong { color: green; }

strong { color: purple; font-style: italic; }

The bold text resulting from this will be green and italicized, rather than purple. Even if you use !important for the purple, the text will still be green.

If needed, you can also add “comments” to your CSS. These are helpful to leave yourself notes or to organize your CSS. To create a comment, put a /* to open the comment, and then close the comment with a */. For example: /*this is a comment that I can later use to help me remember what certain things are for*/, these comments can also be written over multiple lines as long as the commented-out text is opened and closed properly.


Basic Template (BG + Header BG)

#wrapper {
background: url(BACKGROUND URL);
color: #273252;
font-weight: bold;
}

.clearfix {
background-image: url(HEADER BG URL) !important;
background-position: 0px !important;
background-repeat: repeat !important;
border: 5px;
border-color: #ff6666;
}

.clearfix p {
color: #f2f2f2 !important;
}

.panel {
border: none !important;
}

.panel-heading a {
color: #f4ebff !important;
}

.panel-heading {
background-image: url(HEADER BG URL) !important;
background-position: 0px !important;
border-color: transparent !important;
color: #fff !important;
}

.table strong {
color: #f4ebff !important;
letter-spacing: .3px !important;
font-weight: 500 !important;
text-transform: uppercase;
font-size: 13px;
}

Banner Code

.banner {
background-image:url(BANNER URL) !important;
 
margin-left:auto;
 
margin-right:auto;
 
height:250px !important;
 
width:auto !important;

}

User Made Banner Templates:

ArtFight Free CSS Codes by MagicaJaphet