Logging in is necessary to:
- perform administration functions
- access member only pages
- perform member self-service functions.
If you want to display login fields on your page, you can add a log in form gadget.
Once a member is logged in, the log in form is replaced by links that allow the member to log out, change their password, and view their member profile.
To display a log in button rather than a log in form, you can insert a log in button gadget.
Since logging in is such an important function, you should include a log in form or log in button gadget on most of your Wild Apricot pages. So that you don't have to add a log in gadget to every page individually, you might consider adding a log in gadget to one or more page templates, so that pages based on the templates automatically display the form. For instructions on inserting, moving, and deleting gadgets, see Gadgets.
The orientation of the log in box – horizontal or vertical – can be controlled for Blueprint, Bookshelf, Building Blocks, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, and White Space themes. For all other themes, the orientation is determined by the theme.
When using Blueprint, Bookshelf, Building Blocks, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, or White Space themes, you can also hide the Remember me and Forgot password labels, and control whether the email and password labels appear within the entry fields, or outside them.
On some themes, the log in form does not appear until you click or hover over the Login icon.
For some themes, the Login icon appears just as an icon without the word Login.
Within the page preview, log in gadgets appear differently depending on whether the user is logged in. As part of the log in button gadget settings, you can choose which state to display.
Log in form gadget settings
Using the gadget's settings, you can control its appearance and behavior.
For instructions on displaying gadget settings, see Gadgets.
The following settings are available for log in form gadgets. Some settings are not available for all website themes.
Preview state
Choose whether you want the page preview to display the log in form as if the user is logged in or not logged in.
Orientation
(Blueprint, Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, and White Space themes)
Controls whether the log in form is positioned horizontally or vertically.
Align
(Building Blocks, Casefile, Firma, Homestead, Showcase, Terra, Tinted Tiles, Treehouse themes)
Controls the horizontal alignment of the gadget. You can choose from left, centered, and right alignment.
Option to log in via social networks
Controls whether buttons appear that allow members to log in using their Facebook or Google credentials. Regardless of your choice here, social login buttons will appear on the Authorization required system pagethat appears when someone clicks the Login button within a log in button gadget, and at the bottom of each private member profile.
To remove the social login buttons from the Authorization required system page, add the following code to the CSS customization screen:
.WaGadgetAuthorizationRequired .openAuthFormContainer { display: none !important; }
To remove the buttons from private member profiles, use the following code:
#socialLoginContainer, #idSocialLoginContainer { display: none; }
Labels inside boxes
(Blueprint, Bookshelf, Building Blocks, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, and White Space themes)
Controls whether the email and password labels appear within the entry fields or outside them.
Remember me checkbox
(Blueprint, Bookshelf, Building Blocks, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, and White Space themes )
Controls whether the Remember me checkbox appears within the log in form.
Forgot password link
(Blueprint, Bookshelf, Building Blocks, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, and White Space themes)
Controls whether the Forgot password link appears within the log in form.
Gadget title
(Blueprint, Bookshelf, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Treehouse, Whiteboard, and White Space themes)
If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box.
For Kaleidoscope themes, use a Headline gadget instead of specifying a gadget title.
Gadget style
(Blueprint, Bookshelf, Casefile, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Terra, Treehouse, Whiteboard, and White Space themes)
Determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. You can choose from theme-specific styles and styles that are common to all themes.
Margins
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
Padding
(Casefile and Kaleidoscope themes only) The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.
Advanced
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Gadget settings.
Changing colors and fonts
You can change the colors, text styles, and backgrounds used in your website from the Colors and styles screen.
For more advanced fine-tuning, you can use CSS customization and theme overrides.
For log in form gadgets, you can modify the following elements from the Colors and styles screen:
Gadget title
- General formatting or Typography > H4
- Gadgets or Gadget styles > Title
(Blueprint, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Terra, Treehouse, Skyline, and White Space themes)
"Email", "Password"
- Login box > Text
- Log in gadgets > Labels
Email, password fields
- Login box or Log in gadgets > Input field
"Remember me"
- Login box or Log in gadgets > Text
"Forgot password"
- Login box or Log in gadgets > Link(s)
Login button
- Login box/Log in gadgets > Button/Button style
(Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Whiteboard, and White Space themes)
Any changes you make will be applied to other gadgets that use the same settings.