Customizing the login icon

With certain themes (Building Blocks, Kaleidoscope, and Tinted Tiles), the public login option appears as an icon of a person, without any text. When you click the icon, a login form appears.

Using CSS code, you can change the color of the login icon, and change the login icon to a Login button.

To apply CSS code to your Wild Apricot site, go to the Website module and click the CSS option at the top of the screen. 

On the screen that appears, enter the code in the Editor panel, then click Save to preview your customization within the preview area on the right. When you are finished making your changes, click Cancel to close the screen.

Changing the color of the login icon

You can specify the foreground and background color of the login icon, insert the following CSS code...

/* Login button */
.WaGadgetLoginButton .loginLink, .WaGadgetLoginForm .loginLink {
    background: #f37b1c !important;
    color: white !important;
}
/* Login button on hover */
.WaGadgetLoginButton .loginLink:hover, .WaGadgetLoginForm .loginLink:hover {
    background: #f38c1c !important;
}
/* Logout button */
.WaGadgetLoginButton .authenticated .loginLink, .WaGadgetLoginForm .authenticated .loginLink {
    background: 0 !important;
    color: #f37b1c !important;
}
/* Logout button on hover */
.WaGadgetLoginButton .authenticated .loginLink:hover, .WaGadgetLoginButton .authenticated .loginLink.hover, .WaGadgetLoginForm .authenticated .loginLink:hover, .WaGadgetLoginForm .authenticated .loginLink.hover {
    background: #f37b1c !important;
    color: white !important;
}

...then change the background color from #f37b1c to whatever color you want, and change the foreground color from white to whatever color you want. Note that you can specify the foreground and background colors differently for the regular state and for when the pointer hovers over the icon.

Changing the login icon to a button

To change the login icon to a button with a Login label, apply the appropriate CSS code for your theme.

.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink:before {
   font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink:before {
font: normal 25px/50px 'Tahoma';
   content: 'Login';
}

.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink{
width: 150px;
height: 50px;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink:before{
font: normal 25px/50px 'Tahoma';
   content: 'Login';
}

.WaGadgetLoginButton .authenticated .loginLink, .WaGadgetLoginForm .authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginButton .authenticated .loginLink:before, .WaGadgetLoginForm .authenticated .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginButton .loginLink, .WaGadgetLoginForm .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginButton .loginLink:before, .WaGadgetLoginForm .loginLink:before {
font: normal 25px/50px 'Tahoma';
   content: 'Login';
}