REGISTER or LOGIN to have the annoying ads removed.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How To Make Your Theme Transparent!
#1
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/

#2
You could just use rgba.
[Image: jsnippetsbanner.jpg]
Latest Theme: CMS BB.
#3
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.
#4
Thanks for this amazing tutorial.

Your forum is looking fantastic too.
Smile
#5
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 ^_^
[Image: tyler-allen.png]
#6
(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.
#7
Live demo, screens?
#8
(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 =]
#9
Shows only a background image, that's the only difference.
#10
Didn't work for me any other ideas? :[


Possibly Related Threads...
Thread Author Replies Views Last Post
  Paying for theme edit... IceGuru 3 9,936 Sep 23, 2010, 09:16 PM
Last Post: IceGuru
  JERO - mybb 1.4x exclusive theme jeremiah 192 151,035 Sep 17, 2010, 03:17 PM
Last Post: jeremiah
  Custom Theme pl0x (20-50$) Musk 2 4,492 Sep 15, 2010, 04:13 AM
Last Post: Damion
Big Grin Darkness [Release] 1st Theme 88power88 6 8,441 Aug 28, 2010, 07:02 PM
Last Post: elusiveDEVIANT
  [request] Theme needed will pay $20-$35 upthevale 8 7,315 Aug 24, 2010, 12:56 AM
Last Post: YinYang

Forum Jump:


Users browsing this thread: 1 Guest(s)