This lesson assumes that you already have a CSS layout for your
myspace page and need to change the transparency of a section. This
lesson also assumes that you have at least introductory experience
with Cascading Style Sheets
Transparency is a popular way to decorate a page, both in
myspace and with other popular services. It is fairly easy to do as
long as you keep a few details in mind :
Know what the code is!
Know exactly what you want to make transparent
Know how transparent you want to make it
Remember to set code for both
internet explorer and mozilla type browsers
1 - Know what the code is
There are 4 lines to this. The first is the placement. You have
to set a placement for this transparency / opacity change to
work.
We used float:left; This works for IE and Mozilla / Firefox.
Because you want your code to work on multiple browsers - use
all 3 versions of this code
You can tweak those numbers to get different effects. Just note
that opacity =100 means it's opaque.
2 - Knowing what to make transparent
This code goes within the { } for your CSS definition. You most
likely won't want to make your entire layout transparent - although
there are some cases where this might be appealing. For example
:
To make a specific table content transparent place your code
within the CSS definition for those tables.
This is entirely subjective. You simply need to tinker with the
numbers to figure out how transparent to make it. Just remember
that # opacity = 100 - opacity transparency. Therefore 30 % opacity
= 70 % transparent
4 - Remember to set code for both internet explorer and
mozilla type browsers
The code listed above covers both IE and Mozilla Firefox. It is
somewhat redundant but it is worth keeping.
Here's an example of a table which has been set to be at 50 %
opacity. Do not forget to assign the class to your element
or this won't work!
<table width="50%" border="0" class="testtable">
<tr>
<td><strong>This is the text in this table
</strong></td>
</tr>
<tr>
<td><img src="/images/scrollingimage.jpg" width="466"
height="206"></td>
</tr>
<tr>
<td>This is at 50 % opacity </td>
</tr>
</table>
We hope you will find this useful. This is another example of
how versatile CSS can be for designing your page layouts.
So you are ready to start changing your myspace layout.
This article covers how to change the table background on your
myspace page.
Changes to your tables, text colors, links, etc are all done
with css. They can be done with div tags but you should consider
the CSS option much easier. The first thing to do is to consider
what color you want the tables to be and if you want to have a
border on them.
Below is the CSS code for making these changes. It will be
broken into several sections. First you will see the code and then
the explanation for how to manipulate the code as well as an
explanation of what the code does.
This code has been broken down into sections to explain what
they do :
Red portion - This section of the
CSS defines which tables wil be edited. It is set up to include
nested tables. So for example, table table means a table inside of
a table. Table table table means a table inside of a table that's
inside of a table. Confusing huh! You probably won't want to change
this section.
Blue portion - This section defines
the style of the border that your tables will have. There are many
options for these border styles. You can play with them to
determine which looks best for you.
none
This means that there's no border
hidden
The same as "none", . However if you are having a border issue
with a table it may cause issues.
dotted
This makes your border appear as a dotted line
dashed
This makes your border appear as a dashed line
solid
This makes your border solid
double
This makes your border appear as a double border. The border
width section(in green above) defines the border width for
this.
groove
This makes your border have a 3D grooved effect. Color is
controlled by the border color section (in brown above) .
ridge
This makes your border have a ridged effect. Color is
controlled by the border color section (in brown above) .
inset
This gives you a 3D inset border. Color is controlled by the
border color section (in brown above) .
outset
This gives you a 3D outset border. Color is controlled by the
border color section (in brown above) .
Green portion - This section
defines how wide the borders will be. Remember that thinner borders
may give a more clean effect while wider border can look more
clunky. Either is fine, but you will wat to consider your page
layout before you make this decision.
Purple portion - Now that you've
set up your borders, it's time to set the color. This section
simply defines the color of the border. You have to use a HTML Hex
color code. You don't need the # in front of the color. For example
: FF0000 . Here is a HTML color picker for you . Just click on the
little palette to load it.
Brown portion - Finally you can set
up the background color of your table. This one pretty much works
just like the border color section. Use a HTML Hex color code and
you are good to go.
Don't forget that this code has to go in the top of your about
me section of your myspace page. Click
here if you need an example of where that is.
You will notice that this code is very similar to the code
above. However we've replaced the section in brown which set the
color with 3 new sections. These sections give the code the
information it needs to set the background of your tables to be an
image. Please note that if you use this code - all of the tables
will use that background. If you choose a good background it will
look really cool. If not - it can look a bit chaotic.
Pink section - This is the code
that tells the page what image to stick inside of your tables. This
image is a background image so your text will appear above the
image. Use a full URL including "http://" .
Black Section - This section tells
you how to place the background image in the table. You have 2
options with this :
Scroll - This makes the background image move if someone
scrolls on the page.
Fixed - This makes the background image stay in
one place and it makes the text scroll on the page. This is great
for when you have a nice picture you don't want to move.
Teal Section - This is the last
section you need. It determines the alignment of your image. Where
it says top left determines how it is placed. The first ( top ) can
be either bottom, center or top. That aligns it vertically. The
second ( left ) can be either left, center or right. That aligns it
vertically.
This is all you need to set the background for your main tables.
Remember, this code edits the tables only - not your main page
background.
Below is a screenshot showing what areas this code will edit.
The yellow arrows indicate the changed areas.
This concludes this lesson on editing table
backgrounds.
The first thing that you need to do is pick the myspace layout
that you like. You can find them by clicking here.
Once you have picked a layout that you like, highlight the
code.
Once you have highlighted the code,copy ( pressing ctrl + C )
the code to your clipboard.
Now that you have copied the HTML that you need, log into your
Myspace.com account. You will want to Edit your
profile
After you click on the option to edit your profile, go to the
"About Me" section. You need to paste the code in the very
top of this section. Do not place any text before this
code. Any text in your about me area that you would like to add
should be added after the HTML code. To paste the
code - either right click and choose paste or press ctrl+V to paste
the text.
You are almost done! Scroll to the very bottom of your page. You
will see an option to
save all changes. Click on Save all changes
Once you do this - you are done! It's that easy! We hope you
enjoy!