~~A Complete Guide To Camp Customization!~~

[cнeeтaн★]

Please do not PM me for profile help.  I have quit and will not reply.  Sorry!

Many people are very confused with how to use the code to customize their camp.  I have made a tutorial to (Hopefully) help.

(click to show/hide)

(click to show/hide)

Well, I can, but why don't you try this first?

-Copy/paste this code into your customization box:

Code: [Select]

<style>
body
{
   background: url(BACKGROUND LINK) #000000 fixed;;
}
</style>-Replace the BACKGROUND LINK with the URL or code of your background picture.
-If you can't figure it out, I'd be happy to help you:]]

(click to show/hide)

Well, of course I can!  But try this first, the come to me:
Copy this code:

Code: [Select]


}

#header {
    height: 278px;
    overflow: hidden;
    position: relative;
background: url("HEADER LINK") no-repeat scroll 0 0 transparent;
}-Paste it in your customization box, directly under the background code, but over the </style>
-Replace HEADER LINK with the code or URL of the picture you want as your header.

(click to show/hide)

Yes I can! But how about you try this first before posting here?
-Copy/Paste this code into your customization box:

Code: [Select]

<style>
body
{
   background: url(BACKGROUND LINK) #000000 fixed;;
}

#header {
    height: 278px;
    overflow: hidden;
    position: relative;
background: url("HEADER LINK") no-repeat scroll 0 0 transparent;
}</style>-Replace the BACKGROUND LINK with the URL or code of your background picture.
-Replace HEADER LINK with the code or URL of the picture you want as your header.

(click to show/hide)

I'm sorry, but no.  There are many shops found here on WCRPG that do both of those things, though.  Sometimes for free!

{.Step 0.} Brainstorm
    -Before you start, you have to have a pretty basic idea of what you want your profile to look like
    -Choose your main 3 colors
    -Color 1: Box colors
    -Color 2: Text Color
    -Color 3: Border color
    -Color 2&3 can be the same
    -You can have as any colors as you want, but these three are the basics

{.Step 1.}Find a good Hex Color Code website. You will be using this a lot. I use This Website, but there are plenty of others.

{.Step 2.} Headers, Backgrounds, and News tables.
     -Have a header ready. A header is the picture that will go across the top of your camp, replacing the WCRPG cats. Try to have it around 900x250 Pixels.
     -Have a background picture picked out.  There really is not perfect size for this.  Try to find a picture that is the same size as your computer screen. Unless of course, you want it repeated.
     -Have a News tables picture picked out.  The news tables are the little boxes that hold the "New Replies" Button, and the "Come join a clan today!" 
     -The news tables should be 445x136 is you want them to fit. Otherwise, just change Wynn's template to your liking.

{.Step 3.} Little Boxes
    -These four little boxes will make up almost your whole profile, but I will explain that later. 
    -For now, save This little box. 
    -Go to your photo-editing program(GIMP, Picnik, Photoshop)
    -Color box the color you want your profile to be(Color 1)
    -Mine is black
{.Step 4.} Profile Code
     -Here is the code that makes everything possible. This is my code, and it has
-Copy and Paste this code:

Code: [Select]


<style>
body
{
   background: url(BACKGROUND LINK) #000000 fixed;;
}

h3.catbg {
background : #000000;
color: #000000;
border: 0px;
}


div.cat_bar {
background : #000000;
color: #000000;
border-color: #000000;
border: 1px solid;
}

.windowbg {
background : #000000;
color: #000000;
}

span.left {
background : #000000;
color: #000000;
}

strong {
    color: #000000;
    font-weight: bold;
}

div#profile_success {
background : #000000;
color: #000000;
border-color: #000000;
}

.creator

dl {
color: #000000;
}

#header {
    height: 278px;
    overflow: hidden;
    position: relative;
background: url("HEADER LINK") no-repeat scroll 0 0 transparent;
}

.newsDiv, .userinfo {
    background: url("NEWS TABLES LINK") no-repeat scroll 0 0 transparent;
color: #000000;
}

.newsText, .inner {
color: #000000;
}


textarea {
    color: #000000;
}

.windowbg2 {
background : #000000;
color: #000000;
border: 1px solid #000000;
}

.time {
color: #000000;
}

h3.catbg a, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
    color: #000000;
}

input, button, select, textarea {
    background: #000000;
    border: 1px solid #000000;
    color: #000000;
}

div.spoilerheader input {
    background-color: #000000;
    color: #000000;
    border: 1px solid #000000;
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
}

.inner {
    border-top: 1px solid #000000;
    color: #000000;
}

.rp_username strong
{
        color: #000000;
font-weight: normal;
}

h3.catbg77 {
background: none;
color: #000000;
border: none;
}


#profile_left .catbg, .cat_bar, .catbg77 {
background: url(LITTLE BOX LINK);
border: 1px solid #000000;
}

#profile_right .catbg, .cat_bar, .catbg77 {
background: url(LITTLE BOX LINK);
border: 1px solid #000000;
}


#profile_left .windowbg {
background: url(LITTLE BOX LINK);
border: 1px solid #000000;
}

#profile_right .windowbg {
background: url(LITTLE BOX LINK);
border: 1px solid #000000;
}

</style>
{.Step 5.} Background
    -Pull up your background picture
    -Find this part of the code:

Code: [Select]

body
{
   background: url(BACKGROUND LINK) #000000 fixed;;
}     -Replace BACKGROUND LINK with your background link

{.Step 6.} Header
     -Pull up your header picture
     -Find this part of the code

Code: [Select]

}

