CSS Customization

What is CSS Customization?

Artician CSS Customization is the ability to use custom Cascading Style Sheets to style up all your userpages.

CSS (Cascading Style Sheets) are styles for your content, but the are defined externally. CSS customization is usually intended for those who already know CSS, and have have styled webpages based on previous experience. However, there's a first time for everything!

Artician userpages are completely styled using CSS, so you have full control over every bit of how things should look. Bring your content together with something fresh.

What does Artician's style sheets look like? Here are a few samples:

Artician Default Skin - http://www.artician.com/styles/profiles/simpla/blue.css
Artician Simpla Skin - http://www.artician.com/styles/profiles/default/blue.css

What many CSS files do I use to customize all my userpages?

All styles used for your Profile, Blog, Portfolio, Comments Page, and Friends Page, are located in ONE css file

How to Customize Userpage CSS

You can access your custom CSS file in the Artician Customization Center. Click here to go to your custom CSS.

Your custom CSS file is based off the current skin you have selected. If you have not yet changed your Artician Skin then your CSS will start at the Default Artician Userpage CSS. If you see a skin you like and want to start customizing based off that skin, then simply goes to the Skins section, and select a skin.

Artician CSS Structure

CSS skins on Artician follow a standard format to keep things neat, and to provide familiarity from skin to skin.

At the top, every CSS has it's name a color defined:

Skin Type: Artician Default > blue

There is also a guide to help you find and locate what you are looking to edit or customize within the CSS. Each Userpage Section has a corresponding number, it is used as a reference to locate the section you are looking for.

Example: If you want to edit your userpage banner, look it up in the list below, and search for the corresponding section. In this case you would look for “section 05” within the CSS document. Most text/code editors have a “Find” tool you can use to search.

(If a section is referring to a specific userpage module, you will notice a “m >” next to the section - see below)

      (section 01) -->  Body / Page / Module Containers / General Tags Elements
      (section 02) -->  Forms / Input
  m > (section 03) -->  Header Area > User Icon | Username | Usertitle
  m > (section 04) -->  Main Navigation
  m > (section 05) -->  Banner
  m > (section 06) -->  Quick Info
  m > (section 07) -->  Profile
  m > (section 08) -->  Recent Discussion
  m > (section 09) -->  Tags
  m > (section 10) -->  Friends
  m > (section 11) -->  Custom
  m > (section 12) -->  Recent Work
  m > (section 13) -->  Blog Feed
  m > (section 14) -->  Full Blog (Seperate Blog Page Styles)
  m > (section 15) -->  Favorites
  m > (section 16) -->  Comments
  m > (section 17) -->  Add Comments
  m > (section 18) -->  Portfolio (Seperate Portfolio Page Styles)
      (section 19) -->  Footer
      (section 20) -->  Advertisements
      (section 21) -->  Bullet / Icon Images
*/

CSS Image Mapping

When creating CSS skins for Artician userpages, we prefer methods of mapping together many small images into one image, and letting CSS determine the background position to be displayed. In return, this cuts down the image load by around 50% in KB, and saves many HTTP requests. This will help your userpages load faster and smoother.

At the bottom of an Artician userpage CSS file you will see an image map (Section 21)

Map

CSS to handle background positions.

 1: div.icon {width:16px; height:16px; margin:10px 6px 0px 0px; float:left; background-image: url(/images/userpage/skin/simpla/iconmap.png); background-repeat:no-repeat;}
 2: div#icon_quickinfo {background-position: center -0px;}
 3: div#icon_profile {background-position: center -16px;}
 4: div#icon_cn {background-position: center -32px;}
 5: div#icon_discussion {background-position: center -48px;}
 6: div#icon_myfriends {background-position: center -64px;}
 7: div#icon_portfolio {background-position: center -80px;}
 8: div#icon_recentwork {background-position: center -96px;}
 9: div#icon_favorites {background-position: center -112px;}
10: div#icon_comments {background-position: center -128px;}
11: div#icon_add_comments {background-position: center -144px;}
12: div#icon_previousblogs {background-position: center -160px;}
13: div#icon_blogarchives {background-position: center -176px;}
14: div#icon_bloglinks {background-position: center -192px;}
15: div#icon_tags {background-position: center -208px;}
16: div#icon_welcome {display:none;}

If you wish not to use mapped image icons on your userpage you can replace the block of CSS above with the following:

 1: div.icon {width:16px; height:16px; margin:10px 6px 0px 0px; float:left; background-postion: top left; background-repeat:no-repeat;}
 2: div.icon#icon_quickinfo {background: url(/images/icons/information.png);}
 3: div.icon#icon_profile {background: url(/images/icons/vcard.png);}
 4: div.icon#icon_cn {background: url(/images/icons/world.png);}
 5: div.icon#icon_discussion {background: url(/images/icons/page_white_text.png);}
 6: div.icon#icon_myfriends {background: url(/images/icons/group.png);}
 7: div.icon#icon_portfolio {background: url(/images/icons/application_view_tile.png);}
 8: div.icon#icon_recentwork {background: url(/images/icons/picture.png);}
 9: div.icon#icon_favorites {background: url(/images/icons/heart.png);}
10: div.icon#icon_comments {background: url(/images/icons/comments.png);}
11: div.icon#icon_add_comments {background: url(/images/icons/comment_add.gif);}
12: div.icon#icon_previousblogs {background: url(/images/icons/book_previous.png);}
13: div.icon#icon_blogarchives {background: url(/images/icons/folder_page_white.png);}
14: div.icon#icon_bloglinks {background: url(/images/icons/book_link.png);}
15: div.icon#icon_tags {background: url(/images/icons/tag_blue.png);}
16: div.icon#icon_welcome {display:none;}

Available Skins

View CSS

Artician Default Skin

Notes

All CSS files on Artician are run through GZIP - GZIP is a software application used for file compression.

Documentation

Docs / Userpage_Customization / CSS