MyBB Central
How To Make Your Theme Transparent! - Printable Version

+- MyBB Central (http://www.mybbcentral.com)
+-- Forum: Archives (http://www.mybbcentral.com/forum-33.html)
+--- Forum: Mybb 1.4x Series Topics (http://www.mybbcentral.com/forum-26.html)
+---- Forum: Mybb 1.4x Theme and Template Releases (http://www.mybbcentral.com/forum-5.html)
+---- Thread: How To Make Your Theme Transparent! (/thread-5372.html)

Pages: 1 2


How To Make Your Theme Transparent! - Kaleb - Jul 19, 2010

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/


RE: How To Make Your Theme Transparent! - Damion - Jul 19, 2010

You could just use rgba.


RE: How To Make Your Theme Transparent! - Snoopy - Jul 19, 2010

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.


RE: How To Make Your Theme Transparent! - Elite Dash - Jul 20, 2010

Thanks for this amazing tutorial.

Your forum is looking fantastic too.


RE: How To Make Your Theme Transparent! - elusiveDEVIANT - Jul 20, 2010

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 ^_^


RE: How To Make Your Theme Transparent! - euantor - Jul 22, 2010

(Jul 20, 2010, 05:41 PM)Exino Wrote: 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=0i<document.images.lengthi++)
      {
         var 
img document.images[i]
         var 
imgName img.src.toUpperCase()
         if (
imgName.substring(imgName.length-3imgName.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.hrefimgStyle "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.


RE: How To Make Your Theme Transparent! - albatros - Jul 23, 2010

Live demo, screens?


RE: How To Make Your Theme Transparent! - 88power88 - Jul 24, 2010

(Jul 23, 2010, 01:20 PM)albatros Wrote: Live demo, screens?

He has added a live demo...


Btw nice work on the tut may use this =]


RE: How To Make Your Theme Transparent! - Dubstep - Jul 29, 2010

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


RE: How To Make Your Theme Transparent! - 88power88 - Aug 28, 2010

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