AE Connect: Basic CSS Styling

AE Connect is designed to be flexible and can be styled to match your website and branding. There are a few ways to customize the look and feel of your sign-up and login forms. One of those ways is using CSS. Here are a few examples of basic customization using CSS:

Sign-Up Form

Social Sign-Up Links

Example: Basic CSS styling of sign-up form

By assigning a CSS class to the form and submit button, you can style it using CSS. Here’s an example that customizes the form fields and submit button.

Adjust the HTML of the form to add CSS classes:

<form id="email-signup" data-ae-register-form="email" action="https://myfairsharedev.wpenginepowered.com/thank-you/" method="POST">
<input type="text" placeholder="Name" name="firstname" required>
<br>
<br>
    <input type="text" placeholder="Email" name="email" required>
<br>
<br>
  <input type="password" placeholder="Password" id="psw" name="password">
<br>
 <br>
 <p style= "color:#8f8f8f" ><em>By creating an account, you agree to the contest terms and conditions and our <a href="https://myfairshare.io/privacy-policy/">privacy policy.</a></em></p>
<button type="submit" class="signupbtn">Sign Up</button>
</form>

To add CSS in wordpress, click the View Page button in the upper right.
Select Customize from the top menu.
Select Additional CSS from the side navigation. Any changes you make to the CSS here will be previewed real-time on the page.

Here’s the CSS:

/* Form and input fields */

  input[type=text], input[type=password] {

  padding: 15px;

  margin: 5px 0 22px 0;

  border-width: 1px 1px 1px 1px;

  border-color: #e4e2ed;

  border-radius:10px;

  background: #ffffff;

}



/*Submit button style*/

.submitButton{

  color: #ffffff;

background-color: #bc1d52;

border-style:none;

border-radius:10px;

padding: 10px 18px 10px 18px;

font-family:"lalezar";

font-size:24px;

  margin-top:20px;

  cursor:pointer;

}

.submitButton:hover{

  background-color:#a41746;

}

And here’s what it looks like on the frontend:

Example: Basic CSS styling of social sign-up links

By assigning a CSS class to the social sign-up link, you can style it using CSS. Here’s a basic example that adds the Discord and Spotify logos and colors, as well as a color change with mouse hover:

Adjust the HTML of the links to add CSS classes:

<p><a href="#" class="discordbtn" data-ae-register-link="discord"><img src="https://myfairshare.io/wp-content/uploads/2024/03/Discord-Logo-White.png"  style="width: 30px; vertical-align:bottom; margin-right:20px">SIGN UP WITH DISCORD</a>
<br>
<br>
</p>
<p><a href="#" class="spotifybtn" data-ae-register-link="spotify""><img src="https://myfairshare.io/wp-content/uploads/2024/03/Spotify_Icon_RGB_White.png"  style="width: 30px; vertical-align:bottom; margin-right:20px">SIGN UP WITH SPOTIFY</a></p>

To add CSS in Wordpress, click the View Page button in the upper right.
Select Customize from the top menu.
Select Additional CSS from the side navigation. Any changes you make to the CSS here will be previewed real-time on the page.

Here’s the CSS:

.discordbtn {

  background-color: #5865F2;

  color: white!important;

  font-family: "lalezar";

  font-size: 24px;

  padding: 10px 15px 10px 15px;

  border-radius: 3px;

  cursor:pointer;

}

.discordbtn:hover{background-color:#4653e0; }





.spotifybtn {

  background-color: #1DB954;

  color: white!important;

  font-family: "lalezar";

  font-size: 24px;

  padding: 10px 18px 10px 18px;

  border-radius: 3px;

  cursor:pointer;



}



.spotifybtn:hover{background-color:#159d45; }

And here’s what it looks like on the front end:

Looking for more advanced customization? Read: AE Connect: Advanced Setup and Customization