Hi,
I looked into your site ( nice one indeed :-)!) and used Firebug to inspect CSS.
The setting for position is in the plugins’ CSS , line 2
(/wp-content/plugins/auto-thickbox-plus/thickbox.min.css?ver=1.9)
Where it says “left: 50%” and “top:50%” should be changed to 25% for the both to get it in the center of the screen.
It should be like shown bellow:
………….
#TB_window {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #555555;
box-shadow: 0 4px 30px #000000;
color: #000000;
display: none;
left: 25%;
position: fixed;
text-align: left;
top: 25%;
z-index: 10102 !important;
}
(bold is where values are changed)
I took a screenshot after I changed values as shown above, yo can see it here:
http://hayhi.com/beta_cleantelligent_com.pdf
If you don’t use Simple Custom CSS plugin I would warmly advise you to try it. You will not need to edit the ThickBox plugin and search for where is this line of code. You just open Simple Custom CSS plugin’s editor and add only this lines (copy from bellow and paste):
…………
#TB_window {
left: 25%;
top: 25%;
}
………….
What’s even more important in doing it this way -> your setting will not be overwritten with possible Thickbox plugin update (as it will be if you edit and make change directly in the plugin’s CSS)
Hope this helps and good luck with your business !
That did it. Thanks!
I couldn’t get the custom CSS plugin to work, however. I installed it and did as you said and it didn’t do anything. I just made the changes to the plugin…
Glad you did it 🙂
Take care to change it again on every thickbox plugin update.
I am surprised that CSS plugin didn’t work for you.
It works just perfectly with any plugin or theme.
Are you sure it was SIMPLE CUSTOM CSS plugin?
http://wordpress.org/plugins/simple-custom-css/
Did you make sure that brackets {} were inserted correctly ?
If nothing else, try to write the code this way:
…………….
#TB_window {
left: 25% !important;
top: 25% !important;
}
……………..
Believe me, it’s well worth trying. Simple Custom CSS plugin is a life saver. No more worries because of plugins and themes updates. Otherwise you must do changes over and over again.
Yeah, I did exactly as prescribed. Thanks anyway,
I’ll probably keep working with it. It sounds like a great little plugin.
Thanks again for the help!
I figured it out. It was just buried in the code. 🙂
I have the same Problem. But the strange thing is, that in another site the same code is working on the right position.
http://bit.ly/1kQ23ym klick on the 3 box in the quarterfield (newsletter) the pop up box open up in the right corner.
But if you press here
http://bit.ly/1c7ZLLn on the mail share button the box appear in the right place.
strange, because the css shows exactly the same Styles. 🙁
The code is there, they just wrote it in a block style, so it’s impossible to read. But it’s all there. The above response was correct.
WTF? If i do this my second box for the email share will be shown wrong. i was trying these setting.
Hi likiriki,
You have specific reason for the above css “recipe” not working for you.
On your second link (mail share), the box display is not ruled only by css code but is define in the HTML code as shown bellow
(showing only the part connected to the problem, style defined by HTML is in bold ):
……………………….
<div id="TB_window" class="TB_ajaxContent TB_titleTop" <strong>style="margin-left: -266px; margin-top: -219px; display: block; width: 530px;"</strong>>.....(showing only the part connected to the problem)</div></div></div>
………………………..
HTML style is what gets loaded if define, regardless of CSS code, so in this case, for this particular pop-up box, position is actually corrected by HTML.
So you need a bit different “recipe” for the pop-up box that doesn’t show in the centre (newsleter, your first link)i.e. you will need to
add a line in bold, as shown bellow:
……………………………….
#TB_window {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #555555;
box-shadow: 0 4px 30px #000000;
color: #000000;
display: none;
left: 50%;
position: fixed;
text-align: left;
top: 50%;
z-index: 10102 !important;
margin-left: -300px;
}
…………………………….
This will center pop-up box horizontally:
————–xxxxx—————
It’s ok IMO.
However, if you would like to center it vertically too, you will need
to add one more line:
………………
margin-top: -120px;
………………
Hope this helps 🙂
(Note that the values are “negative” i.e. have a minus sign)
thank you for your point. I was changing this, but now the responsive version dont work nice. Not possible to use on a blackberry or iphone. Can you help me there also? 🙁 Sorry…
Is it not possible to handle both boxes the same way?
I use the following code for the E-Mail Share:
Template Code:
<div id="email_pop" style="display:none">
<?php echo do_shortcode('[contact-form-7 id="2044" title="Produkt weiterempfehlen"]'); ?>
<!-- php if (function_exists (gSendtofriend)) gSendtofriend(); ?>-->
</div>
<a id="ssba_email_share" class="thickbox" href="#TB_inline?height=380&width=500&inlineId=email_pop">
<img style="width: 40px !important; height: 40px !important; margin-top: -15px; margin-left: -5px;" name="Email" title="Email" class="ssba" alt="E-Mail Share" src="http://www.asdf.ch/wp2/wp-content/plugins/simple-share-buttons-adder/buttons/somacro/email.png" onmouseover="this.src=\'http://www.asdf.ch/wp2/wp-content/plugins/simple-share-buttons-adder/buttons/somacro/email_orig.png\';"
onmouseout="this.src=\'http://www.asdf.ch/wp2/wp-content/plugins/simple-share-buttons-adder/buttons/somacro/email.png\';"/>'
And the following code for the Newsletter:
'<a class="thickbox" href="#TB_inline?height=400%&width=200%&inlineId=newsletter_pop"><img class="iconbox-icon" alt="BLEIBEN SIE IN KONTAKT" src="http://image" />BLEIBEN SIE IN KONTAKT</a>
