Announcement

Collapse
No announcement yet.

XatSpace - Adding Customized Paragraphs

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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]<img src="http://mathworld.wolfram.com/images/gifs/smstdo-o.jpg">
    TEST PARAGRAPH [/HTML]

    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]<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>[/HTML]

    Here are some explanations for the code in my style.

    [HTML].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; }[/HTML]
    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]#about {opacity:1;}[/HTML]
    This makes the about box fully visible. If you want to make it transparent, change 1 to a lower decimal. (ex: 0.5)

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

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

    [HTML]#header { opacity:0.5; }[/HTML] 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]<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>[/HTML]

    Use that code for the rest of your about box for the paragraphs. And also, change these:

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

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

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

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

    [HTML]<span style="font-weight:bold;">
    Second Paragraph
    </span><br />
    SECOND PARAGRAPH
    </p>
    [/HTML]

    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; Jan 3rd, 2009, 05:18 AM.
Working...
X