DreamTalk

Thank you for visiting DreamTalk! Try to log-in or register. http://dreamtalk.smfforfree3.com
Dream Talk
November 20, 2017, 11:55:34 pm
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to Dream Talk - another forum for girls.
 
  Home   Forum   Help Search Staff List Login Register  

How to Make a Simple CSS Layout =)

Pages: [1]   Go Down
  Print  
Author Topic: How to Make a Simple CSS Layout =)  (Read 13761 times)
DreamTalker
xX GodGurl25 Xx
Administrator
DreamTalker Junior
*****

DreamTalker's reputation: 0
Offline Offline

Gender: Female
A.K.A: GodGurl25, Betina, Betzz
Posts: 60



View Profile
« on: October 31, 2008, 08:28:30 pm »

How to Make a Simple CSS Layout
tutorial by: Betina (DreamTalker)

1. Get a background from Photobucket, Tinypic or any image hosting sites. If you want you can upload your own. Then get the Direct Link code of it. (in Photobucket, it is called Direct Link Code)

2. Go here. This is where you can generate your layout.

Explanation
:

Profile Background: (as what is stated. Backgrounds, etc.)
 Color: Well, the color of your background.
 Image:
  URL: Well, paste the Direct Link Code here.
  Position: The position of your background image.
  Repeat: Tells if you want it to be repeated or not in the screen.
  Attachment: Well, do you want your image to be fixed or scrolled? Fixed means it will not move while
    scrolling, scroll means the image will move while you are scrolling the profile.

Global Fonts
: (like Favorite Music, Hometown, etc.)
 Font Set: Well, the font to be used in your profile. Default- Arial.
 Text: Where you can pick the color of your global fonts.
  Text Transform: Where you can set whether you want it to be capitalized, etc.

Global Links: (appearance of all the links)
 Font Set: Like in Global Fonts. The font to be used. default- Arial.
 Link: Where you can pick the color of the links when not hovered.
  Text Decoration: Where you can set whether you want it to be underlined, overlined, strikethrough, or
   nothing.
  Text Transform: Where you can set whether you want it to be capitalized, etc.
 Link Hover: The appearance of the link when hovered.
  Text Decoration: Where you can set whether you want it to be underlined, etc. when hovered.

Global Headers: (appearance of the headers: like More About ____, Comments, etc.)
 Font Set: The font to be used. Default- Arial.
 Headers: Where you can pick the color of the text of the headers.
 Text Transform: Where you can set whether you want it to be capitalized, etc.
 BG Color: The color of the BG (background) of the headers.

Global Boxes: (appearance of the boxes)
 BG Color: Background color of the boxes.
 Border: The color of the border of the boxes.
  Width: Where you can set the size of the border according to pixels. (set this or else your border will
   not be seen!)
  Style: The style of the border. Can be solid, dotted, dashed, etc.
 Testimonials Even Row BG Color: Where you can pick the color of the alternate comments.

Control Panel Buttons: (the color of the buttons like: Add as Friend, Add Comment, etc.)
 Font Set: Where you can set the font. Default- Arial.
 Buttons Text: The color of the link of the buttons when not hovered.
 Buttons BG: The color of the background of the buttons when not hovered.
 Buttons Border: The color of the border of the buttons when not hovered.
  Style: Where you can set the style of the border like solid, dotted, dashed, etc.)
 Buttons Text (Hover): The color of the text (link) when hovered.
 Buttons BG (Hover): The color of the background of the buttons when hovered.
 Buttons Border (Hover): The color of the border of the buttons when hovered.

Misc: (miscellaneous styles)
 Primary Photo Border: Color of the border of your primary border.
  Style: The style of the border like solid, dotted, dashed, etc.
 Data Labels or Text: The color of the data labels or text.
  Text Transform: Where you can set the text to capitalized, etc.
 Photo Blocks BG Color: The color of the background of the photo blocks.
 Photo Blocks Border: Color of the border of the photo blocks.
  Width: The size of the border according to pixels. (do not forget to set this or else your border will not
   be seen!)
  Style: Style of the border- dashed, solid, dotted, etc.
 Friend's Name BG Color: The color of the background of the Friend's Name in Friend's box.

3. Click Generate CSS Code. A code will appear on the text area.

4. Not sure about the appearance? Click Preview Layout to see the appearance of the layout. This
 can help to correct errors in your layout.

5. If you are sure already, you can copy the CSS code found in the text area.

6. Log in to your Friendster account (http://www.friendster.com). Then you'll see a drop-down list
 box, with text 'More', right? Click the drop-down arrow then choose Customize Profile.


7. You will see the text Customize CSS, right? With the text area below. Now, paste the CSS Code
 there.


8. Then click Save on the bottom of the page.

9. When you waited it to load, and when you see the word Success!, then preview your profile by
 clicking 'View Your Profile Now'.


10. And you're done! I hope you learned from my tutorial. =)

(+ DreamTalk reputation will be appreciated. I hope you learned from this tutorial. You can post your layouts on the layouts category, in the board of Friendster Layouts. Thank you!)
(If you want to post this tutorial, please make sure you'll quote our forum, (http://dreamtalk.smfforfree3.com), or better put the link of this post.)
Report Spam   Logged

Social Buttons



Pages: [1]   Go Up
  Print  
 
Jump to:  

Rock Princess Style Sheet made at Angelicum
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum | Buy traffic for your forum/website

Powered by SMF | SMF © 2016, Simple Machines