Clearbox3 Integration not positioning (CSS Question) WordPress
- SOLVED
Ok, not strictly a WP question, but this site is hosted on a WP platform. I'm using [[LINK href="http://www.clearbox.hu/index_en.html"]]Clearbox3[[/LINK]] as my chosen lighbox.
This can be seen in action at this link. Simply click on the View Gallery link on center of the main photo.
http://www.oaksrealestate.com.au/128-charlotte-street-105422908/
The issue I am having is the positioning of the lightbox window. There must be a conflict with some of my CSS.
In FF, the window drops down to 50% position from the top of the full screen. Same in Chrome, IE7 ( I think & in IE8).
The lightbox should obviously sit at 50% of the visible screen.
Hopefully someone can help me find the conflict and fix.
*** UPDATE ***
Ahhhhhh, I have worked it out. The issue is with the [[LINK href="http://translate.google.com/translate_tools?hl=en&layout=1&eotf=1&sl=en&tl=fr"]]Google Translate widget[[/LINK]]. With that running on the same page it for some reason messes up the position of the lightbox. I have disabled the Google Translate dropdown and now the clearbox lightbox works perfectly.
If anyone can find a solution so I can use both, I will gladly award them the prize.
Answers (3)
Eddie Moya answers:
I did not get to see how you implemented to translator widget. However, using firebug I plugged the code for the widget into the sidebar. Your gallery seems to work fine with the default code. If you can post the code you had (including css, if any has been removed) then I could see why yours was not working.
All i did was drop the following into the sidebar, as the first element of that sidebar.
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I moved it to a couple different places to see if it has any effect. I did not see any problems. Try this code in your sidebar... it should work without a hitch.
Matt Heyes comments:
This is the Google translator widget code which I added to my footer code that caused the conflict.
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Eddie Moya comments:
OK, so it took a while.
The problem is that it appears the inclusion of the translator widget changes your body's inline style "position:static;" to "position:relative;". It does this because the translator has a toolbar, and it wants to push your body down beneath it so that it doesn't overlap any part of your page. As a counter-measure, place this in your style.css
body {
position:static;
margin-top: 40px;
}
#CB_Window tbody {
margin-top:40px;
position:absolute;
}
If the static keeps being changed, change it to "position:static !important;", but I dont think that should be a problem.
Matt Heyes comments:
Love your work Eddie!
Rashad Aliyev answers:
Hello,
Dear friend I analyzed your Clearbox.
Cay you tell me do you use there are default theme? (for Clearbox).
Rashad Aliyev comments:
If it's default then open this directory (P.S: I sent this directory link via Personal Message.)
However every theme has got the similar css name. Edit <strong>cb_style.css</strong> which path sent via P.M. for secure reasons.
Find this code there.
#CB_Window {
left:50%;
position:absolute;
<strong>top:50%;</strong> <strong>/* you can change it what you want. Maybe test with <em>top:20%;</em> */</strong>
visibility:hidden;
z-index: 1100;
border-collapse: separate;
<strong>P.S: </strong>At least add there index redirection or .htaccess file for secure reasons. It's now showing public.
best regards,
Matt Heyes comments:
Hi Rashad,
Thank you for your response. Yes, it is the default theme. I have previously tried changing the 'top' value for that css element, but with no luck.
I have tried 20% and that positions the center of the lightbox 20% down the full height of the page. I have also tried with pixel values.
There must be a conflict with my style.css, thats all i can think of.
Matt
Matt Heyes comments:
Correction: I have just disabled my style.css and still the positioning of the lightbox is wrong. Re-enabled the style.css now.
Tough one... any other ideas?
Rashad Aliyev comments:
use the !important; for this.
Rashad Aliyev comments:
I saw that's opening and going immediately down.. And also when you're come to the next button then you'll see it's seems on the top.
It's making it break ..
Matt Heyes comments:
Ahhhhhh, I have worked it out. The issue is with the Google Translate widget. With that running on the same page it for some reason messes up the position of the lightbox. I have disabled the Google Translate dropdown and now the clearbox lightbox works perfectly.
If anyone can find a solution so I can use both, I will gladly award them the prize.
Rashad Aliyev comments:
find the similar css tags,
1st of solution: you can change it;
2nd: you can use the !important; for this.
best regards,
Rashad Aliyev comments:
for example:
if there are two p style, you can use one of them with important. p { color: #ff0000; }
p { color: #000000; }
p { color: #ff0000 !important; }
p { color: #000000; }
It mean CSS will use which is important.
You should use it for your Clearbox css.
Rashad Aliyev comments:
The Google Translate Widget CSS:
Compair it with yours, and use at your CSS important!
That's all!
http://translate.googleapis.com/translate_static/css/translateelement.css
Patrascu Vlad answers:
Search for #CB_Window and change the z-index to 1999.
#CB_Window {
left:50%;
position:absolute;
top:50%;
visibility:hidden;
z-index: 1999;
border-collapse: separate;
}