HOW TO MAKE YOUR OWN THEME BACKGROUNDS

1st lesson #1

i suggest finding a picture you like then right click mouse to save as. when you do this it goes into your picture files . if you find a picture you like on the internet or some ones page you can right click it as well and click save as Desk top image . you usually want to stretch the image so it fills whole screen or you will get a tiled image(multiple images ) if you don't adjust it.

to adjust a back ground image you save from the net go to your desk top the image will be there if you saved as desk top image but now if it is tiled image / right click your mouse on desk top screen this will bring up a menu./ then click properties this will bring up a window of features. you now want to click desk top tab. this will show a new window here is where you will find area on right side of window where you can stretch image you saved as desk top image or tile it or fit to screen options after choosing this go to bottom of window. click apply then click save now you have made your own wall paper back ground. after you do this once or twice you become a master at this by doing this step by step.


YOU CAN ALSO OPEN UP YOUR WALL PAPER AND USE ANY PICTURE YOU HAVE STORED IN PICTURE FILES.
1) right click your mouse and open properties on your desk top page and then open desk top tab you will find browse there is where you can choose a saved picture you have in your document files.


----------------------------------------------------------------

lesson N0# 2

creating a ning theme page

go to settings after clicking this click page setting you will some times need to look closely for this is usually in second module area look for word appearance and click this. it will take you to theme area.
will continue this lesson later

.......................................................................................................................
lesson #3
applying advanced css codes
1st step)(important) use your mouse to copy the css code i put here then click appearance on page settings then click advanced .

2'nd step go to page settings scroll down and click advanced here you will find alot of text code use your mouse and delete all text in this box. before saving you must paste new code you copied from here on this page in place of the one you deleted, (important) now click save it will take you to your theme page.

not finished yet.


step #3: now click page settings and click all options here is the most important part.

you want to open the first 4 color modules one by one next here you will type transparent in each box where you see numbers this is very important as you do each one click ok.

Step #4 scroll down to picture module boxes. (side header box) this is where you will add your stretched image picture after adding it you will click save and click side box dont repeat, now go to header image box open and click no image click ok now click on dont repeat on that one. now go to body image box click no image on this one as well then ok. now click dont repeat. now we are about done.

scroll down and click save.

look at your page now you can go back several times to the all options to tweek colors of the text and so forth. as many times till you get colors of object the way you wish to match your theme .


/*---------------------
Start Code
----------------------*/

body {
background-attachment: fixed;
background-position: center top;
}
#xg {
background-position: 0px -10px;
}


/*----------------------------------------------------------------------
Header & Navigation (#xg_head and descendants)
----------------------------------------------------------------------*/
#xg_masthead {
height: 230px;
min-height: 230px;
}
#xg_head > #xg_masthead {
height: auto;
}

#xg_masthead p#xg_sitename {
padding:25px 0pt 0pt 20px;
text-transform:uppercase;
font-size: 50pt;
line-height: 35pt;
letter-spacing: -0.-07em;
}
#xg_masthead p#xg_sitedesc {
padding:0pt 0pt 0pt 20px;
text-transform:uppercase;
}
#xg_navigation ul li {
text-transform:uppercase;
}
#xg_navigation ul li a {
background-color: transparent;important
}
#xg_navigation ul li.this a,
#xg_navigation ul li a:hover {
color:transparent ;
background-color: transparent;important
}


/*----------------------------------------------------------------------
Body (#xg_body and descendants)
----------------------------------------------------------------------*/
#xg_body {
background-color:transparent;
}
h1,
.xg_module_head h2,
.xg_module_body h3,
.xg_module_body caption {
text-transform:uppercase;
}
#xg #xg_body h1 {
color: transparent;important
}
.xg_module_head {
background:transparent none repeat;
border-bottom: none;
margin-bottom:0pt;
}
ul.pagination li.this span {
background-color: #6DACCC;
border-color: #6DACCC;
color: transparent;important
}
#xg_body ul.navigation {
position: static;
float: left;
clear: both;
border-bottom: 1px transparent #333;
}


/*----------------------------------------------------------------------
Footer (#xg_foot and descendants)
----------------------------------------------------------------------*/
#xg_foot,
#xg_foot a {
color:transparent;
}


/*---------------------
End Code
----------------------*/
"designed by Atlantian Traveler Jan '09 -- for my friends on ning




........................................................................................................................
lesson #4
adjusting picture and color modules

YOU CAN GO BACK AS OFTEN TO YOUR APPEARANCE SECTION AS NEED TO ADJUST COLOR THEMES TO MATCH YOUR OR CONTRAST TO YOUR THEME SO YOU WILL BE ABLE TO READ YOUR TEXT AS SOME COLORS ARE HARD TO READ AGAINST OTHER BACKGROUNDS . THIS IS WHERE TWEAKING COLORS BECOMES NECESSARY






......................................................................................................................

lesson # 5

tweeking your theme

I HAVE GIVEN YOU ALL THE BASICS IN THESE LESSONS AND USUALLY TRIAL AND ERROR WILL GIVE YOU BEST RESULTS. DONT BE AFRAID TO DO THE IMPOSSIBLE AS NOTHING IS WRITTEN IN STONE.

IF FIRST RY ISNT EXACTLY WHAT YOU DESIRED KEEP REPEATING THESE LESSONS UNTIL YOU GET RESULTS YOU ARE PLEASED WITH.


..........................................................................................................................
lesson # 6

