Styling your StoryFAB

1. Introduction

In this guide, we’ll show you how to customize the look and position of your StoryFAB using CSS. You’ll learn how to change the button colors, background colors, and adjust where the FAB (Floating Action Button) appears on your page. Let’s dive in!

2. Changing the Button Color

To change the background color of the StoryFAB launch button, change the hex code value of the background-color property as shown below:

/*button color & shadow*/

div.sfwidget > .btn {
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  -moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  background-color: #000000 !important; /*button background color*/
  color: #ffffff !important; /*button text color*/
  transform: scale(1.0);
  margin-top: -20px !important;
}

In this example, we selected the button element with the class btn in the div with the class sfwidget and set its background color to black (#000000). Again, you can use any valid color hex code value to suit your design requirements.

3. Changing the Button Text Color

To change the background color of the StoryFAB launch button, change the hex code value of the background-color property as shown below:

/*button color & shadow*/

div.sfwidget > .btn {
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  -moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.49);
  background-color: #000000 !important; /*button background color*/
  color: #ffffff !important; /*button text color*/
  transform: scale(1.0);
  margin-top: -20px !important;
}

4. Adjusting the Position of the StoryFAB

The StoryFAB component default location is the bottom right corner of the browser viewport with a high Z-index value set to have the button floating above all other components on the web page. The Z-index property determines the stacking order of positioned elements on a webpage.

In the context of a StoryFAB (Floating Action Button), the common maximum value for z-index is often set to a high positive integer to ensure that the FAB remains on top of other components and content on the page. The exact value might vary based on the specific design and layout requirements of the application, but it is typically a large number, such as 9999 or even higher. Elements with a higher Z-index will appear on top of elements with a lower Z-index. To adjust the position of the StoryFAB, you can edit the values for the .sticky-fab class selector:

.sticky-fab {
  position: fixed;
  z-index: 10;
  bottom: 12rem;
  right: 1rem;
}

In this example, we selected the element with the class sticky-fab and set its z-index to 10. This will place the element above elements with a default Z-index (usually 0) but below elements with a higher Z-index. If you need to set the position higher on the page most modern browsers will accept values up to 2147483631. Additionally, you may adjust the bottom and right values to your desired position on the page.

NOTE:

If you don't want the StoryFAB to float above other elements and would prefer to nest it in another static element of the page, you can remove the sticky-fab class declaration from the StoryFAB widget division (highlighted below).

<!--StoryFAB WIDGET-->

<div class="sfwidget sticky-fab btn-open">
  <img src="[URL of Animated GIF]"
       style="width: 150px; height: 150px; border-radius: 50%">
  <button class="btn btn-open">💬 [BUTTON LABEL TEXT HERE] </button>
</div>

5. Conclusion

Congratulations! You have learned how to change button colors, modify background colors, and adjust the position of StoryFAB elements using CSS. These techniques are essential for customizing the appearance and layout of your webpages. Remember to use CSS classes or IDs to target specific elements, and experiment with different colors and Z-index values and locations to achieve your desired visual effects. Happy storyfiling!

1. Introduction​

2. Changing the Button Color​

3. Changing the Button Text Color​

4. Adjusting the Position of the StoryFAB​

NOTE:​