MyBB Central

Full Version: How To Make Your Theme Transparent!
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
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/
You could just use rgba.
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.
Thanks for this amazing tutorial.

Your forum is looking fantastic too.
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 ^_^
(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.
Live demo, screens?
(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 =]
Shows only a background image, that's the only difference.
Didn't work for me any other ideas? :[
Pages: 1 2