CSS selectors for subscription widget

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

• This reply was modified 7 years, 9 months ago by Devon Ostendorf.

Hiya Devon,

Thanks! I tried the suggested CSS and it works just fine. See it here: https://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:

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

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

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: https://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.

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.

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!

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