xat  
Results 1 to 1 of 1

Thread: XatSpace - Adding Customized Paragraphs

  1. #1
    ArcticChibi Guest

    Default XatSpace - Adding Customized Paragraphs


    Hi there! This tutorial is going to show you how to make your XatSpace have a customized about box! Here is a picture:


    The concept of this design is getting your paragraphs in order and adding a picture to either the left or right!

    First of all, go to your edit page for your xatspace. The first edit box is where the about box is. The second edit box is where your multimedia goes (music, videos, etc.).

    If you have anything in your about box edit box, put all the code I issue to you on the bottom of your code.

    Now, try putting this code in your box and see what it looks like:


    HTML Code:
    <img src="http://mathworld.wolfram.com/images/gifs/smstdo-o.jpg">
    TEST PARAGRAPH :D
    Preview it and you'll get something in your about box that looks just like this.


    Delete that code now. We are going to add something better than that! For website designers/programmers, this is using CSS (Cascading Style Sheet). For non-programmers, these kinds of files/formats are very useful for making a website. You can do a buttload of thing with CSS and it is what I am using to customize these pages!

    What you need are tables to format your paragraphs. Also, you will need a style that will change certain tags in HTML.


    Here is my style:
    HTML Code:
    <style>
    .align-right { float:right; margin: 0 0 15px 15px; }
    p img { float:left; margin: 0 15px 15px 0; opacity:0.75; width:100px; height:100px; }
    #about {opacity:1;}
    p {font-family: Verdana; font-size: 8pt;}
    div#about0 #about { border: 1px solid green }
    #header { opacity:0.5; }
    </style>
    Here are some explanations for the code in my style.

    HTML Code:
    .align-right { float:right; margin: 0 0 15px 15px; }
    p img { float:left; margin: 0 15px 15px 0; opacity:0.75; width:100px; height:100px; }
    The first line of code makes an image stay on the right of paragraphs if you change .align-right to img. The second line of code makes the images in a paragraph stay on the left.

    HTML Code:
    #about {opacity:1;}
    This makes the about box fully visible. If you want to make it transparent, change 1 to a lower decimal. (ex: 0.5)

    HTML Code:
    p {font-family: Verdana; font-size: 8pt;}
    It changes all paragraphs <p> to have Verdana as a font and 8 point font.

    HTML Code:
    div#about0 #about { border: 1px solid green }
    This puts a thin green border around the about box.

    HTML Code:
    #header { opacity:0.5; }
    DO NOT USE UNLESS YOU WANT YOUR XATSPACE TO BE MESSED UP
    This makes the big blue header on the top turn transparent.

    Now that you got some of the code, you have to add it to your edit box if you haven't already. You can copy my style. I don't really care.

    After all that code has been added, check out my coding for the paragraphs:


    HTML Code:
    <h1 style="font-family:Verdana;">My Profile Header HERE</h1>
    <table>
    <tr>
    <td>
    <p>
    <img src="Your Picture URL HERE" />
    <span style="font-weight:bold;">
    Welcome to my profile!
    </span><br />
    First Paragraph
    </p><br /><br />
    </td>
    </tr>
    <tr>
    <td>
    <p>
    <img src="SECOND PICTURE HERE" />
    <span style="font-weight:bold;">
    Second Parag
    </span><br />
    SECOND PARAGRAPH
    </p>
    </td>
    </tr>
    </table>
    Use that code for the rest of your about box for the paragraphs. And also, change these:

    HTML Code:
    <h1 style="font-family:Verdana;">My Profile Header HERE</h1>
    Change to whatever you desire.

    HTML Code:
    <img src="Your Picture URL HERE" />
    Change to the direct link of an image.

    HTML Code:
    <span style="font-weight:bold;">
    Welcome to my profile!
    </span><br />
    First Paragraph
    </p><br /><br />
    Replace Welcome to my profile! with your profile title and First Paragraph with your paragraph.

    HTML Code:
    <img src="SECOND PICTURE HERE" />
    Replace with your second direct link to an image.

    HTML Code:
    <span style="font-weight:bold;">
    Second Paragraph
    </span><br />
    SECOND PARAGRAPH
    </p>
    Replace Second Paragraph with your second paragraph title and SECOND PARAGRAPH with your paragraph.

    And now you're finally done!

    I hope you enjoyed this tutorial and learned a bit about customization!

    There's not really a limit on what you can change!

    Alex from http://xat.com/CustomizeUrPage
    Last edited by ArcticChibi; 01-03-2009 at 05:18 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •