Rescreatu - Virtual Pet Game

Profile Tutorial


Go to page: 1 Bookmark Thread
Allegra

10:49pm Mar 17 2010 (last edited on 11:03pm Mar 17 2010)

Normal User


Posts: 8

First Steps

<All tutorial is (c) Allegra. Anyone can refer to this tutorial, however you may not repost this outside of Rescreatu or for your own guide without my permission. You do not have to credit me on your profile (: However I would love to see what you came up with!>
 
â—‹ If you use Firefox, the Firebug is a great add-on to show you which parts of the CSS is which on Rescreatu.

 â—‹ You wouldn't need to use trial-and-error to find out which is which.
 


 â—‹ List of profile modules and more you could alter.

These are grouped by div IDs and div Cla.sses. More on this later.


 


#header
includes the top banner "rescreatu" and the empty space below, down to the top of the Icons

  .head
the icons and the grey "Rescreatu" tab, also the top black border


#sidebar1
the navigation on the left. Includes "navigation" and "today"

#navigation
the nagivation, ONLY the NAVIGATION. Does not include "today".

#today
the today, ONLY the TODAY. Does not include "navigation".

#sidebar2
the shoutbox.

#content
the center of the webpage. I don't advise you to change this, this may alter your whole profile content page.

  .body
the inside content, extending to the left & right border

  .inner
the complete unside text, only including the right border



#footer
the very bottom of the page- doesn't include the two blanked out adboxes.

  .foot
the bottom border

  .ad-bottom
the bottom ads

#block1, #block2, #block3, #block4, #block5, #block6, #block7 your profile modules, includes your user information and profile pets.


If I do make a mistake, please rmail me and correct. Please do not post here, as I am not finished with the guide yet! I'll edit the guide with your name for credits. Thank you.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010 (last edited on 11:15pm Mar 17 2010)

Normal User


Posts: 8

Types of Divs




You can find a whole lesson on this via Google, however this is just basically what you have to know for profiles in Rescreatu.




Div IDs


Div IDs are div layers with # in front of them- like #header, #footer, etc. To use these with your coding, in the text area, you have to insert div id=YOURIDHERE followed by your text and an ending /div. Make note that ids have no quotation marks before and after its name.



To create a div ID, you must, in your coding style area, use a # to tell that it's an ID. Then, you can follow up with a word; you can use numbers, letters, and underscores but no spaces and symbols, to lessen the confusion.




Div Cla.sses


Div Cla.ss are div layers with . in front of them- like .foot, .head, etc. To use these with your coding, you have to insert div cla.ss="YOURCLA.SSHERE" followed by your text and an ending /div. Note that cl*censored*es have quotation marks before and after its name.



To create a div cla.ss, you must use a period (.) to tell that it's a cla.ss. Then, you can follow up with a word; you can use numbers, letters, and underscores but no spaces and symbols, to lessen the confusion.




Div Align



You can substitute your html codes for center, right, left- you can use divs to do the exact same thing. Just always remember to close of your divs.


align right: div align="right"

align left: div align="left"

align center: div align="center"




Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010 (last edited on 11:36pm Mar 17 2010)

Normal User


Posts: 8

A general Rescreatu profile guide



Checklist:

- hide the sidebar, headers, chat, ads, icons.

- add a background color and image to your profile

- adjust fonts

- adjust links

- hyperlink with your own text




Part One: hiding things


1. Create a new .txt file on your computer, using Notepad.

2. Type in: <*style type=text/css> (from now on, delete the * in our coding). You are now starting your code area.




So, you hate the current layout- blue and orange, and the regular Rescreatu layout. You want to hide those bits and create your own.


Right below what you have typed, enter the following:


#sidebar1, #sidebar2, #header, #footer, .head,.adbottom {display:none;}


What does this mean? This line of code makes Rescreatu hide, or not display, your navigation, shoutbox, header, footer, icons, and bottom ads. All CSS coding has to be in curly brackets, { and }, to make it work- also before the last bracket, you have to use a semi-colon. Before the first curly bracket will be the sections of what you're going to alter. That's the basic syntax for CSS.



Copy and paste the code into your account profile box, while adding a <*/style> to end the coding. If you do it right, you should see the navigation, header, icons, shoutbox, and ads vanish.





Part Two: Backgrounds



The design looks plain right then and there- why not try adding a background to spice things up just a bit?



Here's how you add a background.




1. Below your first line of coding, add body {position: absolute; background-image: (YOURURLHERE); repeat: repeat-x;} if you want to add an image from a picture uploader, or body{background: #xxxxxx;} to use a hex color.



What does the coding mean?



For an image background, you have to state your background position. There are a few to choose from: absolute, relative, static. This time we'll go with absolute. Background-image speaks for itself; it's where you put in your image code- just plain http:// ones would work. Repeat-x repeats the image horizontally, while Repeat-y repeats your image vertically.


A color background is easy- you enter the six, or three (#fff for white, #000 for black, or any repeated hex colors) and your wanted color appears as your background. If you do want two or three colors, you have to use an image.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010

Normal User


Posts: 8
taken.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010

Normal User


Posts: 8
taken.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010

Normal User


Posts: 8
taken.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010

Normal User


Posts: 8
taken.



Socks are lucky, who says they aren't?
Allegra

10:53pm Mar 17 2010

Normal User


Posts: 8
taken.



Socks are lucky, who says they aren't?
Roxas

6:34am Oct 5 2010

Normal User


Posts: 829
Bumps, this would be good for starters.







ロクサス

Rokusasu.
#13, The Key of Destiny
Event Horizon & Magic Hour

lazerwolf

8:14pm Oct 16 2010

Normal User


Posts: 10
Allegra, when I tried pasting it onto my profile, it didn't work.  Why and what do I do to make it work?  HELP!
 _Ranvier

8:33pm Oct 16 2010

Normal User


Posts: 1,731
They're banned. :c




Grimoire

11:16pm Oct 16 2010 (last edited on 11:17pm Oct 16 2010)

Normal User


Posts: 853

Huh. Necro'd.

Well, I can just as well help.

What are you copying and pasting, Lazer? This isn't exactly a copy and paste tutorial... well, I guess it could be, but to me it seems like a "show you how to do certain things on Res" tutorial. And though it has some info on how to actually set stuff up... to use this information well it's a good idea to have a bit of knowledge on CSS and HTML first.

http://www.w3schools.com/html/

w3schools has some nice tutorials on this.





 photo 40 - DSZVXzV_zpsj5zwxtwe.jpg
funnyphoto123

10:10pm Jul 21 2011

Normal User


Posts: 1
im LOST. i do not know what this tut means at ALL!!!!!!!!!Frowntle="Frown" />



wish
WaterPrincess02

11:22am Aug 18 2011

Normal User


Posts: 140
what does this all mean



DANCE
Kittykat

1:31am Nov 6 2011

Normal User


Posts: 1,477
I don't get it!!!! ="(



Kittykat

12:46am Nov 11 2011

Normal User


Posts: 1,477
Bumpies



emaohn

11:29am Jul 1 2012

Normal User


Posts: 2
I want to puot HTML codes but i don't know how. I also want to know how to create side bars and backgrounds. Can anyone help me?
Midna

6:11am Jul 9 2012

Normal User


Posts: 1,956
Necroposting is against the rules, please don't do it ;c



Go to page: 1