can't style e-newsletter checkboxes

After trying to remove a wall with my head for the better part of an hour, I finally figured out the source of my frustration.... something with the way checkboxes and labels are coded within e-newsletter. See here:

http://resonate.is/643-2/

An e-newsletter subscription box and a regular form with checkbox. The regular form checkbox works perfectly. (Using a typical method of replacing the default checkbox and adding styling to the label:before property.)

Just cannot get this to work with the WPMU form. My only guess is that it has something to do with the way the checkboxes and labels are rendered... that they are on separate lines within the HTML.

So, has anyone been able to successfully restyle their checkboxes used in e-news? Maybe another method that works? Or do I have to try hacking the plugin?

  • Rupok

    Hi Peter

    I just checked the link you provided (http://resonate.is/643-2/) with Firefox, Chrome & Safari in Mac and in all three browsers, it seems that the checkbox inside the plugin form and regular form looks exactly same to me except the fact that, the regular checkbox has a bullet point on it's left.

    So I inspected both the elements in firebug and found that both are being rendered in exactly the same way. I've attached screenshots with both the elements selected and you can see that the CSS declarations are exactly same for both elements.

    Can you please follow this tutorial (http://cssdeck.com/labs/css-checkbox-styles) and see if it works?

    Have a nice day. Cheers!
    Rupok

  • Adam Czajczyk

    Hello Peter,

    I hope you're well today and don't mind me jumping in here!

    I took a look at your site and also reviewed this thread carefully and I got a fundamental - I guess :slight_smile: - question: how would you like those check boxes to look/act like? Would you be able to share a screenshot/sketch with us? I'm sure we can find a solution but I got this terrible feeling that we're all dancing around the clue of the issue here :slight_smile:

    Looking forward for your replay,
    Adam

  • peter_harris

    Hey @Adam Czajczyk not entirely sure, as my designer hasn't given me his styling yet, but it needs to be totally flexible, so requires the usual "replace default with label before/after" technique.

    Interestingly, when I inspect the checkbox in the e-newsletter list in Chrome, I can see the action change the :after property. But in Firefox, they stay stuck on 0. BUT ONLY WHEN the checkboxes are in the list, not in the plain form I have below the e-news subscription. So that leads me to ask what properties do lists in FF have that could be preventing this transitions from firing?

    CHROME WHEN CLICKED:

    [type="checkbox"]:not(:checked) + label::after {
        opacity: 1;
        transform: scale(1);
    }

    FIREFOX WHEN CHECKBOX IN LIST CLICKED:

    [type="checkbox"]:not(:checked) + label::after {
        opacity: 0;
        transform: scale(0);
    }
  • Adam Czajczyk

    Hello Peter!

    Thanks for this additional info. However, forgive me this please, I think we're still missing something important here :slight_frown:

    I have visited your page and make a super-simple change to CSS rules you quoted in your recent post. The effect was the same (tested with latest Chrome and Firefox under Windows) - those changes worked as expected.

    Take a look at screenshots attached please: there's a view of code change (FF CSS editor) and effect on site for un-checked check boxes.

    In order to address exactly the same element but for "checked" state you may want to use exactly the same CSS structure (as in your last post) but without ":not" part.

    Best regards,
    Adam

  • peter_harris

    FINALLY figured out what the problem is... well, only half of it. Had nothing to do with CSS, browsers, etc. Ready for this?

    IT'S BECAUSE I WAS LOGGED IN.

    In the process I've found a number of bugs; using three different groups.

    * When I unsubscribe on the front end, I'm listed as unsubscribed in the admin, but NOT removed from the groups I had subscribed to.
    * When I revisit the front end, I see just the "subscribe to newsletters" button, no groups to check.
    * If I click subscribe, the page refreshes and I now see the checkboxes for the groups, but none of the styled checkboxes function (if I disable the special CSS, then the checkboxes work)
    * If I try to change my subscriptions, they aren't properly saved... I uncheck all of the groups and yet am still subscribed to one of them
    * So then I remove myself manually in the backend from all groups -- still can't resubscribe with the styled checkboxes in the front end
    * If I disable the CSS on the checkboxes, all is good... can subscribe and unsubscribe easily
    * If I log out and subscribe with a different email address, the styled checkboxes all work perfectly fine -- I log back in to confirm that I've subscribed successfully
    * Oh but wait, I'm logged in again... do the styled checkboxes work? Nope.
    * As I'm logged in with my admin, I confirm in the backend that I'm subscribed to group 1 -- I go back to the front end and disable the checkbox CSS -- there's no confirmation that I'm subscribed to group 1
    * Just for fun, I disable the checkbox CSS and make sure all boxes are not checked -- meaning not subscribed to any group -- I check the admin and guess what? still subscribed to multiple groups
    * Just to be safe, I totally remove my custom checkbox CSS from my test page and discover... still not showing which groups I'm subscribed to

    So what have I learned after BURNING THREE HOURS ON THIS... Styled checkboxes in the e-newsletter plugin don't work when logged in. Subscribing and unsubscribing is totally unreliable. At the end of the day that may not matter to me as I don't have a user community logging in to the site at this point. When I do in the future, if these bugs aren't fixed I'll need to drop this plugin.

    The styling/logged in thing... ok, whatever... maybe you can't test EVERYTHING. But the subscribed/unsubscribed issue is something else entirely. A fundamental (IMHO) aspect of the plugin which I've now found to be totally unreliable.

    I won't be answering any questions about this as I am really behind on getting this site launched and three hours to me is like a full day to someone else. Good luck testing and confirming what I've discovered.

  • Predrag Dubajic

    Hi Peter,

    Thanks for providing such detailed response, I was doing some further testing based on that and here is what I noticed.

    Subscribing or unsubscribing from groups worked normally for me with or without checkbox styling using the default WP theme, have you tried switching your theme to see if it's related to that?

    Once you unsubscribe from newsletter you will be shown in group but the emails will not be sent to you.
    For example, if you create one new group, subscribe to that group you will see that group as an option when you go to send your newsletter.
    Now, if you unsubscribe you will stay in the group, but if you go to send your newsletter now you will see that group is not available as sending option as there is no members to send to.
    So if you have 5 people in group, one person unsubscribes and you go to send newsletter you will see that it only shows (4) as the number of people in group.

    I did manage to replicate the issue where the groups are not shown on front end after you unsubscribe and I have reported this issue to the developer.

    Thank you,
    Predrag