Support

Support is part of Event Gallery Extended.

Please get a subscription if you need support. Feel free to use the ticket system or the contact form for reporting defects or pre-sale questions. Make sure you're logged in in order to be able to create a new ticket.

For general information you can also jump to the manual.

Subscribe now!

#1431 Where did my lightbox controls go?

Posted in ‘Event Gallery Extended’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by sbluege on Thursday, 26 March 2015 06:12 UTC

Sunday, 22 March 2015 03:28 UTC

antifm

I was at family house today and showed them the site being worked on.
www.cathyrosselli.com

The person at that house uses Internet Explorer and i thought THAT was the problem for me seeing what i am seeing.
Hut im back home now and i still see the same problem.

For some reason when you click on an image to view in Lightbox effect,
the lightbox controls are no longer showing. Instead there are some strange Purple squares?
I havent changed any settings to the template (period)
As a matter of fact the only thing i did was go to the clients registrar service and change
their DNS settings to my server.
but go here and open an image in lightbox
controls for LEFT + Right + the "X" to close the lightbox are showing as purple squares

http://www.cathyrosselli.com/portfolio/theme-sessions/event/CountryKids

Attachments

arrows.png

do i have to?
ok HI!!

Sunday, 22 March 2015 06:30 UTC

sbluege

If you're not responsible for this I guess somebody hacked your site and made all the buttons purple :)

Please have a look at the attached screenshot. Something in the HTML-Code of your site is responsible for it.

Monday, 23 March 2015 03:10 UTC

antifm

attached screen shot?
theres nothing attached here but what i left for you

also there was only ONE change that tool place with the server which might relate to the hard links or Relative URLS incase that has anything to do with it

The site was being built on my server as a TEST site, and therefore the root URL would have been something like
cathyrosselli.com.s33727.servername.com

but Saturday morning i went to the clients Godaddy account and had them alter the DNS settings and ZONE file so their domain now points to MY server where these files are.
As a result it would change the domain url from the above link to just be
cathyrosselli.com

i dont know if that has anything to do with it

now what about that screen shot?

do i have to?
ok HI!!

Monday, 23 March 2015 04:40 UTC

sbluege

Here comes the screenshot. It should contain all the information to solve this.

Attachments

22-03-_2015_07-25-50.png

Monday, 23 March 2015 15:15 UTC

antifm

i been tryin to solve this.
Out of curiosity do the ARROWS and the "X" have an image location?
Its possible the image url is broken and the background is the only part showing

THis background color has been the same the whole since i installed this template
which LATER i unstalled event gallery in the TEST server it these controls were showing up fine.
It was only AFTER the DNS changes that the controls appear this way.

If i knew the image paths for the control items i can probably trace down the issue.

Even if i go to a WHITE or BLUE background color, the controls dont appear correctly.
Also in the template setting if i change this from the fuchsia color, that same change will appear on other parts of the site

do i have to?
ok HI!!

Monday, 23 March 2015 16:40 UTC

sbluege

The CSS style says "background: #123456 !important" (see screenshot). Just remove the '!important' here. The icons in the lightbox are CSS background images which are reset by this style.

Tuesday, 24 March 2015 14:56 UTC

antifm

im in touch with the template company (Shape5) about this
I cant seem to find where this css call is from

do i have to?
ok HI!!

Tuesday, 24 March 2015 16:42 UTC

sbluege

Please attach my screenshot. They should be able to provide this answer immediately.

Wednesday, 25 March 2015 15:10 UTC

antifm

This is why i was saying earlier that im sure its not the template causing the issue.
The template developer is correct in that the Component "Event Gallery" Should be using its own CSS for the output.

Here is their reply
---------------------------------------------

Hello,

If you want to remove the !important call you need to modify the template's index.php file, and that code is found towards the top of the file in the css section. I would not recommend modifying this though, the extension you are using should be using its own class names and css. The css in the index.php is for styling basic components of the site that are used in multiple areas.

"Firstly on what template file can i find the image paths to the ARROWS and the "X""

If you're referring to the arrows and X of your popups you would need to contact the extensions developer about this. The template doesn't control the output of third party extension, that's completely controlled by this extension. We cannot debug a third party extension.

do i have to?
ok HI!!

Wednesday, 25 March 2015 15:28 UTC

sbluege