creating a master piece music player

many don't know this but you can add any picture you wish to each song on your music player.

1) IF MUSIC PLAYER MODULE IS LOCATED IN CENTER AREA OF YOUR PAGE YOU WILL BE ABLE TO SEE THIS LESSON COME TO FULL FRUITION

IF YOU HAVE MUSIC STORED IN YOUR COMPUTER THEN YOU WILL HAVE NO PROBLEM AS YOU WILL BE ABLE TO ADD MUSIC FROM YOUR COMPUTER.

AFTER YOU DO UPLOAD A FEW SONGS WHEN YOU GO TO SAVE THEM IS A PLACE TO ADD A PICTURE TO EACH SONG. YOU CAN ALWAYS EDIT THESE OR DELETE THEM AS NECESSARY ANY TIME YOU WISH.

IN APPEARANCE SECTION ON THEME SETTINGS . ONCE MORE YOU WILL WANT TO GO BACK AND MAKE COLOR CHANGES TO YOUR MUSIC PLAYER AND PICTURE PLAYER AREA ALWAYS MAKE SURE TEXT IS COLOR THAT CAN BE SEEN OVER YOUR COLOR BACK GROUND. ONCE MORE FEEL FREE TO MAKE IT YOUR OWN AS CHOICES ARE UNLIMITED HERE

.......................................................................................................................
lesson # 7

adjusting the modules locations on your personal page

1) WHEN YOU MOVE YOUR MOUSE ARROW OVER COMMENT BOX,MUSIC PLAYER, TEXT BOX GIFT BOX ETC. A 4 POINTED ARROW WILL APPEAR ON LEFT SIDE OF THESE MODULES. WHEN IT DOES SIMPLY HOLD YOUR LEFT BUTTON ON THE MOUSE AND DRAG YOUR MODULE WHERE YOU WANT IT TO BE PLACED.

(NOTE) SOME MODUES WONT BE ABLE TO BE MOVED AS THEY ARE DEFAULT NING FIXED SETTINGS . YOU WILL GET THE IDEA ONCE YOU HAVE PLAYED WITH THIS IT CAN BE DONE AS MANY TIMES AS YOU WISH.




.......................................................................................................................
lesson number # 8
how to stretch a image for a ning theme page

ON YOUR COMPUTER:
1) CLICK START IN LOWER LEFT TOOL BAR ON YOUR MONITOR CLICK PICTURES IN YOUR MENU THERE ; THIS WILL BRING UP YOUR PICTURE FILES. YOU WANT TO MAKE SURE YOU ARE SEEING PICTURES IF NOT GO TO THE LITTLE BOX UP IN HEADER ON RIGHT SIDE AND CLICK IT OPEN AND CLICK THUMBNAILS. THIS WILL MAKE ALL PICTURE FILES APPEAR FOR YOU . CLICK THE PICTURE YOU WISH TO USE ON YOUR THEME.
THIS WILL OPEN THE PICTURE FOR EDIT


2) CLICK THE 13TH ICON ON THIS WINDOW IT WILL OPEN YOUR PAINT FILE AND PICTURE WILL BE LOCATED HERE.

3)CLICK IMAGE AND THEN STRETCH IT WILL OPEN A BOX WHERE YOU TYPE IN STRETCHING PARAMETERS FOR HORIZONTAL AND VERTICAL STRETCH

YOU WILL WANT TO KEEP ADJUSTING THESE PARAMETERS UNTIL IMAGE FILLS WHOLE PAINT WINDOW (IMPORTANT DONT OVER STRETCH AS THIS WILL MAKE YOUR THEME PICTURE OUT OF SKEW , AND WONT FIT NING FORMAT SIZE AREA.

3) ONCE YOU DID THE ABOVE STEPS AND ARE HAPPY HOW PICTURE LOOKS GO TO FILE AND CLICK SAVE; THEN CLICK AGAIN IN THIS AREA SAVE AS. IN THE FILE NAME AREA PUT 2 OR MORE ZEROS IN FRONT OF THE PICTURE TITLE; ALSO TYPE BACKGROUND STRETCH AFTER THE TITLE. THIS WILL MAKE YOUR PICTURE APPEAR AT TOP OF LIST SO WILL BE EASY TO FIND FOR NEXT STEPS.....

NOW YOU ARE READY TO GO TO YOUR NING PAGE APPEARANCE SETTINGS TO APPLY YOUR THEME PICTURE

1) CLICK ALL OPTIONS IN APPEARANCE SETTINGS.

2) CLICK THE CAMERA ICON IN SIDE IMAGE THIS IS WHERE YOU WILL BE ADDING YOUR PICTURE THAT YOU JUST STRETCHED. AFTER ADDING YOUR PICTURE CLICK OK THEN CLICK ON SIDE CHOICE DON'T REPEAT.
3) MAKE SURE ALL OF THE OTHER CAMERA ICON BOXES ARE SAYING NO IMAGE FOR BODY AND HEADER IMAGES AND NO REPEAT IS SELECTED AS WELL.

4) IF YOU ALREADY ADDED CSS CODE OVERWRITE I POSTED IN LESSON 3 WHEN YOU GO TO BOTTOM AND CLICK SAVE YOU WILL NOW HAVE A SIMILAR FLOATING TEXT THEME PAGE WITH YOUR FIXED BACKGROUND IMAGE. ENJOY





....................................................................................................................


alot of these lessons can be applied to other networks out side of ning as well in many other network platforms