PLEASE HELP! – Login/Reg Design Issues

Greetings,

Sorry about the all caps PLEASE HELP, but I’m tearing my hair out over a couple small issues that can’t be this hard to solve.

First, is there an easy way for me to set the field text color for my login/registration window? (it is currently grey on white and hard to read).

Second, is there any (easy) way for me to get a single checkbox per line in a field containing multiple checkboxes? Bruce has tried to help me with this one, but I must be dense, and I’m not grasping his instructions (yes, I’m a newbie).

Third, How do I move the “Log In | Lost your password?” links to be above the registration window, rather than below it? They really should be easier for my users to find (at the top of the page).

Fourth, I have several registration fields that are setup to received entries that are max. 2-characters in length (like state abbreviations or years in the industry). Is there any way to adjust the displayed entry field width? (right now, all text entry fields display the fill width of the window, which looks real clunky). Thank you.

All 4 of these issues are shown in the screen capture linked to below. Any help, in simple (dumb-guy) English will get you free beers for life, anytime you visit Ft. Myers Florida. Thank you.

• This topic was modified 4 years, 4 months ago by  Charles P..
• This topic was modified 4 years, 4 months ago by  Charles P..
• This topic was modified 4 years, 4 months ago by  Charles P..

Hi Charles.

If these customizations are hard for you, you should really consider getting help from a freelance developer that can do it. You post the job in freelance sites like jobs.wordpress.net, odesk.com or elance.com.

I hope you find a good one quick. :)

Cristian, I don’t think I’ve ever received a tech support response like that from a company that I have paid money to for a product. Isn’t this the purpose of a tech support forum – to help customers with things like this?

In response to your response, these customizations shouldn’t be hard, but without documentation covering how to do them, they would be hard for many people who aren’t developers.

To make this support request easier for everyone, I’ll throw away 3 of my questions. All I really need help with is how to configure the checkbox list so that there is 1 item per line.

Thank you.

• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..

Hi Charles,

Our support is limited to the scope of our support policy, that’s why Cristian suggested hiring a developer.

I reviewed the thread where Bruce offered suggestions and he is correct. This will require a bit of CSS coding. If giving you the CSS code were simple, we would be happy to do that, however it requires working with your existing CSS styles and understanding how your theme and other plugins may be affecting the styling.

Normally those checkboxes are on separate lines. If you disable all other plugins and activate the default WordPress theme (e.g., TwentyEleven), you’ll see that those checkboxes will appear on their own lines, not one after the other like in your screenshot.

Raam,

Thank you for explaining this situation. I now understand something I really had zero understanding of before – that the 3rd party themes can be problematic for s2member.

Is there a list anywhere of WP themes that are known to be (relatively) surprise and problem free with s2member? A list like that would be HUGE. Essentially a compatibility table to help s2member users increase their chances for a problem-free (or at least problem-reduced) experience.

I will test the issue with TwentyEleven theme, but that theme is not formatted well for our needs, so any suggestions on other compatible themes would really be appreciated. Thank you again Raam.

Raam,

I followed your advice and got a very strange result.

I have deactivated all other plugins, and have changed the theme to TwentyEleven. When I generate the Registration Form using the link found at s2member>General Options>Login/Registration Design, the Registration Form still shows with the old formatting (and the wrapping of the textbox fields). The rest of my site has updated to the formatting of TewntyEleven, but apparently not the s2member reg form.

I tried both refreshing and reloading the page, but the form is still stuck with the old layout. Any ideas?

Thanks.

• This reply was modified 4 years, 4 months ago by  Charles P..

Hi Charles,

I did a few more tests and I realized that you’re probably using the “Checkboxes ( multi-option )”, instead of creating multiple “Checkboxes ( single )”. I tested with multiple “Checkboxes ( single )” and each checkbox appeared on its own line.

After recreating what you were seeing using the “Checkboxes ( multi-option )”, I played around with the CSS code a bit and it appears there is no easy way to format those one on top of another — doing this would require modifying the PHP that generates those checkboxes.

If you must have the options listed on on top of another, I suggest using the “Select Menu ( multi-option )”. This is what I would do in your case. Your users will be able to select multiple options with the mouse while holding down the CTRL key.

Raam,

Thanks for diagnosing this. I am going to try a couple of different things on this end and see what we can do to get the end result we are looking for. I will report back here and let you know. Thank you again.

PS – The good news is we can go back to using the theme we were originally using – we’re not going to have to live with boring old TwentyEleven.

• This reply was modified 4 years, 4 months ago by  Charles P..

Raam,