I'm a very little upset. This answer is the most ***** I heard. If somebody uses '!important' he overrides ALL other styles. How the hell should other component apply their styles without using the stupid '!important' as well?

Seems like you fixed one place. You need do the same for the hover state:

.readon:hover, .button:hover, button:hover, .btn-primary:hover, .s5_ps_highlight:hover, .module_round_box-highlight_full .s5_mod_h3_outer {
  background: #000 !important;
}

Thursday, 26 March 2015 03:43 UTC

antifm

i didnt really "Fix" it
I simply went into the template settings in the admin area and turned OFF that style setting.
Its the setting that effects any Buttons and other elements of the template to give it that background color.

There is apparently some kind of conflict between ur script and their template.
Honestly im not saying its the fault of either one of you but all ill end up doing is hearing
You: Please make this change to the code so this will work properly

Them: Why would you change that? The developer should have created the component to work "X" way

ok so, thats just not going to go on lol i wont let it.
Ok so lets move on. I might have an idea of proper display for the front of the website.
Its not ideal but in the end it will work. Just not as automated as im looking for it to be and your component will be the helping hand so PLUS 1 for that !

Im tired.
im looking at the code you placed
I have no idea what you need me to do there. Am i to remove the IMPORTANT again?
Because im sure that if i do, ill also remove any HOVER effects needed for other things in the template

do i have to?
ok HI!!

Thursday, 26 March 2015 04:07 UTC

antifm

BWAHAHAHA!! Too funny
No sooner do i go back to the website and i want to log into it while thinking about the HOVER issue
and i notice the attached image issue hahahah

You'll notice the button where its supposed to say LOGIN is all white until i hover.

Attachments

wow.png

do i have to?
ok HI!!

Thursday, 26 March 2015 04:16 UTC

antifm

sweet Jesus! i have been trying to remember since last night a question i wanted to ask related to this.
I was actually in the middle of typing it yesterday and when i got to it, i completely went BRAIN FART
and forgot it. I had to delete my reply and roll over and die! lol

ok so im sure you know what "z-index" refers to?
If not then lets say in the case of using a LightBox effect, there is a z-index
that needs to be called.
In which it tells the browser
X in the browser will show up, layerd over Z

For example, if you go to my clients home page http://www.cathyrosselli.com/
In the main menu if you scroll over the word "Portfolio" obviously the main menu drops down like s shade.
It over lays the content of the page instead of going BEHIND it.
Lets called this "Menu z-index = 1"
meanwhile "content z-index = 0"
also "Lightbox z-index = 3"

Get it?
So im wondering if the problem with using Event Gallery and this template is a z-index issue because all the elements are there but end up hidden. I think they are just laying out in the wrong order to be honest.

The reason i say this is because that background color "purple" was showing up ABOVE the control arrows as if i was already hovering over them but in the template settings,
"PURPLE"
is a color effect that ONLY is supposed to show up WHEN something is hovered over, not BEFORE.

do i have to?
ok HI!!

Thursday, 26 March 2015 06:12 UTC

sbluege

I don't wont to waste more time on this. I'm afraid you simply can't fix the invalid usage of !important in your template yourself. Please add the CSS snippet below to your templates custom css file. It'll override the templates settings for the lightbox buttons and restore the color and the icons. The next Event Gallery update will break it. So please be warned.

#eventgallery_cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff !important;}
#eventgallery_cboxPrevious{position:absolute; top:50%; left:0; margin-top:-32px; background:url(/media/com_eventgallery/frontend/images/controls.png) no-repeat top left !important; width:28px; height:65px; text-indent:-9999px; direction:ltr;}
#eventgallery_cboxPrevious:hover{background-position:bottom left !important;}
#eventgallery_cboxNext{position:absolute; top:50%; right:0; margin-top:-32px; background:url(/media/com_eventgallery/frontend/images/controls.png) no-repeat top right !important; width:28px; height:65px; text-indent:-9999px; direction:ltr;}
#eventgallery_cboxNext:hover{background-position:bottom right !important;}
#eventgallery_cboxClose{position:absolute; top:0; right:0; display:block; background:url(/media/com_eventgallery/frontend/images/controls.png) no-repeat top center !important; width:38px; height:19px; text-indent:-9999px; direction:ltr;}
#eventgallery_cboxClose:hover{background-position:bottom center !important;}