Skip to main content
Customizing The Monarch Design

Monarch comes with some great design customization options for each integration area.

Updated over a year ago

An Overview Of The Monarch Design Settings

Monarch is packed full of design options so that you can fully customize your Sharing and Follow buttons.

Combining button Shape options, Icon Placement, Icon Spacing, Button Hover Effects, and Unlimited Color Options, the design possibilities are countless.

Hover Styles

design hovers

Sidebar Hover Styles

Choose from 5 hover effects for your floating sidebar. These hover effects become even more diverse as you mix them with different button shapes and spacing, as described below.

Inline Button Hover Styles

Choose from 4 hover effects for your Inline Sharing and Following Buttons. Again, these hover styles become more unique when combined with other design settings.

Icon Shapes

design shapes

Monarch comes with three different button shapes. You can choose for your buttons to have:

  • Squared Corners,

  • Rounded Corners,

  • Or be Circles.

If you choose Circle Shapes, your network labels and counts will appear outside of the button in contrast to the rectangular shapes, including network icons, labels, and counts within the button.

Icon Orientation

design icon-orientation

Another great design option is your Icon Orientation.

This doubles the design possibilities and can affect your custom designs' outcome.

  • If you choose Left Orientation, your button content will appear to the right of the network icons.

  • If you choose a Centered Orientation, your button content will appear below your network icons. Please have a look below for info about button content.

Icon Spacing

design spacing

This setting lets you add spacing between your buttons or remove it entirely for two different looks.

Button Content

design content

Display Follow/Share Counts

This setting lets you display the Share or Follow Count alongside the Network Icons. This is a great way to show off how popular a page or social profile is.

Minimum Count Display

Sometimes, content is new, and profiles are young. This setting lets you set a minimum display count so that a count will not display if it is under your defined threshold.

Display Network Labels

This setting lets you display a button label. By default, this is the network name, but it can be customized to say things like Pin This, Tweet This, or Follow Us.

Column Display

design columns

Color Settings

design colors

Use Custom Colors

Monarch uses the default network colors by default, but for a more custom approach, you can select your own button colors. If an option below is not defined, that element's default setting will be used.

Background Color

This color picker will define the background color of your buttons.

Hover Background Color

This color picker will define the background color of your buttons when the user hovers over a button.

Icon Color

This color picker will define the color of your buttons' icons.

Icon Color

This color picker will define the color of your buttons' icons when the user hovers over a button.

Did this answer your question?