Design Settings » Button Colors

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000046630

Button Colors

This article reviews the available button colors for the website, the colors set here will affect all the buttons with that specific CSS class, across the entire website. The available CSS classes are: Primary, Success, Info, Warning, Danger, Default

To edit these colors navigate to

Settings
Design Settings
General
Button Colors

Visual Guide of the Button Colors

Button Corner Style

The available options are Rounded, Square, or Circle corners:

Rounded Corners

Square Corners

Circle Corners

Primary Button Background & Primary Button Text

Success Button Background & Success Button Text

Info Button Background & Info Button Text

Warning Button Background & Warning Button Text

Danger Button Background & Danger Button Text

Default Button Background & Default Button Text

Bookmark Favorites Button Settings

These settings are part of the Bookmark My Favorites Add-On.

Enable Bookmark Counter

Favorite Icon

Favorite Icon Active Color

Favorite Icon Disabled Color

How To Identify What Button is Used in the Front-End

Buttons are used throughout your site for a wide variety of functions, making it difficult to document every instance where a specific button appears. Instead of attempting to list every location, this guide focuses on helping users identify which button is being used by examining its class in the front end. By inspecting a button's class, it can be determined which color scheme or design settings apply to it.

For those unfamiliar with the inspect tool, this resource provides a quick overview:

How to Use Inspect Tool in Any Browser

Primary Button

The class btn-primary is applied to this button. Below is an example from the front end:

Success Button

The class btn-success is applied to this button. Below is an example from the front end:

Info Button

The class btn-info is applied to this button. Below is an example from the front end:

Warning Button

The class btn-warning is applied to this button. Below is an example from the front end:

Danger Button

The class btn-danger is applied to this button. Below is an example from the front end:

Default Button

The class btn-default is applied to this button. Below is an example from the front end: