INTERACT FORUM

More => Old Versions => JRiver Media Center 18 for Windows => Topic started by: MANswers on August 10, 2013, 01:22:52 am

Title: Transparent background for webgizmo.
Post by: MANswers on August 10, 2013, 01:22:52 am
Hi all,

I am using Webgizmo on an iPad 2.
Love the ease of webzimo. Is there any way to remove the background all togather.. make it transparent.
I tried to edit the default.css file and removed the background: #262626; line all togather, instead it made the background white.
I have embedded webgizmo to irule, and irule has its own background, hence want to remove the dark grey background, so that the webgizmo's icon blend with the ipad's backgroun in irule.
Title: Re: Transparent background for webgizmo.
Post by: WinoOutWest on August 10, 2013, 09:02:21 am
+1

I would like to do this as well.  I am embedding Gizmo in iRule and this would be great to do.
Title: Re: Transparent background for webgizmo.
Post by: MANswers on August 10, 2013, 01:19:57 pm
Been trying really hard, looked up all css related guides tips and tutorials online to see if a blank gif can be inserted instead of the background color, the problem is it defaults out to white, and when using transparent RBGa value opacity it starts making the white background dark or light, but does not actually show the transparent background itself.

Any help guys.. need a little rallying here.
Title: Re: Transparent background for webgizmo.
Post by: MANswers on August 10, 2013, 03:31:29 pm
I did it!!! I am gonna post back in an hour the steps on how to get a transparent background for the webgizmo.
Title: Re: Transparent background for webgizmo.
Post by: WinoOutWest on August 10, 2013, 04:01:14 pm
Nice work.  I, for one, will appreciate if you post your process.
Cheers!
Darren
Title: Re: Transparent background for webgizmo.
Post by: MANswers on August 10, 2013, 04:23:19 pm
For I will post.. in few hrs for sure, just making few adjustments... making some more mods for the default icons.
Are you on AVS irule thread? I am on there by the alias holyindian :)
Title: Re: Transparent background for webgizmo.
Post by: MANswers on August 11, 2013, 12:40:34 am
Here are a few screenshots of my iRule setup which is still under heavy construction... a lot will be changed soon.

The main page
(http://i.imgbox.com/acuhyag0.jpg)

A preface of the internal workings of just one of my components

(http://i.imgbox.com/adhqKHxx.jpg)

Here is the webgizmo page.. i havent got the time today (due to wife's shopping) to change and tweak stuff on this page, but i plan to modify the top bar and the transport media icons as well.

(http://i.imgbox.com/acuHSSqa.jpg)

So, here is what i did.

Locate the file default.css and look for these and change the one marked in red.

body, input
{
   font-size: 16px;
   font-family: Tahoma, Geneva, sans-serif;
   font-weight: normal;
   background: #333333;   
        color: #BBBBBB;
}


body, input
{
   font-size: 16px;
   font-family: Tahoma, Geneva, sans-serif;
   font-weight: normal;
   background-image:url('images/back.jpg');
   color: #BBBBBB;
}

You can see above that i have added a jpg file in the images folder.. that image is nothing but the irule's background wallpaper.

Here is what you can do to make sure the overlay wallpaper looks in sync.
1. Take a screenshot of your webgizmo page in the ipad and open it in photoshop.
2. Create a new layer and add the original irule's background, make it 50% opaque and corp out around the edges of the webgizmo's layout. save the corpped image and copy this image to the images folder of your webgizmo.

If you need help in the above steps, pm me your screenshots and the wallpaper and i will make it for you.