1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

Controlling transparency / opacity in your Myspace layout

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 :

  1. Know what the code is!
  2. Know exactly what you want to make transparent
  3. Know how transparent you want to make it
  4. Remember to set code for both internet explorer and mozilla type browsers

1 - Know what the code is
float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;

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

float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;

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.

eg for your myspace tables

table table table {

float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;

}

3 - Know how transparent to make this

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.

Do not forget to assign the class to your element or this won’t work!

css code:

<style type=”text/css”>
.testtable {
float:left;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;

}
</style>

HTML CODE :

<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.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

How to install a digitalicing.com layout on your myspace page

The first thing that you need to do is pick the myspace layout that you like. You can find them by clicking here. www.digitalicing.com

Once you have picked a layout that you like, highlight the code.
Highlight Myspace 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

Edit your myspace 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.

Pasting layout code to myspace

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

Save changes to Myspace

Once you do this - you are done! It’s that easy! We hope you enjoy!


1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3 out of 5)
Loading ... Loading ...

Welcome to the Freelogomakers Category

This category will contain information on thefreelogomakers.com. Content here will be targeted towards the site allowing users to share all kinds of information.