Okay, I tried the multi-select drop down list – that won’t work because not everyone is going to be smart enough to (1) scroll down the list to see what the entire list includes, and (2) always know how to Ctrl+select items correctly.

Here’s what I did (and it’s incredibly inelegant and I’m not proud of it), but I added a bunch of dots after each item to force the next item in line to wrap around and fall to the next line –

new|New to the Industry (no experience yet – here to learn) . . . . . . . .
waiter|Waiter/Waitress (Food and Drink) . . . . . . . . . . . . . . . . . . . . . . .
cocktail|Waiter/Waitress (Drink Only – i.e. Cocktail Waitress) . . . . . . . . . . .
frenchrussian|Waiter/Waitress (with French or Russian Service Experience) . . . . .
gueridon|Waiter/Waitress (with Table-Side “Gueridon” Service Experience) . . .
bartender|Bartender . . . . . . .
runner|Food Runner . . . . . . .
busser|Busser . . . . . . . .
uncertifiedwine|Sommelier / Wine Steward (Uncertified) . . . . . . . . . . . . . . . . . . .
certifiedwine|Sommelier / Wine Steward (Certified) . . . . . . . . . . . . . . . . . . . . . .
host|Host / Hostess / Seater / Greeter . . . .
captain|Maître d’ / Captain . . . .
trainer|Trainer . . .
manager|Manager . . .
gm|General Manager . . .
owner|Owner . . .
marketing|Marketing . . . . .
other|Other (please describe briefly below)

Here’s how it displayed (first on Chrome, and then on IE – it looks a lot better than the wrapping checkbox items did, but it’s a very imperfect solution):

• This reply was modified 4 years, 4 months ago by  Charles P..

Just tested on an Android tablet – bad result. I don’t think my fudged-fix is going to be the answer. Here’s how it looks on the tablet. If only there was a way to throw in a hard carriage return after each multi checkbox item, that would just solve this and make the multi-checkbox fields look like any other site where checkboxes are all nicely lined up along a left edge.

Hi Charles,

I was able to get this working like this:

US|&nbsp;&nbsp;United States<br />|default
CA|Canada<br />
VI|Virgin Islands (U.S.)

The only thing you’ll have to deal with is 2 spaces between the checkbox and the description, otherwise it looks fine. Just be sure to use the HTML entitie   to create the spaces on the first checkbox description, and HTML <br /> tags after all but the last’s description:

Let me know if that works for you.

EUREKA!

Bruce, thank you for working on this. 2 spaces between the checkbox and the description is absolutely fine (it’s certainly better than my hair-brained idea of a stream of dots). This is a very minor item, but after the first line, the rest of the checkboxes are off a little (see photo below), but I’m not complaining. I am very happy to have this ability to list the checkbox items neatly like this.

Here’s the data I used (not sure why this is happening, but per your direction, I typed the code you provided before the first line’s option label, but the code doesn’t show there after saving the changes – it looks as follows):

Thank you Bruce.

• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..

Hi Charles,

If you go down a few forms, and find CSS Styles: ( optional ), you can put float: left; in that form and it’ll fix it. :)

You are a star! Thank you Bruce. Thank you Raam.

I want you guys to know that I’m completely satisfied with the resolution of this problem (the situation is 100X better than its original state). I just wanted to show you the final results (which I’m completely fine with). This is for your own internal research purposes

The first screen shot shows the checkbox list before I added the CSS Styles code that Bruce recommended. The second screen shot shows the after result. Both results work for us, but I just wanted you to see how the lines of text dropped a little below the checkboxes.

Before

After

Again, we’re not complaining. We are fine with where we are. Thank you gentlemen.

• This reply was modified 4 years, 4 months ago by  Charles P..
• This reply was modified 4 years, 4 months ago by  Charles P..

Hi Charles,

You could try adding a CSS class to the checkboxes, and then using:

input.class_name {
position: relative;
top: 3px;
}

That should push the checkboxes down 3 pixels assuming you made the CSS class class_name. You can change the value of top: until you get it lined up right.

Thank you Bruce. Will give it a try. Really appreciate all the help on this.

Greetings Bruce,

As a newbie, I’m getting a little tripped up trying to implement your tech support instructions. Can you clarify for me where the 3 lines (starting “input.class”) are to be inserted? Thank you Bruce.

Best,
Charlie P.

Hi Charles,

Sorry I didn’t clarify. I was speaking of the box at the bottom of s2Member® -> General Options -> Login/Registration Design (Footer Design ( i.e. Bottom ). You should be able to add <style></style> tags and put CSS (i.e. the code I gave you) within those tags in that area.

PERFECT! This worked like a champ! Thank you gentlemen.

Hi Charles,

Sounds good! Glad you got it fixed! :)