I posted wrong link by mistake–here is the correct link:
http://www.thencri.org/donate-now/
Yep, that’s probably a CSS change you’ll need to make. That’s why I suggested you test before upgrading — I expected some CSS to need modification. I have seen a few people experience some alignment issues and I suspect there might be a more global fix that might resolve some (but definitely not all) the CSS changes. I’m considering adding that in as an option in the next release.
But for now, it’s really a matter of tweaking your CSS.
–David
I am seeing the same form input box mis-alignment which is also showing up on mobile devices. I haven’t added any custom css for the seamless donations form so what css would I tweak? My form input boxes are squished up against the colon after the First Name:, etc fields just like in the linked example provided above. My other form(s) on the site align normally (e.g. contact form 7).
I looked through the css style sheet provided with seamless donations but wasn’t sure what label(s) would be the ones to tweak. Also took a quick look at the related seamless donation php files but again wasn’t sure which file or line(s) of code to play with to try and address this issue. I would rather have a line break after the colon to move the content onto two lines than have this squished look on desktop and mobile devices. Hoping you can point me in the right direction to tweak the css. Thanks.
Currently, I don’t see a way to fix this using my theme’s own CSS. I looked over the code for 4.0+ styles in styles.css in /plugins/seamless-donations/css folder but could not find any lines of code to tweak. Using Chrome to inspect the element for the “first name” field, for example, reveals the the following:
<div id="_dgx_donate_donor_first_name"><div id="_dgx_donate_donor_first_name-error-message" style="display:none" class="seamless-donations-error-message-field"></div>First Name:<input type="text" name="_dgx_donate_donor_first_name" value="" size="20" data-validate="required"></div>
Mark
FYI, testing this plugin further on a clean installation of WordPress, I found out that formatting problem still exists using the WordPress Twenty Fourteen theme. However, when using the Twenty Fifteen theme, the formatting looks fine in part because the field labels are above the input boxes. However, it is still not clear to me what CSS code is making a difference. Please advise.
Mark
Well, to be honest, I haven’t focused too much on the CSS because every theme is different. I make the assumption that those using WordPress plugins are familiar enough with CSS and CSS selectors to customize their own visual display.
If you don’t know how to write CSS, I have pulled together a list of some folks who would be willing to do it for you and I’d be happy to provide that list. But other than suggesting you use the Chrome inspector to find your CSS selector and then style it, I’m probably not going to be able to do your Web site design tweaks for you.
–David
So, the stylesheet for your plugin, unlike most other plugins, does not have any selectors to modify formatting for the field alignments. Correct?
Mark
CSS offers a wealth of selector options. Not all of them are precoded in stylesheets. The idea of CSS is you can combine and select all sorts of interesting attributes. If you add jQuery on top of that, you have a truly amazing set of options.
And no, the plugin’s stylesheet makes no attempt to predict all of those options. If you need a selector, the easiest way is to use the Inspector in Chrome to find what you’re looking for and then drop it into a stylesheet.
–David
That’s too bad. I can see this plugin isn’t going to work for me any longer.
Okay, but don’t discount learning how selectors work. They’re incredibly powerful tools for customizing your site’s look. I’m starting to think it, even though they’re basic web technologies and not unique to this plugin, that it might be worth recording a short selector crash course for Seamless Donations users.
Probably not this week, but I’ll add it to my list.
–David
