Customization & Styling

Changing how the Connect Widget looks

Optional Properties

Additional Connect Widget display settings are available out of the box by specifying the following props:

• data-override-connect-text - Overrides the default "Connect" button text so you can customize to anything you'd like.

• data-show-balance - (boolean) displays the ETH balance of the user's wallet next to their name.

• data-show-chain - (boolean) displays a network connection indicator to the left of the button text (e.g. green for mainnet) when true.

• data-always-open - (boolean) whether to always show all connection options (rather than user hitting "connect" to open the menu.

Here's an example of styling the Connect Button by data-show-chain, and data-show-balance.

<div
  data-widget="m-connect"
  data-show-chain="true"
  data-show-balance="true"
  data-client-id="<your app client id>"
  data-app-name="<your app name>"
  data-network="<your desired network's chain id>"
></div>

Once the user successfully connects you can see the additional UI elements rendered (default styling).

It's also important to note that when the user is connected and clicks on their name, a dropdown will appear displaying a Disconnect option.

Custom CSS

By default the Connect Widget uses a standard html button style, however, we've built the widget to allow custom CSS styling as desired to fit the look and feel of your website or application. Here's an example of how to add custom CSS styling and button text upon installation. Inspect the comments in the HTML and CSS files for more information.

CodePen

Open in a new window to see more clearly

Manifold CSS Variables

This section assumes you have basic HTML and CSS knowledge.

You can also customize the Connect Widget (>= 2.1.0) using the Manifold CSS variables.

The following list of variables are those that have an effect on the Connect Widget:

Connect Widget Overrides

#m-connection {
  /** overrides of existing shared variables */
  --manifold-border--radius: 10px;
  --manifold-border--color: var(--manifold-text--color--body);
  --manifold-text--font-size--body: 16px;
}

Theme

• --manifold-theme-color--primary: background colour for the widget's buttons on hover.

• --manifold-text-color--primary: text colour for the widget's buttons on hover.

Text

• --manifold-text--font-family--body: affects the font-family of the widget.

• --manifold-text--font-size--body: affects the font-size of the widget.

• --manifold-text--color--body: affects the default colour of the widget text.

Border

• --manifold-border--color: colour of the border around the widget's buttons. By default, set to the same colour as the text.

• --manifold-border--width: width of the border around the widget's buttons.

• --manifold-border--style: style of the border around the widget's buttons.

• --manifold-border--radius: radius of the border around the widget's buttons.

Other

• --manifold-element--color--background: affects the background colour of the button.