Support » Plugin: Post Notif » CSS selectors for subscription widget

  • Resolved Heimhenge

    (@heimhenge)


    Hiya Devon. I’m back.

    Latest version of Post Notif has been working flawlessly with auto notification. Thanks again for those changes.

    Been tweaking my website for responsive design and am having problems with the Post Notif subscription widget. Take a look at how it displays here:

    http://sky-lights.org/subscribe_to_sky_lights/

    I’ve been trying to adjust the font style and box size via CSS but can’t seem to find the right selectors to affect those elements. For example, how would I change the fonts size in CSS? And how would I get rid of the space between the widget title and the form?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Devon Ostendorf

    (@devonostendorf)

    Hi Dan,

    Glad to hear auto notification is still treating you kindly! 🙂

    Widget configuration and shortcode functionality is slated for inclusion in Post Notif v1.1.5, which I’m actively working on now. I’d love to have your input and feedback if you’re willing to test some/all of it when it is in beta form? I am (cautiously) optimistic that this will provide much better versatility for people to tailor the widget (or its equivalent) more closely to their specific needs.

    In the meantime, you can change the font size for the placeholder text by defining CSS to target “#id_txtFirstName” and “#id_txtEmailAddr” directly:

    	#id_txtFirstName,
    	#id_txtEmailAddr {
    		font-family: "Times New Roman";
    		font-size: 20px;
    	}
    

    (By the way, these are terrible element IDs and something I need to fix to give them Post Notif-specific names to avoid clashing with other plugins.)

    As for removing the space between the widget title and the form, I am far from a CSS expert, but, defining a negative margin-top value for the form element did the trick with my theme:

    	#id_frmSubscribe { 
    		margin-top: -15px; 
    	}
    

    If we’re both really lucky, maybe someone reading this thread is a CSS expert and will chime in on a better way to do this?! 🙂

    Thanks,
    Devon

    Hiya Devon,

    Thanks! I tried the suggested CSS and it works just fine. See it here: http://sky-lights.org/subscribe_to_sky_lights/

    Would be happy to beta for you again. Totally agree that those element IDs could lead to problems/conflicts down the road. Since I only have one subscription form on my site (yours) I doubt it’ll cause any issues here.

    When you get into that widget configuration stuff, consider the layout options for the text boxes on the subscription form. They do weird things when I change my screen size and the responsive theme adjusts. Go to that page of my site and drag the width of your browser window wider/narrower/full screen and watch what happens. Would be better to have a fixed box width imho. And it might be good to make the subscribe button look more like button.

    Google Analytics told me early last year that the number of my readers using smartphones had surpassed those using desktops. That’s when I decided I needed a responsive theme. Since I made the switch, a whole new round of design decisions was needed. This was one of them.

    Oops. Spoke too soon. Now I’m gonna need another CSS selector to move the “check your email” text that displays after you subscribe. Apparently, moving the widget title using negative px causes it to clash/overwrite that message. See:

    http://heimhenge.com/downloads/Post-Notif-confirm.jpg

    I could move that message down also if you provide the selector. Thanks.

    Plugin Author Devon Ostendorf

    (@devonostendorf)

    Hi Dan,

    Thanks, as always, for your willingness to help out; I really appreciate it!

    I will keep in mind what you’ve brought up with regard to the widget configuration.

    Sorry about the status message text overlap issue my suggested “fix” introduced.

    You can reposition that via:

    #id_spnErrorMsg

    Thanks,
    Devon

    There are several messages that appear in the subscription form widget. Your suggestion gave me some clues to go on. So here’s the CSS I’m using now:

    /* Post Notif subscription widget changed to remove vertical space between widget title and form */
    #id_frmSubscribe {
        margin-top: -25px;
    }
    
    /* Post Notif subscription form messages moved down to prevent overlap with widget title */
    #id_spnErrorMsg, #id_spnSuccessMsg, #id_lblCallToAction {
       margin-top: 30px;
       font-family: Arial;
       font-size: 12px;
       color: #C3C3C3;
    }
    

    This positions all of those messages properly except the one that tells you you’re already subscribed. See: http://heimhenge.com/downloads/Post-Notif-subscribed.jpg.

    I’d like to add a little more space between the widget title and that message, but that message doesn’t respond to any selector I can find. Firebug tells me it is “id_spnSuccessMsg” (which I included as a CSS selector). No big deal, since that’s probably a seldom used message, but curious about what I’m missing.

    Plugin Author Devon Ostendorf

    (@devonostendorf)

    Hi Dan,

    Yes, Firebug is telling you the truth, as the “you’ve already subscribed” message does get displayed via “id_spnSuccessMsg” .

    Thanks for providing the link to the example. I am not sure why you are getting that positioning, however, particularly if it works as expected when, for instance, you are told to “check your email to confirm your subscription” by way of the same span.

    I will make sure this gets addressed as part of reworking the widget code for version 1.1.5; sorry that’s behaving weirdly!

    Thanks,
    Devon

    Heya Devon,

    OK, thanks. Wasn’t sure I was reading Firebug correctly for the CSS selectors. That is strange though, how one message gets spaced differently than the others. I’ll play around with “margin-top: -25px” value and that should get me the extra space I’d like before all the messages. Like I said … no big deal since I don’t expect that “already subscribed” message to show up much in practice.

    I’m guessing that different spacing is coming from the fact that, on other messages the form remains visible, but for this one the form disappears.

    FYI, if you got 2 post notifications for the June 5 Sky Lights it’s because I forgot to declare the “featured image” on that first one. It’s just an extra step I need to remember now that I’m using images in my notifications.

    Thanks again. You could probably mark this as resolved.

    Plugin Author Devon Ostendorf

    (@devonostendorf)

    Hi Dan,

    I bet you’re right that the different spacing is because of the form coming and going for different situations; that needs re-design when I take the plunge and rename all the elements.

    I did notice the 2 post notifications on Monday morning and was a little alarmed; glad to hear that was “deliberate” 🙂 .

    Thanks,
    Devon

    Well it’s running well enough for my purposes now. I’ll patiently await your next version. In the meantime, here’s one more thing to check …

    When a subscription message runs more than one line and has to break, there is excessive space between those two lines of text relative to the size of the text. Just looks weird to my eyes. So my workaround for that was changing those messages in the Post Notif Settings so that they said the equivalent in a single line.

    As you observed, more user control over the message fonts would be a good thing. Thanks again for a great plugin!

    Plugin Author Devon Ostendorf

    (@devonostendorf)

    Hi Dan,

    Thank you for your continued suggestions as you encounter things that are out-of-whack. I appreciate that you are both mellow when reporting issues and creative about finding workarounds to tide you over until I can clean things up in the code!

    Thanks,
    Devon

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS selectors for subscription widget’ is closed to new replies.