Tutorial

Be sure to backup your original profile_view.css for fast restore in the event that this doesn't work for you.

Partial Transparency will allow your members profile background color or profile background picture they uploaded to be visible between blocks and empty space at the bottom of their profile page.

Additionally this only will apply to your members profile page, and wont mess with any other pages on your site. Which is really cool.

 

Screen Shot Before:

Before


Screen Shot After:

After

For partial transparency I added this to the top of:
/templates/tmpl_uni/css/profile_view.css

(substitute your template directory for tmpl_uni...if you use a custom template. No promises if you have a custom template, but only takes a few minutes to try it.)

Right after:
@charset "iso-8859-1";
@import url(../../base/css/profile_view.css);

 

Add:


.main
{
position:relative;
width: 960px;
border: 2px solid #fff;
background-color: #fff;
background-image:url('../images/green_grid.gif'); <--this is my image update with your general.css-->
background:transparent;
margin-bottom:5px;
margin-top:4px;
margin-left:auto;
margin-right:auto;
/*padding:8px 10px;*/
}

This gives it a partial transparent effect. The normal block colors are still there. But background colors or images show around the blocks and at the bottom of the page. Only on a profile page. The rest of the site remains the same then. Basically you are just copying your .main block of code from general.css and pasting it into profile_view.css and setting the background code for it to transparent. Other blocks of code can also be pasted into profile_view.css from general.css for additional customization.

To add more transparency you could find code in:
/templates/tmpl_uni/css/general.css

Add the transparent code:
background:transparent;

And paste it into the top of /templates/tmpl_uni/css/profile_view.css

Such as:
.disignBoxFirst
{
position:relative;
border:1px solid #CCC;
margin-bottom:10px;
background-image:url('../images/head_cutting.gif');
background-repeat:repeat-x;
background-color:#fff;
}

Change to:
.disignBoxFirst
{
position:relative;
border:1px solid #CCC;
margin-bottom:10px;
background-image:url('../images/head_cutting.gif');
background-repeat:repeat-x;
background:transparent;
}

And paste it into profile_view.css

Which will give it even more transparency, you may have to alter the font color, but your member can do this in customize profile option if enabled. Which will allow them to change their own font color anyway.

Hope this works for you!!

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Recommend
Sponsored Links