Difficulty
2/5
Creating custom home inspection reports is easy with ScribeWare. But what if you want to change the look of your report and customize it for your business, logo, or color scheme?
ScribeWare has a powerful feature that allows each home inspector the ability to individually customize the entire report with CSS.
What is CSS?
CSS stands for Cascading Style Sheet, and it is the scripting language used to make websites look the way they do.
CSS is far too complicated for us to try to teach you here. Good news: You don’t need to know it. But if you want to learn more, this website is a great place to start: https://www.w3schools.com/css/css_intro.asp
CSS works by applying rules for each detail in your report, from font size and color, to how fast the page moves when you click on an item, to the size and shape of the images.
The possibilities for customizing your ScribeWare report to make it look and feel the way you want are truly endless. All it takes is a little CSS code.
How to edit your report header color with CSS
The colors on websites and in your ScribeWare home inspection report use the hexadecimal code RGB (red, green, blue).
In order to change your report’s header color, you must know what you want to change it to. I like to use this website to help with finding my color of choice: https://rgbacolorpicker.com/
Simply choose the color you want and copy the rbg code.
If you want to match the overlay color of your ScribeWare report to your company logo, you can upload your logo image here https://colorpickerfromimage.com/ and pick one of the colors from your logo to use.
I am using one of the colors from my company logo which is:
rgba(247, 147, 33, 0.34)
Notice that there is a fourth set of numbers after the 3-digit color code. This decimal number is the opacity/transparency setting of your overlay color.
You can set the value to anything from 0.0 – 1.0.
A value of 0.0 will be invisible (no color overlay) and a value of 1.0 will be a solid color (your cover image will not be visible). There are no rules here, so play around with the numbers and see what you like.
I assume you already have ScribeWare installed on your computer, but you can download the latest version here if not.
Adding your CSS to ScribeWare
Once you have your RGB color picked out, open ScribeWare and click the Settings button in the bottom left corner of your software.
Next, click the Advanced tab.
This will open your custom CSS input panel to place your RGB new color choice.
Copy the CSS code below. Be sure you ONLY change the numbers on the last row labeled background-color.
Don’t forget the closing bracket hanging out by itself on the last line. If you miss that one character, this will not work!
There is no “save” button. ScribeWare saves your work automatically every few seconds.
.header-color:before {
position: absolute;
content: ”;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(247, 147, 33, 0.34); /* Header overlay color here */
}
Test your changes.
After you have your new CSS code pasted in place, test your changes with the Preview Report button.
Your new color should show up across your report header if you did everything correctly.
If you do not see your changes, you’ll want to look at my example above and make sure you have every character EXACTLY the same. It’s easy to accidentally delete a comma, semi-colon, etc.
Note: This has to be done using the PC or Mac software. The mobile app doesn’t have the ability to perform custom CSS modifications to ScribeWare.
The great thing about being able to customize your report this way is that if you want to undo any changes, just delete the code you placed in the custom CSS box.
ScribeWare will default back to the stock style sheet when there is nothing added in the Advanced tab. You can not cause permanent damage to anything if you mess up.
One last thing: it is a good habit to mark up your code so that if you get deep into customization, you can keep things straight. Before each section of custom CSS, I like to place a note for myself about what that section is for.
With CSS you can use this line at each section, and simply change the text inside the asterisks.
/* Change this text as needed- do not delete the slashes or asterisks */
Ben Hendricks
I have been a home inspector in Louisville, KY for the past 15 years. I also dabble in web design and customizing Scribeware for fun. Please feel free to reach out if I can help you customize your report.
