🏅Customizing the Look of the Report

Scribers can use Cascading Style Sheets or CSS coding to customize the look of their finished reports

The photos below show what can be done. The text below the photos can be copied and pasted into ScribeWare to customize the finished report. To insert copied text go to Settings and the Advanced.

#1

.header-color:before {

background-color: rgba(207, 207, 207, 0.7); /* HEADER COLORS */

#2

#header {color: rgb(0, 0, 0,); /*black*/

font-weight: bold;

}

___________________________________________________________________________________

#3

#header {color: rgb(0, 0, 0,); /*black*/

font-weight: bold;

}

#4

#header .for {

border-top: none;

border-bottom: none;

}

#5

#summary .section > h2 { font-size: 25px; font-weight: 500; /* determines weight */ }

#6

div.section > div > h2 { font-size: 25px; font-weight: 500; /* determines weight */ }

#7

#important-info h2 { font-size: 25px; font-weight: 500; /* determines weight */ }

#8

@media print {

#report .section {page-break-after: always;}

#full-report {page-break-before: always;}

}

#9

@media print {

#report .section {page-break-after: always;}

#full-report {page-break-before: always;}

}

#10

#summary ul, #summary ul li, #summary .chapter-name {border-color: inherit;} #summary .chapter-name:after { content:' '; display: block; border-bottom: 2px solid; border-color: inherit; }

#11

#summary li {margin-top: 6px;} #summary ul {border-color: inherit;} #summary > div > ul > li { background: rgba(240,237,237, 1); /* Or use a partially transparent background to make the modifier background color lighter: rgba(255,255,255, 0.8) or darker: rgba(235, 235, 235, 0.6) / padding: 15px; border-radius: 05px; border-width: 0.25px; border-style: solid; border-color: inherit; / Dark color of modifier */ }

#12

#summary ul {border-color: inherit;} #summary div > ul > li:not(:first-of-type) { border-top-style: solid; border-width: 2px; border-color: inherit; } /You likely would not use this if you are using #10/

#13

#summary ul li ul li, #report ul li {list-style-type: none;} /* Can also change the bullet style ("circle", "square", etc.) NOTE: this change will not be reflected in the repair request PDF */

#14

.observation-media:before {

content: "🔹🔹🪷 IMAGES, & DIAGRAMS🪷🔹🔹"; /*This can be anything you want but going longer should be avoided*/

padding-bottom: 15px;

width: 100%;

display: flex;

font-weight: bold;

font-color: inherit

justify-content: space-around;}

#15 - This CSS Will Place The Photo Below The Text When There is Only One Photo

.make-inline {flex-direction: column;}

.make-inline > div:first-of-type > br:first-of-type {display:none;}

The first line puts the image under the text; the second line starts the text just after the observation label instead of starting it on its own line.