Misskitty's clips tagged code : clipclip

DigitalIcing.com - Controlling transparency on a layout with CSS

http://digitalicing.com/Myspace%20Help%20Tips/m...

clipped by misskitty May 15, 2007

code control css design development how-to HTML lesson page sheet style tips tutorial web

Notes by misskitty: This is a nifty tutorial that shows you how to make things partially transparent on a web page. It does work for myspace too..

Show Clip

eed help understanding how transparency is done?

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

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.

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!

This is the text in this table

This is at 50 % opacity

css code:

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.

DigitalIcing.com - Help - How to customize myspace tables

http://digitalicing.com/Myspace%20Help%20Tips/C...

clipped by misskitty May 04, 2007

code css layout myspace table

myspace

Notes by misskitty: This is a solid tutorial on how to configure tables in your myspace page.

Show Clip

eed Help changing tables?

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.

Setting a table background and border

</style>

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.

Setting a table background image and borders

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.