From the Thrive Dashboard, you can very easily customize notifications and adjust how the "success" or "error" notifications are displayed.
In this article, we will have a look at where you can find these notifications and how you can change their aspect in order to match your website theme.
Access the Notification Toasts
The "Notification Toasts" are part of the Global Elements card, that can be quickly accessed from your Thrive Dashboard:
Here, scroll down to the bottom of the page and look for the Global Elements card:
This is where you can manage and customize global elements, such as content templates, symbols, blocks, and so on. The changes you make here will be applied to all elements of the same category, wherever they appear on your website.
The notifications are located under the "Notification Toasts" tab:
Here, you will be able to access two sets of notifications: the default and custom ones:
The default templates cannot be modified, but can be enabled throughout your website from the available toggle:
When you do that, this set of notifications will be listed as the active one and marked as such:
If, on the other hand, you would like to use the custom templates, then you have to first apply this set:
Next, hover over the notification cards and click on the "Edit template" button that appears:
Editing the Custom Template
This will trigger the Thrive Architect editor:
By default, you will start customizing the "Success message!" notification:
However, as you know by now, there are multiple types of notifications that can be displayed on your website. There are the "success" notifications, the "warning" ones, and lastly, the "error" notifications.
You will be able to switch between states and choose which one to edit simply by clicking on the "Edit design" button of the left sidebar:
Then, from the state panel that appears on the lower side of the screen, simply select the notification you would like to edit:
After you do that, you can go ahead and use the options available in the left sidebar if you want to adjust the layout, position, background, borders, and corners, etc.
However, if you want to return to the "Main Options" and use the options available there, then you first have to click on "Done":
Using the Main Options
Now you can go ahead and start using the "Main Options" to further customize the notification:
In this example, I will be customizing the "warning" notification, but keep in mind that the same options apply to all notification types.
Use the available table cells to decide where to position the notification:
You will notice that depending on the selection you make here, you might have access to several additional settings right under the main table:
If the notification is displayed in the top corners of the page, then you will be able to adjust the top and side spacing; if the notification will be displayed in the lower part of the page, then you will be able to adjust the bottom and side spacing.
Use the numerical field available here to adjust the top spacing for the notification:
Similarly to the top spacing, you can adjust the space to the side by inserting a number of pixels in the next available field:
If the notification is placed somewhere in the center of the page, then you will only have the option of adjusting the side spacing:
And lastly, if the notification is perfectly centered, then no other adjustments can be made in terms of spacing:
Open the drop-down list from here to decide the direction of the animation:
You can then save and preview the page and see how it would look like on the front end:
Show for (ms)
Use the next available tools (either the slider or the numerical field next to it) to decide how much time should the notification be visible on screen:
Reset style to default
This button will allow you to revert all changes and return to the default settings:
Use the Rest of the Options
Naturally, besides the options available in the first section of the left sidebar, you can still go ahead and use the remaining ones. You just have to click on the desired section to expand it:
For example, this is how the notification would look with inner and drop shadows applied to it:
This is how easily you can access and customize the notifications for your website.
I really hope you found this tutorial useful. You can also check out other tutorials of this type, available in our knowledge base if you want to learn more about Thrive Themes.
Lastly, don't hesitate to rate this article with a smile below if it was helpful :)