Introduction to ZincView Theming

Introduction

ZincView is an anime social networking site.

Customizing a theme in Zincview.com is not an easy task. We have different classes and option to use. There're are 2 ways of making an awesome page theme. One is via the option tab and the other is by writing your own CSS or code to your liking.

Designing is a matter of selfcreating matter. To show what you can do , and show what you are in front of the other.

Content : Layout Basic page designing A. Basic Option B. All Option tab Zincview's Class Introduction Advanced designing A. Layout generated CSS B. Custom CSS C. Tips and tricks

1.Layout

To start off, we must learn the layout of the site.

Basically there're 3 columns in the profile page.

• The Left Column where your basic profile information are put, your friend, your likes, html box etc.
• The Middle Column where your comment, latest activity, status etc.
• The Right Column where you cannot edit in anyway (accept by using css)

Note : You can move All the sections of your page such as your html box, about me section, latest activity etc anywhere in the left or middle column (not the right column). For Comment box and My Friends box, you can only drag them down or up in their original column.

What You can't move : Your basic information which located on the upper left column, Your status and headline on the upper middle column, and the right column

2. Basic Page Designing

You can edit your page by choosing My Page >> Edit Themes, but you can do it the old fashioned way or by opening your current page, and bellow your basic information, click on "Manage My Page". After that you'll meet this page :

2. A. Basic Option

There are 2 parts in the appearance tab or customization tab. The upper half or default themes gallery and the lower half, or the Option tab. Now let's learn about the upper half.

Upper half consist of many default themes that you can use as base themes which you will edit later on. There are many varieties of themes you can choose from the list. Choose wisely. (You have to choose to be able to use basic option)

Because you're going to use that theme as base, and you're going to change the coloring - header only.

Next, Is the lower part, which you're going to edit with. There are only few option such as header color background, module (box) background,body etc. You can edit them yourself can't you?

• Header : above the menu "main" , "invite" etc.
• Body : bellow the menu "main", "invite" etc
• Module : the box color
• Sides : your background

2. B. All Option tab

For further customizing, there's the all option tab which show many option on the designs. You can experiment on this as long as you like. It's only able to :

• Change your header picture
• Change your background picture
• Change the color of of your theme

3. ZincView's Class Introduction
There's another way of designing your page, that's the advanced css which you will use from now on. There're many blank css in the net for it that you can use as your base theme or you can use the base css from the gallery on upper half of the appearance page.

Here's Zincview's Class :

If you're confused , you can go HERE to test which and which is it. Well there's a picture that gonna guide you to it :D ! Don't worry ! :D!

4. Advanced Designing

In Advanced Designing you will be forced to be as creative as you can and just have fun with your profile. There's a lot you can do it with your profile you can look for CADS ! for support and if you're having trouble directly, just PC me in the chat. i'll gladly answer your questions

Advanced Designing, you're going to use what've been given to you. In this case the class that've been told to you above. We're going to learn some basic CSS and please bear with me because this is the hard part.

#the_name_of_the_ID or .the_name_the_class {
what_you_want_to_edit_in_theclass: the_name/color_font_of_the_edit_or_detail ;
what_you_want_to_edit_in_theclass: the_name/color_font_of_the_edit_or_detail ;
what_you_want_to_edit_in_theclass: the_name/color_font_of_the_edit_or_detail ;
what_you_want_to_edit_in_theclass: the_name/color_font_of_the_edit_or_detail ;
}

example :

• .xg_module {
  color: #cecece !important;
  }

That will make the font or the text inside the box grey in color. I'm not gonna be explaining anymore of this. Just Jump to Custom CSS if you're interested in learning more.

4. A. Layout Generated CSS

There's a site that provides you with a css generator, please use them if you like :D. They're very nice people and some provide many themes for you to use :D! Here

4. B. Custom CSS

You can also use custom css in your theme, doing this. You can do anything you like with your page! Awesome right? :D

The Ning Bar - #xn_bar
you can customize it like this [Remove the things in bold and italic]

#xn_bar { (this mark always means that it started)
color: #000000;
background-color: #ffffff;
background-image:url(abc.jpg);
background-repeat:repeat;
border:1px solid #fffffff;
font-family:kristen itc;
font-size:12px;
text-decoration:underline overline;
} (this mark is for ending it, remember to add it or the css won't work)

Customization

1. color = is for the font color or the text color you want to use in your ning bar.
   • Tips! - The color are in this web color chart, you can add it on your own
     http://www.ironspider.ca/format_text/fontcolor.htm
     
2. background-color= the background of the ning bar you want to use it for XD ~ if you want it to be none or transparent just replace #ffffff with transparent !important
3. background-image=if you want to use image fill in the url of your image like http://www.photobucket.com/1.jpg in the brackets . if you use no picture just put it into fill the brackets none
4. background repeat= what kind of image repeat do you want ? repeat like others? just put repeat , if you want it to repeat horizontally put repeat-x , if you want to repeat it vertically put repeat-y , if you don't want any repeat, you can put no-repeat .
   
5. Let me remind you something first do not forget the " ; " mark each to each addictional information in your css besides the " { " and " } " .
6. now the borders
   • 1px means it the thickness of the border is about 1px or 1 pixel.
   • #ffffff means the color of the border
   • solid means the kind of border you want . there are 3 common kinds of borders. the ridge i'm not doing cause i lack the pict so i cannot express the style in text .Here you go :
   • • solid = like this _______________________ [solid line]
     • dashed = like this - - - - - - - - - - - - - - - - - -
       
     • dotted = like this ...................
7. font family is for the kind of font you want such as courier, kristen itc, juice itc etc
   
8. font-size is for the size of the font you want to use in the pict
9. text decoration, the 3 most common are :
   
   • underline = LIKE THIS ~
     
   • line-through = like this
     
   • overline = like this
     

that are the most common addictional information for css guide.

Now the background of all yes, behind all of the pictures.
it's called body

so the css looks like this

body {
background-color: #000000!important;
background-image:url(http://i383.photobucket.com/albums/oo273/MeShiang/bg.png);
background-position:Center 0px;
background-attachment:fixed; (this shows if you want your pict to be scrolled or just stay right there, so if it's scrolled, it didn't move)
background-repeat:repeat;
}

#xg_masthead,#xg_masthead a {
height: 250px;
min-height: 250px;
color: transparent !important;}

Change the height with your size of header , for example if yours 450px, replace 250px with 450px.
You can put the header in the option tab =) , it's easier

#xg_body

it's for the body! not the place where's the text go !

This is the background for the background of the text ! <-- really.

you can think it this way, The furthest back are body , then #xg_body, then .xg_module_body[The background of the text] , xg_module_head etc.

 

Links on hover

body a {color: #ffffff;}body a:hover {color:#00000; }

body a is for the links that you used. before hovering
body a:hover is for the links that you hover

.xg_module_body - the background of the text box
.xg_module_head - the header of the text box
.xg_module_foot - the footer of the text box- (you know the "+add music" or "view all" thingies?

#xg_foot

You can customize the background color and image here , but if you want to change the color of the font there use...

#xg_foot a

4. C. Tips and Tricks

Zincview is opening its door to future Ning Theme Designer, You can join CADS in the group. We're sharing our tips and tricks there! Don't forget to share your theme if you're finish with it :D! You can post it as a discussion in the CADS's forum :D

Thank you for reading ! Happy Customizing !