Skip to content

Define Button Colors (Theme V2)

Custom Button Colors

  • Customizing your button colors allows you to add a branded look and feel to all of the buttons throughout your CrowdFiber user experience.
  • This step will allow you to establish two custom button colors:

  1. The Primary Color

    • The color of your buttons when a CrowdFiber web page loads.
      define_buttonv2(1).png

  2. The Hover Color

    • The color of your buttons when a cursor hovers over a button on a CrowdFiber web page. define_buttonv2(2).png

How to Customize Your Button Colors

Part 1) navigate to your button settings

  1. Click the Settings link located in the left-hand rail of the Admin Dashboard.
  2. In the Settings drop-down menu, click Themes.

define_buttonv2(3).png
3. On the following Themes page, in the Name column, locate the row that displays a blue oval (the blue oval contains the text Default Theme).
4. Click the Actions button located in the far-right-hand column of this row.

define_buttonv2(4).png
5. On the following page, click on the Search elements textbox located in the top left-hand corner of the page.
6. In the Search elements textbox, type the following text: primary

define_buttonv2(5).png
7. In the following search results, click the primary_color link below the Search element textbox.

Part 2) Define Your Primary Color

  • The primary color is typically the most prominent color in your logo.
    • Enter your hexcode of choice into the Element color textbox.

define_buttonv2(6).png

Part 3) Define Your Hover Color

  • The hover color is typically a prominent secondary color in your logo.
  1. Click on the Dynamic CSS template code editor located at the top of the page.

  2. Replace the existing hex code with your hex code of choice in the following three lines of code in the Dynamic CSS template editor. Paste only the numbers of the hexcode. Do not erase or add an additional number sign (#) to any line of code in the Dynamic CSS template editor.

    i. Line 15

    ii. Line 27

    iii. Line 35

  3. Click the blue Save button located in the bottom left-hand corner of the screen.

define_buttonv2(7).png

Part 4) Review Your New Button Colors

  1. Visit the Home Page of your CrowdFiber site.
  2. Refresh the Home Page to view your new button colors.

Click here to continue to Embed a Search Widget