Transparent Backgrounds

[dsantana]

I am using RC3, Shortie's Ultimate Playroom and Simple Portal.
Shortie has fixed me up with a background of my own behind the forum but, I want to make the forum somewhat transparent to be able to see that image through the posts.
If you go to www.vintagejetboats.com and look at the way you can see my background image then you will see what I want it to do in the www.vintagejetboats.com/forum area as well.

Thanks...

[MrPhil]

You could try changing every solid color background in SMF (.css files) to a tiled image (.gif or .png with a transparency channel, although PNG files won't work right on IE6 browser). You could take every tiled gradient image background and edit it (and convert to .gif or .png if it's .jpg) to add transparency.

[Nola5712]

i'm having a similar problem.  i'm using smf 1.1.11 and simple portal.  the theme i'm using is Siyah inci.  i have a custom background .gif i made in photoshop and my simple portal blocks are black.  i really like the background i created in photoshop and others have said the same so what i would like to do is make the simpleportal blocks (user info, recent topics, who's online, etc, etc) transparent so that the background shows through slightly.

here is the site:  www.LineOfScrimmage.org

i ran into this using ultimate profile on another smf 1.1.11 site and found out eventually how to do it using the bolded code below:

/* Section Box Controls */
/* ================== */

/* Color controls for the bar accross the top of */
/* the Main Section Boxes */
/* if you have your own bars you'd like to use, type */
/* it's URL in the ( ) or if you want */
/* a solid color, add it's hexadecimal code just */
/* after the ( ) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
   background: url() repeat-x bottom left black;
filter:alpha(opacity=50); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: white
}


i don't see why this wouldn't work for the simpleportal blocks, but i have no idea where in the css.index(or whatever it's called) file it should go. 

if anyone out there has some advice for me...other coding that would work, where to put said codes, how to MAKE THIS WORK lol, please enlighten me with your knowledge

[Hj Ahmad Rasyid Hj Ismail]

To make a simple portal block is easy. On the bottom of each block there is a column for block title background on the right and block body background on the left. To make it transparent, you can create a transparent background for block title and body background and use it there.

Personally, if I body background, I just tick the button for background, and it wont show i.e. become transparent in total.

However, make sure, (which I am sure you know how) you have a font color that is suitable and fix your .css file for your forum with it.

About the forum background, it is the same, you either create a transparent .png file for all the images/theme images, and upload it on your site or don't use any. With photoshop you can easily deleted the part that you don't want, so it would be transparent.

All the best.

[Nola5712]

thanks for the response, but how would i make a transparent image for the title or the background?  you mean do that in photoshop?

[Hj Ahmad Rasyid Hj Ismail]

Yes, do that in photoshop or gimp.

[Nola5712]

alright i'm definitely new at this, but say i created said transparent images (background and title) for the simpleportal blocks, in photoshop.  after that would i just rename them to "catbg.gif" and "windowbg.gif" and replace the originals in the themes/images folder?

[Hj Ahmad Rasyid Hj Ismail]

Good luck. Googgle is your friends. Just google for "how to create transparent image".

Here are some links for your further readings, if you need one:
http://www.boutell.com/newfaq/creating/transparent.html
http://www.mediacollege.com/adobe/photoshop/transparent/background.html
http://www.mediacollege.com/adobe/photoshop/transparent/background.html
http://www.computerhope.com/issues/ch000979.htm
http://www.photoshopforce.com/tutorials/create-transparent-images/index.php

[BoxOfQuestions]

Changing this in 2.0.9 is an absolute nightmare, but I certainly hope this helps:

Go into your index.css file.

Code Select Expand

/public_html/Themes/YOUR THEME/css/index.css
And find your background image which you will need to ensure has transparency coding after it like so:

Code Select Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #FFFFFF url(https://www.yourimagehere.com/img/image.jpg) no-repeat fixed;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
        zoom: 1; /* gives the object layout */
  -     ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
}
  Just make sure that the background color is white or black (best for transparency tinting) and that you insert your own image for the background.  Next, make sure that when you add the transparency coding after padding:15px you change the opacity to your liking.  I find 70 to be very agreeable.

After that, you will need to ensure that the following sections are changed:

#content_section

It should have this code in it:

Code Select Expand

{
        background-color: white;
        padding-left: 20px;
}

Make sure the #content_section has absolutely no background images in it and ensure that the background color is white or whatever tint you want your background to bleed through as.

#main_content_section

Code Select Expand

{
        background-color: white;
}


Make sure the #main_content_section has absolutely no background images in it and ensure that the background color is white or whatever tint you want your background to bleed through as.

#content_section div.frame

Code Select Expand

{
background-color: white;
display: block;
padding: 0 20px 0 0;
}

Make sure the #content_section div.frame has absolutely no background images in it and ensure that the background color is white or whatever tint you want your background to bleed through as.

div.cat_bar

Code Select Expand

{
background: #EB799F; /*<---- I chose pink, but you can put whatever tint you want.*/
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}

Ensure that .catbg section matches:

Code Select Expand

/* The half-round header bars for some tables. */
.table_grid tr.catbg, .table_grid tr.titlebg
{
font-size: 0.95em;
border-bottom: 1px solid #fff;
}

Make sure this code matches for your .windowbg section (you'll be removing code).

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{

}
.windowbg2
{
   }

Notice how .windowbg and .windowbg2 are empty - make sure you leave those brackets, though!

That should be all of them.  Good luck!  Oh, and the bad news - you'll have to do this for every different theme you've installed on your forum.  BUT - when you know where to go, it makes things a lot easier.   

[Sir Osis of Liver]

Um, look at the post dates, mope.

[BoxOfQuestions]

I know it's old, but when I Googled this, there were no straight answers, so I just posted it for Google Searchers because this is the post that shows up despite it practically being archived.