Woocommerce lightbox & catalog images

Tagged: , , ,

Author Posts

CannonBeach September 3, 2013 at 7:01 pm

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

I have two current ‘challenges’ with microthemer and woocommerce products

1) Clicking on the image here: http://northcoastcomputers.com/product/makerbot-replicator-3d-printer/ brings up a lighbox with background screen overlay. Targeting the screen overlay (NOT the lightbox itself) with microthemer brings up whichever element lies underneath the overlay – i.e. my microthemer ignores the z-index: 9999 of the screen overlay and targets the body, header, content elements – whatever – that are of a lesser z-index on the page.

2) (no example right now because) If I have woocommerce product catalog images and need to target them for sizing then my microthemer ignores the ‘product catalog image’ per se and double clicking it – to style – brings up the darn lightbox instead!!

Welcome to my digital life!

CannonBeach September 4, 2013 at 6:17 pm

Nick offered that a solution was to temporarily turn off the woocommerce lighbox feature. and thank you for that.

Instead of heeding sage advice, I just spent all day wrapping my head around the prettyPhoto and woocommerce css files. Silly me! However, my desired result was realized.

I believe the challenge with microthemer (and lightbox overlays) is still ‘on the table’.

Sebastian September 4, 2013 at 8:06 pm

Hey,

Sorry for delayed response. I read your post last night and then forgot about it. Apologies!

1. I think I understand what you mean. You would like to style content inside a lightbox right? Could the directional controls on the Selector Wizard come in handy with this one?
I see that in terms of where the lightbox content appears on the HTML page, it is immediately after the footer. So could you double-click the footer to bring up the selector wizard, then click an image to load the lightbox, then click the > directional control to navigate highlighting onto the lightbox, You can home in on any element using the controls (child, parent, previous sibling, next sibling).

2. You could use a slight variation of the technique described above where you double click the parent element of the catalogue images and then navigate onto the individual images using the directional controls on the Selector Wizard.

Am I understanding things correctly here?

Cheers,

Sebastian

CannonBeach September 4, 2013 at 9:35 pm

Email can be so inefficient for technical conversations. Mea Culpa. Let me attempt a more precise explanation.
Re: You would like to style content inside a lightbox right?
No. Styling content inside a lightbox is easy enough with Microthemer – and works.

My 1st point above attempts to target the screen overlay behind (what i think of as) a lightbox – but on top of the webpage itself.
i.e. lightbox has z-index of 9999, Screen overlay has z-index of 999 and webpage has z-index of 99. This was where I could not target the screen overlay to change color & transparency

My 2nd point above addresses images that are class=”lightbox”
Sooooo… when I double clicked these images (from within Microthemer) to resize – the image came up in the lightbox – rather than microthemer’s new-style dialog.
Does that help? Am I making sense?

And, to your response, I am not yet an expert in the directional arrows (I can never find what I’m looking for!). Thank you for the direction….I will use more often.

Thanks S. no pressure on the response. Relax, unpack and cocktail 🙂

Sebastian September 5, 2013 at 3:18 pm

Ah so you’re trying to target the div with the class “.pp_overlay” that is grey (#555555) and 90% opacity.

If you can successfully target that element (and I think it should be possible to do so using the selector wizard controls as suggested above – easier when you’re looking at the HTML with firebug), you will be able to change the colour from grey to whatever with Microthemer, but I don’t think you’ll be able to adjust the opacity. You can override the grey colour with Microthemer because the colour is defined in a stylesheet. But the opacity of the overlay is rendered as an inline CSS style and is most likely set in the lightbox overlay’s Javascript file (inline CSS styles can’t be overridden by Microthemer’s external stylesheet CSS rules – it’s a rule of CSS specificity).

In regards to your second point, I think the selector wizard controls are your only work around. The controls should allow you to target the images by clicking something near them and then navigating onto them – so you don’t have to double-click them directly, which triggers the lightbox overlay.

If I’m still not fully getting it I’ll probably need to log into your site and see how things play out myself – which I’m happy to do!

Cheers,

Sebastian

CannonBeach September 5, 2013 at 6:34 pm

@Sebastian
Re: easier when you’re looking at the HTML with firebug

Agreed (most of the time)

Re: is most likely set in the lightbox overlay’s Javascript file

Ah. Yet another file for me to practice my editing skills on. Thanks for the pointer!

Re: In regards to your second point, I think the selector wizard controls are your only work around.

I used Firebug and spent all day in the woocommerce.css file. I’m an expert now :). No doubt your suggestion works equally as well & thanks for the ‘clicking nearby’ tip. Again, due to my past failures with the controls I am a little ‘shy’ about going there frequently!

Re: If I’m still not fully getting it

You are now fully getting ‘it’. Thank you Sebastian.

Sebastian September 6, 2013 at 12:15 pm

Great. Good luck with everything!

You must login or register to reply to this topic.