Style issue with "send a copy to myself" checkbox

[drew173]

Maybe this isn't an issue and I just don't know enough about CSS (which is true) - if so close the issue and curse my name :-)

It appears that the "send a copy to myself" checkbox is a member of both the .w2linput and .w2llabel classes. I am trying to get the w2lead form centered in a sidebar widget and adjusting left margins to achieve this. There is no combination of margins I can find/set in my CSS that will allow me to add a margin to all other elements without doubling the margin for the "send me a copy" checkbox. Image with details attached.

[jbuchbinder]

It additionally has the style "checkbox" associated with it. Set something like:

.w2linput.checkbox {
        margin-left: 15px !important;
}

and it should override any other styles you have.

[drew173]

Sorry for the multiple edits; was figuring out the markdown.

Hmmm... added. Doesn't appear to have any effect:

http://www.sacmusicmachine.com/availability/

CSS is as follows:

.sidebar form.w2llead {clear:none; font: normal .8em Tahoma,Arial;color:#FFFFFF;text-align: left;}
.sidebar .w2linput,
#sidebar {margin-left:15px;margin-bottom: 12px;font: normal .8em Tahoma,Arial;color:#000000;float: none;display: inline;}
.sidebar .w2llabel.error {font: normal .8em Tahoma,Arial;color:#FFFFFF;}
.sidebar .w2llabel {margin-left:15px;float:none;display:inline;font: normal .8em Tahoma,Arial;color:#FFFFFF;}
.sidebar .w2linput.text {margin-left:15px;width:80%; height:18px; margin-bottom: 12px;font: normal .8em Tahoma,Arial;color:#000000;}
.sidebar .w2linput.textarea {margin-left:15px;width:80%; height:50px; margin-bottom: 12px;font: normal .8em Tahoma,Arial;color:#000000;}
.sidebar .w2lsubmit{float:none; clear:both; }
.sidebar .w2linput.checkbox {margin-left: 15px !important;}
.sidebar .w2linput.submit {font: normal .8em Tahoma,Arial;color:#000000;}
#salesforce {font: normal .8em Tahoma,Arial;color:#FFFFFF;margin: 3px 0 0 0;}
#salesforce a {font: normal .8em Tahoma,Arial;color:#FFFFFF;}'''

[jbuchbinder]

I'm trying to be nice and gracious about this -- but I'm thinking you didn't try to fix this very hard.

.sidebar .w2linput.checkbox {
        margin-left: 0px !important;
}

seems to work just fine. I had simply given an example as to how to style a particular sheet. In this case, the offending element is actually the checkbox, not the label, which was pushing away from your margins.

Protip: If you're using Chrome/Chromium, hit F12 to open up the CSS debugger to try live changes out on the current page.

[drew173]

Derp. Thanks; you are being nice and gracious, and I didn't try hard enough, and thanks for the protip. I'm new to CSS and spent the entirety of this weekend getting styles right for my side business website. Brain's a little fried. I appreciate your help. You an SFDC employee or an independent dev? If the latter, do you have a donation link/PayPal?

[jbuchbinder]

I'm just a regular developer. I ended up extending the plugin due to what I perceived to be a lack of motion on their dev team's part.

[drew173]

Let me know your email address if you're willing. I think you deserve an Amazon giftcard. You sure helped me out. You can message it to me at facebook.com/andrew.heidrich

[jbuchbinder]

I sent you a Facebook message with it -- it'll be in the "Other" section of your messages. I'm not giving Zuckerberg and his ilk a dollar to send a message. ;)

[drew173]

This suggestion worked like a champ, but it's now fighting with issue #2. The checkboxes I can add to the form and pass to SF share the checkbox CSS class with this checkbox, but I can't set the margin to zero for the "Send a copy to myself" checkbox to make it align correctly, because it moves the other checkbox's margin all the way to the left. I'm going to try to figure it out, so please only reply if there's no easy solution to this :-)

[drew173]

I got it sorted... the only way I could get it to work was to change the class of the "Send a copy to myself" checkbox label on line 791 of Salesforce.php (the p tags are gone because I was seeing if that was the problem). Changing it from w2llabel checkbox to w2llabel-checkbox-label solved the problem and now it lines up with the other checkbox (whose label is a member of both classes, but whatever):

$content .= "\t\n\t".'<br><label class="w2llabel-checkbox-label"><input type="checkbox" name="w2lcc" class="w2linput checkbox" value="1"/> '.esc_html($label)."</label><br>\n";

[jbuchbinder]

I just pushed in a patch for this, based on your last note.

[drew173]

Thanks! My first code contribution ever ;-)

On Wed, Feb 20, 2013 at 2:31 PM, Jeff Buchbinder notifications@github.comwrote:

I just pushed in a patch for this, based on your last note.

— Reply to this email directly or view it on GitHubhttps://github.com/jbuchbinder/salesforce-wordpress-to-lead/issues/3#issuecomment-13861028.