Customizing Tropy's UI Styles

#1

If you want to change or adjust Tropy’s default styles you can do this easily by placing a custom stylesheet (style.css) in the user data folder.

  • First you need to find your user data folder. The easiest way to do this, is to select Help > Show Log Files and go up one folder (the user data folder is the one containing the log folder, e.g. on macOS this would be ~/Library/Application Support/Tropy/).
  • Paste one of the stylesheets below into this folder.
  • Restart Tropy.

If you need a combination of custom styles, open the style.css files in question in a plain text editor and copy all the styles into one style.css file. Modifications in style.css will applied regardless of which theme you are using. If necessary, you can add a style-light.css or style-dark.css file; these will only be active for the respective theme.

As a word of caution, future Tropy updates may render custom styles non-operational.

More Tag Colors and Arabic Font Change
"Skipping" a line with line numbers in a note
#2

Full width notes in text editor

style.css (281 Bytes)

#3

Smaller text editor font size

style.css (58 Bytes)

#4

Larger text editor font size

style.css (58 Bytes)

#5

Full width notes and denser layout in text editor

style.css (595 Bytes)

#6

Is there a way to add paragraph indent?

Also, what does it mean: “As a word of caution, future Tropy updates may render custom styles non-operational.” - I have now converted all of my transcriptions into smaller fonts. Does this mean that I will no longer be able to read them? Or just that I won’t need a css line because the interface will allow users to simply switch font size, like you would on a basic text program.

Thanks!

#7

No, there is no way currently. But we are planning to add indentation shortcuts at least, so stay tuned.

Do not fear about your transcriptions, the word of caution refers only to the styles, so you might be either able to use the interface to change a formerly hard-coded style or you have to update your customs styles. We just want to raise the awareness that those hacks above might not work in future Tropy versions and that they are basically ‘as is’.

#8

Hello,

Could you help me increase even further the amount of space I have inside the note-pad? I’d like to decrease the minimum width of the panel-group and the horizontal and vertical padding of the prose-mirror-container.

FYI, I’m already using a custom stylesheet with the following contents:

.ProseMirror,
.editor .placeholder {
font-size: 17px;
}

.horizontal .prose-mirror-container,
.horizontal.numbers .prose-mirror-container,
.horizontal .editor .placeholder {
max-width: none;
}

.horizontal .prose-mirror-container,
.horizontal .editor .placeholder {
width: 90%;
}

.horizontal.no-wrap .prose-mirror-container {
padding: 0 5%;
}

.vertical-rl .prose-mirror-container,
.vertical-rl.numbers .prose-mirror-container,
.vertical-rl .editor .placeholder {
max-height: none;
}

.vertical-rl .prose-mirror-container,
.vertical-rl .editor .placeholder {
height: 90%;
}

.vertical-rl.no-wrap .prose-mirror-container {
padding: 5% 0;
}

#9

Hi,

the minimum width of the panel-group is based on the max width of the photos inside the photo panel, it’s not trivial to change this size without breaking something.

The horizontal padding you can decrease by changing your 90% values towards 100% and the 5% values towards 0%. E.g. 95% and 2.5% (width + 2 x padding must be 100%).

The vertical padding adapts to the available space programatically, but you could override them with fixed pixel values like this:

.horizontal .ProseMirror {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.vertical .ProseMirror {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
#10

OK, this works well. Thank you, @flachware.

#11

Hide horizontal rules (lines) in the editor, can be used to create space between paragraphs that is excluded from line numbering:

.ProseMirror hr {
  border-top-color: transparent !important;
}

style.css (64 Bytes)