#header {
    height: 278px;
    overflow: hidden;
    position: relative;
background: url("HEADER LINK") no-repeat scroll 0 0 transparent;
}
     -Replace HEADER LINK with your header link

{.Step 7.} News Tables
    -Pull up your news table
    -Find this part of the code:

Code: [Select]

}

.newsDiv, .userinfo {
    background: url("NEWS TABLES LINK") no-repeat scroll 0 0 transparent;
color: #000000;
}      -Replace NEWS TABLES LINK with the link to your news table

{.Step 8.} Main Color
      -This is where we incorporate Color 1 from step 0
      - Open up the Hex Code Website
      -Remember step 3 when you colored those boxes? Find the color you made those boxes on the Hex Code Site
      -Paste the Hex Code wherever it says this:

Code: [Select]

background : #000000;       -Be sure to replace the black hex code, not add to it


{.Step 9.} Border
      -This is where we incorporate Color 3 from step 0
      - Open up the Hex Code Website
      -Find your color in the hex codes
      -Paste the Hex Code wherever it says this:

Code: [Select]

color: #000000;                 or

Code: [Select]

border: 1px solid #000000;      -Be sure to replace the black hex code, not add to it      

{.Step 10.} Text!

-This is where we incorporate Color 2 from step 0
      - Open up the Hex Code Website
      -This may get confusing, since the border code and text code are almost the same
      -Paste the Hex Code wherever it says this:

Code: [Select]

color: #000000;
font-weight: normal;          or just color: #000000; by itself.
        -If color 2 and 3 are the same for you, you will not have to worry about it
       -Be sure to replace the black hex code, not add to it
{.Step 11.} Remember those boxes I gave you? Now its time to use them.  Paste the url of your newly colored box in wherever it says:

Code: [Select]

#profile_right .catbg, .cat_bar, .catbg77 {
background: url(http://i1204.photobucket.com/albums/bb413/fire115/blackbox.png);
If you used my code to change the border, just use the Hex Code you used for the previous Borders(Step #9) and change it with the one under the box url.
{.Step 11.} Extras

There are a few extra things you can add to your camp like:
-Music
-Fancy Cursors
-Videos

(click to show/hide)

Music                         

- Get the music code from this thread: CLICK HERE  For the sake of simplicity, here is the code:

Code: [Select]

<div style="text-align: center;"><object width="800" height="25"><param name="movie" value="http://www.youtube.com/v/HERE&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/HERE&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="800" height="25" /></object></div>
-Open up your video in youtube

-Find the URL.  The URL is the website address at the top of the page.
Example Code:

Code: [Select]

http://www.youtube.com/watch?v=000000000sdjsk
-Find the first equal sign in the URL. Copy everything after the equal sign.
So, you copy the red part on this::
http://www.youtube.com/watch?v=000000000sdjsk

-Paste that wherever is says HERE in the code.  So, paste it wherever the text is red:
<div style="text-align: center;"><object width="800" height="25"><param name="movie" value="http://www.youtube.com/v/HERE&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/HERE&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="800" height="25" /></object></div>

-Make sure that is all in your customization box and save

(click to show/hide)

Cursors                             

To do it yourself Go here:
http://www.cursors-4u.com/

Find the one you want, and copy the first code.{Universal CSS}
Paste it in your customization box, after everything at the very bottom.

(click to show/hide)

Videos                             

-Find the video you want on Youtube.
-There are 5 buttons directly under the video.  Click the "share" button.
-Two buttons will appear.  Click the "embed" button.
-A code will pop up, along with 4 checkmark boxes.  Make sure the last one-Use old embed code- is marked.  The "iframe" one will not work on your camp.
-Copy the code.
-Paste in Camp>Ultimate Profile>My Media box.

And Done! This may seem very long and confusing, but you'll get the hang of it.  If you have any other questions, feel free to ask them here.  Also, if I got anything wrong, please tell me. I want to this to be as helpful as possible.

Hope this helped!
~Cheetah~


Please do not ask if I will make your profile for you!

[Profile Tester 1]

Bump.

[єνє]

I'm not totally sure of what to do, can you hep me?

I have this picture I want to use for my background


ad I just need a bit of tutoring if you know what I mean, i'm not to smart at this kind of stuff, but I think you can help me 

[cнeeтaн★]

Code: [Select]

<style>
body
{
   background: url(http://www.everydesign.net/wp-content/uploads/2011/10/Backgrounds-1.jpg) #000000 fixed;;
}

</style>
Try using this code.  Put it in your camp>Ultimate Profile>Customization Box

[Smallfoot]

Very nice guide! Mine didn't give as much information. >.>

[єνє]

I worked! How should I do the headers?

[Percy Jackson14]

I am still so confused.........

[cнeeтaн★]

What's the part you are most confused with? Also, if this is too confusing for you, don't worry about it. There are plenty of profile shops that can do this for you.

[Percy Jackson14]

Can you tutor me please with this because I'm just lost.

[єνє]

Can You give me the link to one, if so it would be much appreciated

[cнeeтaн★]

Do you mean a shop? There are like 5 under this thread, most of them free! And sorry, I can't tutor you I don't really have the time and everything I know is already in this thread.

[✯ ℛussєtplαguє ✯]

How do I change the default blue boxes to a different colour?
  Blue and red doesn't mix very well. 

[cнeeтaн★]

Use steps 8 and 9

[✯ ℛussєtplαguє ✯]

  Ohh! Thank you!!!   
My camp look so awesome now. Thank you so much!! 

[cнeeтaн★]

No problem