posted Nov 7 2006, 01:19 AM:http://www.artician.com/learn/docs.php/Customize/CSS
This is a guide elaborating Userpage CSS structure and Elements.
http://www.artician.com/styles/profiles/user.css
This guide will not teach you how to customize your userpage, rather get you familiar with the words and terms Artician Developers use in the CSS file, along with the techniques used in order to achieve a successful CSS design.
Think of this a glossary made up of the elements you will find when looking at your CSS file. Once you begin to become familiar with the way we structure the Userpage design using CSS you will start to be able to customize, and implement your own unique elements to your page.
This will updated regularly, and will list additional guides to useful tutorials on customizing your personal Artician userpage.
-------------------------------------------------------------------------------------------------------------------------------------
The first thing you should know about the Userpgae CSS file is that the styles are all listed in order they appear on your default userpage. At the start of the CSS file we have created an index. This is in order help easily locate the element you wish to edit or customize.
Each element in the CSS is listed under one of the following categories. You can easily scroll through to find the area you want to edit, or you may simply use the "find" tool in your favorite text editor and search using the section. For example if we were trying to edit the main text controls we would search for "section 02", and conveniently bring you to section.
(section 01) Main Page Properties, and Primary Link Colors
(section 02) Main Text Control
(section 03) Header
(section 04) Horizontal Title Bars
(section 05) Banner
(section 06) Quick Info Area (Directly under banner)
(section 07) Recent Submissions
(section 08) Representing Image
(section 09) Mini Blog
(section 10) Full Blog
(section 11) Detailed / Overview Profile
(section 12) Friends
(section 13) Recent Favorites
(section 14) Comments
(section 15) Footer
(section 16) IMAGES | Main Menu Tabs
(section 17) IMAGES | Sub Menu Tabs
(section 18) IMAGES | Submissions / Favorites Thumbnail Display
(section 19) IMAGES | Thumbnail Dropdown Menu
(section 20) IMAGES | All Icons and Bullet Control
Index with descriptions:
(section 01) Main Page Properties, and Primary Link Colors (Body, Table, Links, Forms & Container Elements)
(section 02) Main Text Control (Main Text Colors that are used in various places on the Userpage)
(section 03) Header (Container that holds all content between the very top network bar, and you banner)
(section 04) Horizontal Title Bars (Strip made up of 3 images that divide & title all areas of content)
(section 05) Banner (The large Banner Image displayed under the Main Menu)
(section 06) Quick Info Area (Directly under banner) (The Strip of Content under you banner, includes avatar, quick info, and welcome message)
(section 07) Recent Submissions (Box displayed under quick info, that displays your recent submissions)
(section 08) Representing Style Image (Box that shows your representing style image )
(section 09) Mini Blog (This is the area where recent blog posts are sampled on your userpage)
(section 10) Full Blog (Full Blog area contains all additional elements used on your blog page)
(section 11) Detailed / Overview Profile (area that displays Detailed Profile and Profile Overview)
(section 12) Friends (Box that displays your friends, and how they appear on your page)
(section 13) Recent Favorites (Box that displays your recent favorite artwork)
(section 14) Comments (Complete received comments and add a comment area)
(section 15) Footer (Box that displays ads, and copyright at the bottom of your userpage)
(section 16) IMAGES | Main Menu Tabs (Tabs used in your main main menu)
(section 17) IMAGES | Sub Menu Tabs (Secondary Tabs used to expand or include fuller content))
(section 18) IMAGES | Submissions / Favorites Thumbnail Display (Recent Favorited and Submissions image ]display properties)
(section 19) IMAGES | Thumbnail Dropdown Menu (Drop down menu for thumbnails)
(section 20) IMAGES | All Icons and Bullet Control (ALL icons and bullets used)
-------------------------------------------------------------------------------------------------------------------------------------
Main Menu Tabs
Main Menu Tabs are located at the top of your userpage, and serve as the primary navigation for your visitors.
-------------------------------------------------------------------------------------------------------------------------------------
Sub Menu Tabs
Mouseover tabs located on the right side of the Title Bars. The Sub Menu tabs are used to expand content or provide additional features of that area on the userpage.
-------------------------------------------------------------------------------------------------------------------------------------
Title Bars
There are three images making up the Horizontal Title Bars:
Left: 5x29 Image
Middle: 1x29 Background Image
(repeated horizontally throughout the center)Right: 5x29 Image
You can replace the url of the images in the CSS to your own images. Use your creative freedom to change any dimensions of the image, just be sure to dfine the size of the image in the css.
-------------------------------------------------------------------------------------------------------------------------------------
Profile Bars
There are three images making up the Horizontal Title Bars:
Left: 33x24 Image
Middle: 1x24 Background Image
(repeated horizontally throughout the center)Right: 9x24 Image
You can replace the url of the images in the CSS to your own images. Use your creative freedom to change any dimensions of the image, just be sure to dfine the size of the image in the css.
Oh, well!
