How To Make Your Theme Transparent!

[Kaleb]

Live demo is down, sites much different now!

Admin CP > Themes > "Your Current Theme Here" > Global CSS >

Now lets do an example, for this one were going to make the quotes, transparent so were going to go to the "blockquote" in the list, then put this for the backround.

Code:

.transparent_class {      filter:alpha(opacity=50)

Then for the color make it something that would stand out against your theme.

Now for the body, and some other parts (im not fully done testing this) you will have to do the following.

Upload a file that you want your transparent backround to match, as you can see for mine i have a torn city. Try and make the picture sort of fit the size of the mybb board. Once you have found your image upload it to your image directory and add the following code under "Backround" on the body tab.

Code:

#000 url(images/"Yourbackroundfilehere")

Then for the color i recommend you put

Code:

#ffffff

Make sure you always backup the old text on your CSS in case this does not work with your theme. If this worked please let me know, if not reply and i will try to help you with issues.

Final demo - http://www.ultrarom.com/

[Damion]

You could just use rgba.

[Snoopy]

By doing this it puts the background image and the opacity thing makes that black box around the board.

Already knew it but nice though.

[Elite Dash]

Thanks for this amazing tutorial.

Your forum is looking fantastic too.

[elusiveDEVIANT]

You can use this, but there is also an easier way if you do not know much about css.

All you have to do is make images with a medium opacity and use thos images on the areas you want to make look transparent.

Both ways work fine ^_^

[euantor]

You can use this, but there is also an easier way if you do not know much about css.

All you have to do is make images with a medium opacity and use thos images on the areas you want to make look transparent.

Both ways work fine ^_^

Try that with IE6 and I'll think you'll get a problem without a little JS ;P For this method to be truly cross-browser,try adding this code to the headerinclude:

PHP Code:

<!--[if lte IE 6]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> 


Otherwise, the above method is by far the best.

[albatros]

Live demo, screens?

[88power88]

Live demo, screens?

He has added a live demo...


Btw nice work on the tut may use this =]

[Dubstep]

Shows only a background image, that's the only difference.

[88power88]

Didn't work for me any other ideas? :[