WordPress.org

Ready to get started?Download WordPress

Forums

Growmap Anti Spambot Plugin
[resolved] Why is tick box width styled by php, not css? (9 posts)

  1. James
    Member
    Posted 1 year ago #

    Hi,

    Just installed the plugin, all seems great and looking forward to seeing how well it works on cutting down spam!

    But one small query with regards to the styling: The 'tick to confirm you're human' check box on my site was misaligned with the other tick box (subscribe to comments) below the commemt form. It was offset to the right slightly.

    Viewing the css styling via 'Inspect elements' in Chrome I noticed the following:

    element.style {
    width: 25px;
    }

    which appears to be the culpit and seems to come from the following line in the plugin php file:

    gasp_cb.style.width = "25px";

    So my question is why is this styling hard coded in the plugin php file, rather than following on from the styling of the rest of my comment form or being styled via css? Seems odd, but I'm still only just learning so quite happy to find that there's a perfectly good reason! :)

    Cheers, James

    http://wordpress.org/extend/plugins/growmap-anti-spambot-plugin/

  2. James
    Member
    Posted 1 year ago #

    Ok, so this was actually a little more complicated than I first though, but I think I have a solution and would welcome your comments.

    Apart from the width attribute mentioned above that I have commented out in my plugin php file, there was another issue I found with getting the plugins tick box and label to look like the others below my comment form (for subscribing to comments and updates etc).

    I eventually tracked this down to all of the other labels to the right of each tickbox being enclosed in <label> tags, whereas this plugins text label is only in <p> tags. Hence the correct formatting was not being picked up.

    I have therefore modified the javascript in the 'public output' section at the bottom of the plugins php file to add an additional <label> element and add the "confirm you are a human" text to this rather than just the standard <p> element.

    So the last section of the plugins php now looks like this:

    /*********************************************
        *		public output
        *********************************************/
    
        /** gasp_add_checkbox
        * Called by comment_form action
        * Adds javascript to create a checkbox on the comment form
        */
        function gasp_add_checkbox(){
            if(!is_user_logged_in()){
                $options = gasp_get_options();
                echo '<p id="gasp_p" style="clear:both;"></p>';
                echo '<script type="text/javascript">
                //v1.2
                var gasp_p = document.getElementById("gasp_p");
                var gasp_cb = document.createElement("input");
                var gasp_text = document.createTextNode(" '.$options['checkbox_label'].'");
                gasp_cb.type = "checkbox";
                gasp_cb.id = "'.$options['checkbox_name'].'";
                gasp_cb.name = "'.$options['checkbox_name'].'";
                 /*gasp_cb.style.width = "25px";*/
                gasp_p.appendChild(gasp_cb);
    	     var gasp_label = document.createElement("label");
                 /*gasp_label.id = "gasp-label";*/
                 /*gasp_label.name = "gasp-label";*/
    	     gasp_p.appendChild(gasp_label);
                 gasp_label.appendChild(gasp_text);
                var frm = gasp_cb.form;
                frm.onsubmit = gasp_it;
                function gasp_it(){
                if(gasp_cb.checked != true){
                alert("'.$options['checkbox_alert'].'");
                return false;
                }
                return true;
                }
                </script>
                <noscript>you MUST enable javascript to be able to comment</noscript>
                <input type="hidden" id="gasp_email" name="gasp_email" value="" />';
            } else {
                echo '<!-- no checkbox needed by Growmap Anti Spambot Plugin for logged on user -->';
            }
        }

    There are 4 lines changed from standard which are indented one extra space to the right, which are this line commented out:

    /*gasp_cb.style.width = "25px";*/

    these lines added:

    var gasp_label = document.createElement("label");
    gasp_p.appendChild(gasp_label);

    and this line modified:

    gasp_label.appendChild(gasp_text);

    Any thoughts, comments or issues with this that you can see? Not sure whether this formatting issue is unique to my site (using the 'Striking' theme) or more general.

    Regards, James

  3. Tom
    Member
    Posted 1 year ago #

    I just noticed the same problem on my blog. The check box is slightly misaligned with the "Notify me of followup comments via e-mail" check box. I hope this will be fixed in the updated version of G.A.S.P. Otherwise this plugin is absolutely awesome!

  4. James
    Member
    Posted 1 year ago #

    Glad I'm not the only one Tom!

    So, any thoughts or suggestions from the developers please?

  5. Andy Bailey
    Member
    Plugin Author

    Posted 11 months ago #

    thanks for the code suggestions James, it will be added to the next update

  6. Andy Bailey
    Member
    Plugin Author

    Posted 11 months ago #

    the new code has now been updated to use your suggestion and the label tag wraps around the checkbox and text so users can click the text to tick the box

  7. James
    Member
    Posted 11 months ago #

    Hi Andy,

    Thanks for your efforts with the plugin! I'm still having a few problems with the alignment of the checkbox under the comments box - it is offset to the right compared to the other checkboxs by about 6px.

    As an example, please see at the bottom of this page:
    http://matchlessclueless.com/led-lighting/led-rear-lights-triumph-bonneville/

    My original tweaks as above have obviously been overwritten by the plugin upgrade. I've had a quick look at the plugin php, but not being expert in such matters it will take me a while to work out what modifications are required to get everything to align correctly.

    Could you perhaps take a look at let me know your thoughts?

    Thanks, James :)

  8. Andy Bailey
    Member
    Plugin Author

    Posted 11 months ago #

    I now wrap the checkbox in the label tag so you can edit
    http://matchlessclueless.com/wp-content/themes/striking/css/screen_complex.css?ver=3.6

    and edit this

    #comments label {
    padding-left: 6px;
    opacity: 0.75;
    }

    and remove the padding-left so it looks like this

    #comments label {
    opacity: 0.75;
    }

    that should do it for you

  9. James
    Member
    Posted 11 months ago #

    Thanks for the pointer Andy.

    I've found that adding:
    ----------------------------------------------
    /* Tweak spacing of comment tickboxes to make them all line up */
    #comments label {
    padding-left: 0;
    }
    ----------------------------------------------
    to the 'Edit CSS' option under 'Appearance' in the admin area (a Jetpack feature I think?) did the trick for me and has brought all the check boxes into line.

    Cheers, James

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.