Skip to main content
Web Central Quarterly Enhancements Webinar | Watch Now...

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Configure Text Styles in a Fancy Button

  • Updated:

When you build a Fancy Button, you have the option to configure the Text Styles.

 

There are two Text Style view states:

  • Normal: State of the Fancy Button text when not hovered over
  • Hover: State of the Fancy Button text when hovered over

 

There are two tabs that help you modify your Text Styles:

  • Text: Modify font family, style, color, size, alignment, and underline options
  • Advanced (Adv.) Styles: Use HTML to create further specifications for text, hover, focus, and active display styles

 

Text

  • Normal/Hover: Normal edits the default view of the button, Hover edits the hover state of the button
    configure_text_styles_in_a_fancy_button_normal-hover.jpg
  • Font Family: Choose a font
    configure_text_styles_in_a_fancy_button_font_family.jpg
  • Style: Choose a style
    configure_text_styles_in_a_fancy_button_style.jpg
    • Note: You must choose a font first before you can choose a style. This is because the style options depend on the font family you choose.
  • Color: Choose a color with the drop-down
    configure_text_styles_in_a_fancy_button_color.jpg
  • Size: Specify the size in em units
    configure_text_styles_in_a_fancy_button_size.jpg
  • Alignment: Choose to align text left, right, or center
    configure_text_styles_in_a_fancy_button_alignment.jpg
  • Underline: Select to mark text as underlined
    configure_text_styles_in_a_fancy_button_underline.jpg
  • Shadow:
    configure_text_styles_in_a_fancy_button_shadow_1.jpgconfigure_text_styles_in_a_fancy_button_shadow_2.jpg
    • Note: Text Shadows are supported by modern browsers (like the one you are currently using), but in IE9 or below they will not display.
    • Color: Select a shadow color from the drop-down
    • Blur Radius: Choose how much, in px units, to blur the shadow
    • Offset X: Horizontal shadow offset; a positive value puts the shadow on the right side of the box, and a negative value puts the shadow on the left side of the box
    • Offset Y: Vertical shadow offset; a positive value puts the shadow below the box, and a negative value puts the shadow above the box

 

Adv. Styles

configure_text_styles_in_a_fancy_button_adv_styles.jpg

  • Choose to customize, in HTML, display specifications for different actions (how the text will appear when hovered over, focused, active, etc). 

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

3 comments

Date Votes
  • John Mark Cagle

    What about adding New Text Styles? How do you configure your fancy button to include those instead of the Default Text Style?

    1
  • Coty Woodside

    Bump to John's comment.   How do we add New Text styles to the button?  Been working on one for some time and can't seem to add, only edit what is there in the default.

    0
  • Jason Harwell

    Bumping both John and Coty's comments - it seems like it's impossible to actually use any of the additional text styles I create.

    0

Please sign in to leave a comment.