Customizing Your Site

Styles

Strata's admin colors can be customized to better match your site/brands colors. Strata will look for a CSS stylesheet within your site's public "css" directory called strata.css. So start by creating a new stylesheet in public/fictionary/css/strata.css, replacing fictionary with the ID of your site. Feel free to use whatever build process you prefer.
In your strata.css file you can overwrite the CSS variables that Strata uses to define various colors and styling.

For example if you wish to change the color of the topbar, then add the following to your strata.css file.

1:root {
2    --strata-topbar-bg-color: blue;
3}

Tip: If you're using Tailwind to compile your stylesheets then you make use of the theme() function from Tailwind.

1--strata-topbar-bg-color: theme('colors.blue.500');

Available variables

Name	Description
--strata-topbar-bg-color	Background color of the topbar
--strata-topbar-text-color	Text color of the topbar
--strata-topbar-search-bg-color	Background color of the search field in the topbar
--strata-topbar-search-text-color	Text color of the search field in the topbar
--strata-topbar-search-placeholder-color	The placeholder color of the search field in the topbar

States

To target the topbar when it's in the active state you can do the following:

1.topbar-active { 
2    --strata-topbar-bg-color: theme('colors.pink.600');
3    /* ... */
4}
5 
6.topbar-active .search { 
7    --strata-topbar-search-bg-color: theme('colors.white');
8    /* ... */
9}

Logo

You can also replace the Strata logo seen in the topbar in Strata by having a Blade file in views/[TENANT_ID]/strata/logo.blade.php. In this file you can place whatever you want to show instead of the Strata logo and tenant name.