On-mouseover Pop-up (overLIB) issues

[easyphpfan]

I have been scrambling to get these issues solved.

1) Changing color of date header bar at top
2) Shadow
3) Transparency/opacity

1) In the On-mouseover Pop-up (overLIB) (the hovering one) as mentioned in www.epctutorials.com the .popupdateTable is the top header bar. It stays the default blue even though I changed the background colors. You will see what I am talking about on www.firstdeafbaptistchurch.org. How can I change the blue date header bar at the top?

2) I checked the overlib website and there is an official plugin for shadow, and I would very much like to incoporate that. That would give a 3-D look to the On-mouseover Pop-up (overLIB). Can you instruct where and how I can put that feature in? Thanks in advance.

3) How can I make the On-mouseover Pop-up (overLIB) background transparent, semi-transparent, and/or percent opacity so that people can still kinda see through the On-mouseover Pop-up (overLIB). I checked the overlib website and there is semi-transparency feature for background, and also since the shadow could have opacity, I would believe the overlib can be transparent too.

These would definitely rock my world.

[ve9gra]

I don't know about 2 and 3, but the answer for #1 is

Change the background-color for both .popupDate and .popupClose

[Brian]

2 & 3) The code where the overLIB is inserted is editable in the calendar/calendar.php file. You may be able to modify this to add these options.

[easyphpfan]

Guys, I have tried different ways to add or modify variables for shadow and shadowopacity, as well as adding the source to overlib_shadow.js. I created a javascript file named overlib_shadow.js. Since your calendar.php and overlib.js are written differently than what we usually see elsewhere, and since you guys know your code the best, I don't think I can find better answer than from you.

The features from overLIB can really help enhance the visual appeal of your calendar product, and it would be nice if you could provide me a clear instruction on how to add a variable for overLIB, to where, and if any additional files needs to be created. Then I can do same for other variables available out there. Nothing seems to be working here for me, so it would be nice if you guys could help me out.


Thanks in advance.

[ve9gra]

1 - If you've made any changes to the overlib files or calendar.php undo them now.

2 - From the overlib package, copy over overlib_shadow.js in the /calendar/overLIB folder.

3 - Open /calendar/calendar.php and find the section that says "// INCLUDE OVERLIB ROUTINE". You'll find a bunch of "if (..." lines (about 12 of 'em, lines 81 to 92). Below the last one (before the line with ol_vauto), add the following:

  echo "  var ol_shadow=1;\n";

4 - Now before the "// DISPLAY EVENT LIST", you'll find one last IF statement. Before that IF, add the following line:

  echo "<script src=\"".$urlPath."overLIB/overlib_shadow.js\"></script>";

If you're not satisfied with the default shadow, you can add more of the variables to modify the output. You can find the variables that are available here. What you want are the ol_variablename. Repeat step 3 with any variable you want to add.

This procedure can be used to install other plugins too. Just change the variables and the JS file to match the plugin you want to install.

[easyphpfan]

It worked. Thanks!

*** For rookies, you may want to know that when I manually installed Easyphpcalendar on our server, in the theme folder, a new folder was created "Default" folder on the server. On the local machine, in the theme folder, there is no "Default" folder (but in Categories folder - there is one, not the same one I am talking about). So I had to get the "Default" from the server folder onto my local machine.

For a while, I was wondering why the system estyle.css and categories default estyle.css weren't changing anything that I see on the website, so now finally I found the right folder that was only on the server. It was strange that I did not have that Default folder on my local machine when I copied the whole calendar package onto the server from my local machine. You may have to copy the Default folder in theme folder onto your local machine.

Hope this makes sense. Maybe this is not the case for some of you.

Okay, back to you guys, on my Onmouseover overLIB, if you can see it (I put the link to my website above) there is some kind of cellspacing or border (2 px) in the same color gray as the background, and I do not want that. I want the event time and description to fill up the overLIB and touch the black border.

And where can I remove the cellspacing between each event on the overLIB? There seems to be about 10px space between each event.

I know... it should be really easy to find these, and I thought I did when I saw 2 px for padx and pady I changed these to "0" but ... to no avail.

Sorry about this annoying tidbit. I am kinda pericular about how things look. Thanks in advance. You have been helpful!

[ve9gra]

For what you have in italics, that is something that was done by you. There is no "Default" folder inside of "Categories". So it was moved (probably by accident) but it was correctly placed originally.

I don't have time to look deeper into the 2px border right now (dinner ready and the wife is after me :P) but I think the solution is in esstyle.css.

The 10px space has nothing to do with CSS or spacing... it's actually a hard coded <br> so it can't be changed.

I'll be back later.

[easyphpfan]

Why didn't I think of the possibility that I accidentally moved the Default folder in the Categories folder? That must have happened. Thanks for pointing it out

I found the solution for the cell spacing problem for the Onmouseover OverLIB. It is actually the cell padding of it. The solution is in overlib_mini.js file and made the var ol_cellpad=0; this is on line 21.

[ve9gra]

Perfect. Good to know. I had looked all over in the CSS and hadn't found anything.