Facebook like / send buttons... the popup boxes are cut-off - css

I'm trying to figure out what CSS I must change to fix this problem: If you visit my site http://www.derekbeck.com/1775/ and click the topmost Facebook like or send, the popup that comes up is cut off and so one cannot see part of it. I want the popup to appear in the normal facebook default width, whatever that is, probably something like 300px or so.
Thanks,
Derek

Change this iframe.fb_ltr at line 557 of a css file, it's 180px.
iframe.fb_ltr {
width: 180px !important;
}

Just to add something since any solution i have found online wasnt working...
Once you click the like button a class is being added to the iframe...
that is great and mean you can style the popup only and leave your like button as is.
Here is the class being added:
.fb_iframe_widget_lift {
}
For example & since my button was in a static footer i added:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: -249px;
margin-right: -220px !important;
background: #000;
padding: 10px;
height: 237px !important;
}
Using this you can customize the popup as you wish.
Best regards, Sagive.

Make sure that when you load FB JavaScript it has APP ID!
For example
//connect.facebook.net/en_US/all.js#xfbml=1&appId=77777777777
If you will not have appId at the end it won't load scripts that expand comment box.

Related

How do I change youtube embed video player size in Wordpress?

I want to adjust size of embed youtube video in Wordpress, but it goes full width (Wordpress blog page).
I want e.g. 60% of page. How do I change it?
This worked best for me:
iframe {
max-width: 50% !important;
max-height: 50% !important;
}
No black framing pillars or weird sizing.
You need to change the css style of your theme.
My suggestion:
1)inspect the page of blog and discover what tag the video is child.
2) Go to the de css style page and put the follow code with the tag of your blog:
#blog-id .iframe {
width: 60%!important;
}
Try this (tested):
iframe {
width: 40% !important;
height: 40% !important;
}
This will affect all iframe elements on your website. Add the above CSS in the theme customiser on WordPress.
Code below works better.
iframe {
width: 896px !important;
height: 504px !important;
}
if you are using a plugin then it must have some kind of dimension options there. But if you are not using any plugin then use might have to use custom css. But you might not able to use iframe within wordpress as it allows only http not https inside i frame.

How to Fix/Override a CSS template issue

I have my website here and I discovered a small issue regarding its CSS.
If you hover "Existing Account Client", in Payment method section (at the bottom), it's cutting the left side of the description.
You need to input some fake info and click on "See Price" then select any vehicle.
Existing Account Client
How do I fix it?
You can add 'position: relative;' into this section:
#payment_selectors label, #payment_selectors label a{
position: relative;
}
It will display whole tool tip. However I spot another problem - this tool tip window is flashing. You can try shift position of tool tip by adding left: 20px; or padding-left: 20px; or something similar.
As well please change: to fix flashing issue.
.custom-tooltip {
background: none !important;
top: -80px!important;
}

Customizing WP theme - how to change link for nav button in CSS?

I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.

Contact Form will only display if I remove the 'zoom' property; need a solution

I setup a static html landing page; displays perfectly in Chorme, Safari, and Firefox. However, I cannot get the embeded MailChimp contact form name and email fields to display when I use the zoom property; as soon as I remove it, the inputs show up too large and out of place which is why I used the zoom property in the first place.
Why would this cause an error? Is there anyway to rememdy this odd problem?
url: http://comingsoon.veteranbrewingcompany.com/
TIA
You really need to address why the form is so large. Various styles are causing it to be so, such as
#mc_embed_signup .mc-field-group input {
font-size: 40px;
}
#mc_embed_signup .button {
background: url("http://themicroscopeguy.com/wp-content/uploads/2013/05/submit2.png");
width: 207px;
height: 92px;
}
So, you have big font sizes set, and the submit button is quite a large image. You can address all that via CSS. You don't need an image for the subbmit button, as you can easily style a normal button with CSS.

javascript ONLY loader before aspx...like gmail.com login loader

I have a Home.html that has a login form that POSTS to login.aspx
the login.aspx takes a hell lot of time to load...
so i want to have a javascript based function where the instant i click Login Button,
a loader must be shown ...while in the background the POST happens and then aspx page must get loaded and then the modal must redirect to the aspx page.
similar to gmail.com login loader..... but only using javascript. (i am also using a minified jquery js ) (NO aspx pages in between)
Please note that i cannot use any asp based loader!
I have tried using :
http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx
(it does not work fast. it first redirects to the POSTed page )
Thanks in advance..
If you just want to show a "Please wait...", attach yourself to the forms "onsubmit" event. Then show the "please wait" message (make a DIV visible). When you are done, the form will be submitted and wait for login.aspx.
If you want to have a progress bar, you have two ways of doing it:
* Either post to a hidden iframe which will load login.aspx.
* Or use an XmlHttpRequest to load login.aspx.
In both cases, login.aspx has to spit out messages (pieces of JScript or DIVs you interpret on the client) which update your progress bar.
You will find plenty of examples in Google. Try "jscript progress bar aspx" for instance.
René
Check out the following link, as it is the needed code, styling and layout for a "Loader".
I have used the code and it works 100%
You need a Div on your page:
<div class="modal"></div>
a bit of CSS styling for the div:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And then lastly a bit of javascript to start and stop(hide and display) the loader:
START:
$(this).addClass("loading");
STOP:
$(this).removeClass("loading");
Source: http://jsfiddle.net/jonathansampson/VpDUG/170/

Resources