Collection of custom CSS

Features
1

Hi friends! I’ve started to make little visual tweaks via the custom CSS files (userstyle.css and userchrome.css), which I figured I’d share in case others have similar visual taste as me. You can find them in this GitHub repo:

Before:

image
image3840×2298 876 KB

After:

image
image3840×2308 880 KB

I’ll continue to evolve these styles over time. Right now, the primary change is just the typography of the app, but ultimately I intend to do a fuller redesign to make the app more sleek. If what I make is good, I’ll consider trying to merge it into the main project, but for starters I’ll just leave it in these custom files.

I’d love to see what you all have done with the custom CSS too! Perhaps we can borrow from each other. I propose we use this thread to share styles with others.

16 Likes
2

The app is in need of a design refresh, and these custom styles are indeed a good way to experiment with various styles, and then eventually apply that to the main app.

Many things have been mentioned so far, like removing some borders or lines, making the icons less prominent (light gray, or smaller), making some text bigger, etc.

4 Likes
3

Apart from restyling headings (h1, h2…), I have made the table of contents smaller and placed inside a scrollable, limited in size box. Following your example, I’ve placed my userstyle.css into a Github gist. Good way to backup also!

3 Likes
5

Version?

6

Hello, @laurent. The version of Joplin in my above screenshot is 1.0.178 (prod linux). It’s running on Arch Linux, installed via AUR, I hadn’t upgrade and test my stylesheet with 1.0.179.

7

It appears your pastebin link is not working

8

Hello, @MRog40. I have discovered that yesterday, and it seems that I can no longer edit my original post to update the pastebin URL anymore. It was my first post on discourse, I’m not quite familiar with the forum settings and its usage.

Anyway, I’ve uploaded the stylesheet to Gist, and here it is, which also includes the userstyle.css part. Since Gist provides stable URL even with updated paste, I think the URL will unlikely to be changed in future.

If you still have questions about my stylesheet or the setup, please PM me, thanks.

9

@devonzuegel thanks for the inspiration. I’ve added a comment in the other thread, since that one was created first.

1 Like
10

Oh cool! Darn, I must’ve missed that one when creating this thread. Thanks for pointing it out.

12

Joplin 1.0.179 (prod, darwin)

13

thanks a lot, TOC is really pain in my … so I need this.

Thanks

14

thank you very much for sharing!

15

I thought I would throw mine in, I starting with the whole markdown, but there was so much I could do with HTML, and I thought I would go with it.

Joplin-custom_css-version-1
Joplin-custom_css-version-12961×2120 291 KB

Here is the userstyle.css

/* For styling the rendered Markdown */
* {
	margin: 0;
	padding: 0;
}

body {
    font-size: 62.5%;
    background-color: #222222;
}

p, li {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em Tahoma, sans-serif;
	color: #FFFFFF;
	height: 0px;
}

h2 {
	font: 1.8em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h3 {
	font: 1.5em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h4 {
	font: 1.2em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h5 {
	font: 0.9em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h6 {
	font: 0.6em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: #333333;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
}

#page-wrap #inside {
	margin: 10px 10px 0px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
	
#main-content {
    padding-left: 20px;
    padding-right: 20px;
	padding-top: 20px;
}
	
#header {
    background: #555555;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: #e9ffd9 solid;
    color: #e9ffd9;
    margin: 10px;
}

#footer {
	background: #555555;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple, b-construction, b-error, b-success, b-notice, b-warning, b-help {
    width: 90%;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    text-align: left;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
    color:#555555;
}

b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0;
    color: #333333;
 }

b-green {
    border-color: #5fa04e;
    background-color: #c5e5b4;
    color: #5fa04e;
} 


b-red {
    border-color: #f65354;
    background-color: #fad3d4;
    color: #f65354;
}

b-blue {
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
}


b-purple {
    border-color: #af74e8;
    background-color: #ead9fb;
    color: #af74e8;
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5;
    color: #ed5393;
}

b-construction {
    padding-left: 60px;
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
    background: #faf3d3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEa0lEQVRYR+2XX2xTVRzHP/f2dhuLuohuGB+MDDBAtrZrVwZhmBDJovEBGKED8QVi5h50IhGiifpiiEQNTMMfs/i2h12YgxjUCfiigagxJGwy0tFR6P6xu/9j0HXt/WNO2+E2WBPXJrxwHu7tOd97v+dzfzm/3zmVeMRNesTz8xhAREC5e4qL2TbKRMe0wDATd9FsMigySMlYCS1t3YKoxV95PsqF7VP6r4XjTZM/kK3EWFFwj6LlAxBTwJL4szOf0PAT5NgNJCwK8+9StGzh+tJnJihePkLkwhYWbSdPAOQbzQw0GL/z9VefItvsbCu5yUfbOyEKyPDJqZWcbV1Kjl3HsCQqXcEF6eIDozGD+sN7KRnYjH0bBQKgINaMdin3Wz7+ooXcHJmoofC6M8gHlZchBtjhy2YPP7ctI0sxiOrygvSfWguRrAhbtu/hvSVbkbawJA4w2YSWs3YbR47f4vzV1WQpJlO6zKvOTvZW/gG6WClQd3od51pXxCEWoh9pXsfZy4Ws3/AKnxXtQdqcBLh3Ci3X5YWpvzl6ppwLbaux2wwiuo2K4g5qK39LQNjh6JkNXGhbldQVKor9/0uvayrn6h0f322snQPgXAzGCGRD/fcv03LFiYXMZDSbTY5r7Pf9CCIzsuFE0yZ+ueJADERi9vl1yWIqqlDhaGOf71zifTscO7uDmqUqytZEBPJv1HO6YHFW+V1pGXZ5imzFQFZkcq2bYIChQ0xPpKbNBlk2kBSIlzGRlql0C0bNFRi6iWnJINvII0D/sHHxxbeoFBZPAi8Az79z4PB5r3sVHR0BwhGdus/3vUZiGabT7O8eONxS6l6N3x/gXkTnm0PvVwB9QFe8EAGLgOcOHqq7Xup20hEIEA5H+HB/7UpgNJ3ZgacPHqrzz/F9CegHJmfuBQXHjp/QvB4v/s4bhCfGqKl5ewkwkCZASt9ZAA0NDdqasrUEAkHGxwbZtevNjACk8p0FcPLkSc3rLSMYCjEyqOHz+TICkMp3FoCqqpqndA3dPb0M9vdStWNHRgBUtVHzlJbR3dvLkNaHz1d13/cBgBK3l9taP7d7Quzc+UZGABobGzW3x0u/pqH19eCrSgHgKvEwODRMT1cQh8uDHothmhamaWJZZuK3ZWKZFoa4G6JvxPtiXOjiOUMUDcvCMEwmxoZwuUsZHB6mrztEVSoAZ4mb0dExum4FkeKHgOTB4CGHp3j4/rvMSpbpYcsC0zRwlnjivt2hm6kBHC43dyYmCAU7xYMZKUSqqrbM8Z1/DRQ7XITDkwRvXBcAGSlEqqr65/imBohEonQGrlFVlaksUDUB8DDfB7KgqNiFrsfo8LdnFGA+3wcKkcPpxjAN2v9pnbVY0ijHBaIQzec7EyC/vr7+TF5e3noxWTgcbt+9e/dGYDCNycWrs3zHx8cvVVdXb532nQkwvS0/m0yuYSAE3EkTYKavsBoS2zAwcT+LkxNMb8s5yf6UCASJw1g6ba5vRGzD076P/5o98gj8C6TYsuRhiAJVAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

b-error {
    padding-left: 60px;
    border-color: #f65354;
    background-color: #fad3d4;
    color: #f65354;
    background: #fad3d4 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEKUlEQVRIS7WVW2wUVRjHf2dmu23pdlm20AvQ5aJoEBIDCRIQURFKIuwSIYKJUhFfSDS+GMOTUi8xRl+MiUFNDC/eHrhICypEIgaFJkBSxIZbt7Vrt9vupfdt2Z2Zc8xMsbJsW+oDk8xMzvm+7/875/+dzAju8SXusT7/C3B10zN7paD6oWNHXp3qwqYMuLYhpEqXLkAJjeSfYR4+WT+l2ikl3agJqcrgo7j1LCqZIJMVhM9HWH7iyF3r75rQHtq+T/OV1pWvXojR0gJCx+XWibT0k05n65YdO/z2ZHbdFRB+crOauydE5teTiLIqQKHiXbi8fi7/EWflie8n1Zg0GNm0LV6yYvGsIq2Hgse3ULC2xlls9vRJzEMH6EkXEOse6n7khyOVE+1icsDGrapy13oyp3/C89nRHI2B2iCFFbO5fC3FioZDE+pMGIjWbFHe0Bpc6RhmWxue/YdzATufxlURYKA/TVt0kNU/Hh1Xa9zJWGj7O1pZ6Zv+p5aQDbchYx35gF0hXOXVuFE0t/UynDXfXV1/8K07rRofsG6z8r6wAWKtzqmRsU48n3ybU9v3xFK02fPRDAPLNY0LSYP1Px/P08ubiAefrS94YG6weFkA1RHFSiUxL55j+qmrOYDUgmno1feDYeG2FE1/JekaVg3b0snQ7Yn5gG21yvfcKkZOHEX29qDpbmRrC77zsVzAIu8YQJjgloKG5g52pFM5mjmDrrUbOwsXVVS59W7M4QzYnyqpkOHr+BqjEwKUoXBZ8HdqiKZEf+T5oZ55/yaPAboqAkFrxKz3f1iL8XsjyuVytu8A2lrxnW3PBSz2o1fNd3JsgDAkpULn4PUoAhHaMZhssAvGALGimcpb9xJWuAkMhbKj5i1AXy8F6zZT8vp7DmTog71kvjuA7q8Gw3QAGBJdCkbSWY53xHl5pM/Rdh6J8sA+ysvqpr24CuvKdUBDSTkKsCRkDYyWK8iuXgcgvCUI73R0b2UOQJmKUiU41ZkkOXLz853D/XscQJfmU94v38A88wvoLkd0DGBbFI/h+fgbXEuWOwDz0gUGdm9Fmz5zzCJ7B5gKzZDYTf8qEuWVzKAQiRlzGt3Bx1ZqARcqngKl8gHhG/gaO3J78KAPfc7CPIANKrSguW+QpsGBhEgUzVKe/a+RPXsGobvBMvMB7a34fruzyTPRqwLjAmxIsRJ83dmJSMyarzwf7SJ77hwC255R32+3iHQavH5K3v8UraySgdpNmK3X0H2zx3qgblnkWGVI/Lj4IhpBJHxz2ouCawLiPg0GR/4DmBbCvi2JUIqbl5rByNq/A0RxMeg6hb4KyIweUy072gNb3G3CxVSfbdHoKeqeMbddKQKUe5CWQkqJJQSWVFhKYaGcsbTboyznbSiFtCTmrbhpydF8JImbWSwlI7uH++f9A1ILSN66QmVDAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

b-success {
    padding-left: 60px;
    border-color: #5fa04e;
    background-color: #c5e5b4;
    color: #5fa04e;
    background: #c5e5b4 url('data:image/png;base64,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') no-repeat 10px 50%;
}

b-warning {
    padding-left: 60px;
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
    background: #faf3d3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEeElEQVRIS7WUW2xURRjHf7NnL2ULRaAtIJeWYlAiIDEYMASFCFYDLfESE4wkIiZUiyRqhMQEgRolWAIansCHEoHw0GKkIARQCSFV0gcx2iK0lLSlt+12d9uy7fb0nJkx57RsxJZSHzjJuc3M9//N9/9mRvCQL/GQ9flfgIYjq7dJKWbkvH1682gnNmpAw7crdXDOU6ANYtevMqfgwqhiRzWosWSVTl+6Bm+KCWYb/QnB7ct/Mbfw/APjHzig9Vj+Ds/YiTsnPD0fu+saaC9en0FbdZREZ3zn4xtP7xrJrgcCmg4t15l572KFTiJ8010tbTZh+NKpvVjH/C0jZzEioO3Y6vYxTyzO8I/voPlmCxWhtXg8giXpJ5n+qJfukJ9wbTg0r/DMlPtlMTLg8It6Uu6bWO3fU/zDoqRGe3sHe9bfwp86g9pfm3hy06n76ty3I3x0lU59Jh/D14Tsvsn2I4+5gM7OGM3NtynbBUZgFj2dcZqqwywsPDus1rCNkdL8IpGWsT1t4SKszhp0op4PDmQQDrcTj/fQl+jl/NcTXYDPq6n7vQ0zYX6+YFP5Z/+1alhAx3crdOpz68C+4a4a3dtI7uZWtJJYloWUkot74ogxOXh0P9JOparyDs9u/XmI3pCGaFleuW/a3LxAdg66twHZF0JGLrPqk3RsKVG2REqbS0U1GMEckBKv0FyvjNDenDiVe6gn/99ZDAHESl/XY5fnYTYfR/dHEMKP7rrJ81tnIG0bpSRKKip2N2AEZ7sAJPiE4KeyOtaU9N6jec9P5LtlLf7s2VO9k1qQpglagNbo7hqWbslAOuJKoZXmyldNSYC2NAbQVt9D1dVw49qSnqy7WSQB0X3pebLPLE9750Ps1kto4R2YnQu4xeL3xw2Ia+fWVO4PYwSy3DEOQEhFMGBw5kQ9eEV+3sE7pxxIEtDxRYpOfeMjVF8l2Brt9KpBgBllRYFJd59GKxiXovhlbxeGMR2k7QKwFR4EZrfJ+XMtrDuecLXdR+yb9B2Mz9yZ8sJKVLQatMedqQtQztuirqoWbVnJ+mVnBzE8k+8BOKBgQPDb5RDhSO/B1w73FbiAyA6PTi0oRrafAeFzhZMAx6JEC431cQ5UvOICCpeUMTPTj8c7KWmRkwFSI2yFsCWl5U1sKDWFiO6bcMW/6KXFnmk+dE/YOcqGArpreXX3AmKxKFZ/P8HgGM5+Wo2RMmsIAEvhE4q6G11crYmHRezLFB3cWIQVuoAgANhDAI01t1m/dyKW1Y9t20hbUvJeJ/PnTRkWgCUJGJoT51oRsf3pOvjWx1ihiwjlA+34LtHcrYEGq4cNRZqq+l6UlMyZ5uXItgiGMTVZA+1YNFhsbEmaH47+2IKIFY9vCCx5eSZZHjB7BwGD4tpGKIUQms5b1zhXYbgO5i6D1KAHX2AyWAOryOMAbA1S4dWKv/+M8kdNfGAVRYsfadBKzyQzA2U5G0khlXC/pdIoJ04LtNS4uUmNLfXgsaEdTWxLIm3lbGrCHX1YSjeuO5rI+gcRNZ4/+8w0rgAAAABJRU5ErkJggg==') no-repeat 10px 50%;
}

b-notice {
    padding-left: 60px;
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
    background: #bbe5fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFk0lEQVRIS42We2wUVRTGv3vnsbMPdrstlGctBUqLFEoUYkUKahUtiH8gQomaSAGBJUGJEo2SGI0ECSAK6ZaHgMZEClQ0KdhErDGUAAY0VB7lUduCFVNadtlt9zE7M/eamW1poTycvza555zf+b5zH0twn0+c6S/UNa0EiWAx4uEseIYlo0MtgOJuguytFiWpQj/kq71XGXK3BXlmeV4ieqPOmzGE5k1/CKNyB2LEUDc8NjFZX9XR+E8YDRdacfZwC4JXW5jsSMtPHFp29s56fQFF5WUgYd/0pY9icsFwpEMBSQjQVAquJ8OJyCHZGLhsIER1/H4pgMpPDgPc7UfNsuW9IbcDijftT8/sP2fR6qcwjAMsIsFIUHxxug2ZbhmK0BN+MajizQkDIMgM1KmhPqFi34ZjaG1ur0T1ype7Ibcy6IztZQNGenxL338CwxIi1LAAVedoi+moag7j4MwsDHVJoADijKOg8jJeyHRjgF2ETSSwuQ3ctBNsXFOL65cDfvbjG5YSC+Ca92VeZzhyZt2uEgzUCII3gIthFX93aDCbvhxKoPL54XjYa7ulPm/PRYz0yDA4kNFPQo7bBm8a0CpxvFtaAZfbOa5z76KzSQXFm43ZiyfQuZPH4FyzjjOBuFVYY9xaNgFVM7Iw1CmCUoKozlB4oAEj3DJkSmBGmaBxqQrGDhex71g9Duw4zVC9QiD9Sr4p5CnCEf+aIpxsSOBKu2Yl0V7T+aM9jtLcVKtTE2wW+/hkKx4f5IBHpmiN6jB7STCOzP4SJo2S4fugBuSmMZUIs3aWzVmc75uUn4Gj56KwCwQG55B6EeqDKnJSbDjZFkMkHAYRRQzyuDCml2WmWoEQxAyOKWMdOH6qET98dd5PMGtb44cbZ2TVtxlQYj1tH70W6fE7TcEojw15aYo1NFPB53VtiGrMiol1dqA4Z7D127SPuYCsFI517/3URDBjC1+5cz7+re+AzMw9AvxyNQxZFG4BTN+/LsrAGK8CzawOYPz2WlBJAaiZ0zXKnMHQOUeCMniz7Shfsh9Eev1b/tanz+JqXSfckoDq5hCIIEALtgGCABgGWDyCfa8VYtoQl1W8U2PI3nbcWjMBhAqAKAGMWUoiuoH0sXZsXV0D4nhxLS/dsgAdDSpqroShhdpASE/3ZkHODeydO+nuADOgC8LUCKjdjaLsgUgZrWDXkq0gtGg1X7VrBfbWtiLeHrCKPQgQ1hhyuhV0GykI4JoKQkXIHhfmP52B9aWbQZTnPmocs/KlrGvNQZB4cmh3fncqMAG5238D17XbQjnTLQC3CxiSmYL6Td81EcfstWXOKRN9UnoKWCBu+dgHwHR8P/8xFAxyWuM0ZzD6LoDuPJpqh9YeQuToKT/pV/JZIU31HvEUTYR2vQNcvb0rawZMx6FXCzAhzQ6BEutADS8/0UeBGUskAdIgD0I1p8ACwanW/nLO22i4n5lMBVGE3tFXhQmoeqUAj/R/MED0OGDoOsI/H2ORvW8n71/XwvI8QumZ1CcLoEfjMGKJ26z6XwBKIdhliA4FgV9PgDM2rnPnsq7LzoQs3lomDUj1ecbnQgvHYMR7ICZg9+yJSHckX7TrUR0LD55LWmQdNEBQZEhuO0J/XoDWFvB37ljac113D8exfOd+OdU7x5M7EkxNQI8nwA1ubT8q2zEtewjcEkXV+RYrhXMGIhCIigxqkxG68BcSgWBltGxh3wenG+JesbsMoujzZI8GtctgmgE92gEiKRCcnq4wBj10A6LdCSoJYLEEQpcvAbruD29ecJ8nsyvd+05Fnm6odaInhdrSU2FTnNbusO5k6+QScM2AGo9AvR6AHrrJRMGWH9xQ8j8e/V6HwLtqTyGTaAnnvBiMZRGbkrRGjZveNxFCqqnGKoLr59/zb8t/wrqBjjWYLWUAAAAASUVORK5CYII=') no-repeat 10px 50%;
}

b-help {
    padding-left: 60px;
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
    background: #bbe5fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADoklEQVRIS62WbUxTVxjH/+fe25QiiOHNJoKyuCbOmmniGGNRQlEU3aLB+LI4E5clxmUxuGzqsizZqh9M/KCZWzQ6Mu2MsOkH3WYCKJUVVILR6WxE6MK4QKCULhakpe3tfTnmcPXDWKHV7ny458N5zv93/s855zmXYIZWVue3zCnKLH8zl99aaDSsZqEqVdkXYxIV+wNqS+eg5HBuzb45nQyJN7DlIuWVAnlnuZn7YW0ejywBeKwAjzUgqgCEACYOyBWA+p4IOjwT25u35f0UTysu4Msu9dOP5nNHQxowKAMjMYAFalSXoARQnqmZBaBJnIDbE/7AtSP/x6mQuIDPHiri+/P5os4wQJgoiyJ6p1JAoXrPhhQNSDcAF9oDzY3VOWuSAqy9Ht5ztNj03R9hwMgBhAO8UUCKUZhnEYRlZkN3ogHgeeCWJ4i68tn/WXBcB+84J77atdh4MMzxaPfFIPqkJlmWHTTC+YhJq91dkm0ZlHQHzAmzdl8M4nxZkgBmc7Mz+HEworwmZchfuGz5oefWS876LcfW5/7VFiWT6aNUT527Zxz1lVnJOWBidjvl7HbCMvCvZjs/0ujYlF91xgsIbF+oBsITtN7+J3TtvbmZSe3BdGe6uHZo24HVOT/nZBjROqqBpxRUIAjFKJxXxEP3D1i+fmlA2ZmhwjXLsgY2W2bhWJ+KMQUIxAg0gcOd2keR4ClretL3IF7gyjp/+OSGPNOH9xREowDHspdmgPiriPEHvQvgrBx4eUD13Zojh5cc7wgJ8ARUcISCJwL6rvbjyb2+ArSsGnqhUjE1OO/zHvH0voVF+9slCOxwEoKgPwbvufY9aKs6MVM9i3sPpk4o/n6YWovz0dobBaEE1EAwfNmDqGNZwvkJAxison6EqguyIQ6r+qEXAN/Fzo5Y3fLSmVbPxpICmPd1U3V2GiJPNECm0HiK6MOBR1pzhfV/ASQSSXkP8PZvFRkLzZeW2gqzfP1B/O3qbkLrhnXJgBOn6K3L6ypqVjRstOWg1i1hdFxFyavpuLS3wYu2d+clgiQEGKtvOL89vWLVbkcAkDW9hIIDen3A3eulcNd0pJSiuXsf3LFuX/xGS8MoYCCAqgJUAfxB4PerO9H1ybmUAIYq55+lB21L234ZAThJfzdZjfaNAbdvlaIrRQewnqp6ff+mRnf3BMDqj8YcgDkYgmN5Qcp7MCmw6JtdmPfKcZjSTJO/FN4BFzIHK+GyP3/7p+U8BTHzdShmcsKzAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

[data-title] {
    border-bottom: blue dotted 1px; /*optional styling*/
    position: relative;
    cursor: default;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -33px;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
  
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -16px;
    left: 8px;
    display: inline-block;
    color: #fff;
    border: 8px solid transparent;	
    border-bottom: 8px solid #000;
}

.btn {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color .1s ease;
    /* top: 40em;*/
  }

  .btn:hover {
    background: #357ebd;
  }

  .btn.btn-big {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }

  .btn-close {
    color: #aaaaaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
  }

  .btn-close:hover {
    color: #919191;
  }

  .modal:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }

  .modal:target:before {
    display: block;
  }

  .modal:target .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 20%;
  }

  .modal-dialog {
    background: #fefefe;
    border: #333333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    top: -100%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-header, .modal-footer {
    padding: 10px 20px;
  }

  .modal-header {
    border-bottom: #eeeeee solid 1px;
  }

  .modal-header h2 {
    font-size: 20px;
  }

  .modal-footer {
    border-top: #eeeeee solid 1px;
    text-align: right;
  }

  /*ADDED TO STOP SCROLLING TO TOP*/
  #close {
    display: none;
  }

  .terminal {
    width: 100%;
    padding: 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
  
  .terminal__window {
    width: 100%;
    max-width: 800px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  }
  
  .terminal__window-header {
    text-align: center;
    background: #3c3f40;
    border-radius: 5px 5px 0 0;
    color: #e4e4e4;
    padding: 8px 50px;
    position: relative;
    border-bottom: 2px solid #676d6f;
  }

  .terminal__controls {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0 10px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .terminal__controls:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #8c7c2b;
    vertical-align: middle;
  }
  
  .terminal__controls:after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #a24646;
    vertical-align: middle;
    margin: 0 0 0 5px;
  }
  
  .terminal__window-body {
    border: 2px solid #3c3f40;
    border-radius: 0 0 5px 5px;
    max-height: 354px;
    overflow-y: auto;
  }
  
  .terminal__screen {
    width: 100%;
    min-height: 350px;
    padding: 15px;
    background: #101010;
    border-radius: 0 0 3px 3px;
    overflow-y: auto;
  }
  
  .terminal__screen > span {
    marign: 0 0 5px 0;
  }
  
  .screen__row {
    display: block;
    line-height: 1.5;
    color: #d4d3d3;
    font-size: 14px;
    font-family: Monospace, Arial, sans-serif;
    min-height: 15px;
  }
  .screen__row.tab {
    padding-left: 30px;
  }
  .screen__row:last-of-type:after {
    content: '|';
    font-weight: bold;
    -webkit-animation: cursor 1.5s linear infinite;
            animation: cursor 1.5s linear infinite;
  }
  
  .screen__success {
    color: #47cf73;
  }
  .screen__primary {
    color: #0ebeff;
  }
  .screen__default {
    color: #d4d3d3;
  }
  .screen__warning {
    color: yellow;
  }
  .screen__danger {
    color: #e85757;
  }
  .screen__dark {
    color: #888;
  }
  
  @-webkit-keyframes cursor {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes cursor {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  table {
    width: 800px;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  th,
  td {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  th {
    text-align: left;
  }
  thead th {
    background-color: #55608f;
  }
  tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
  tbody td {
    position: relative;
  }
  tbody td:hover:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: -1;
  }

Here is the HTML and Markdown template

<div id="page-wrap">
	<div id="inside">
		<div id="header">
			<h2>Header</h2>
		</div>
		<div id="main-content">
			<h3>Standard Template for Joplin Notes</h3>
			<h6>Created by Jessica Brown 21-AUG-2020</h6>
			<p>
				<span data-title="Here is some text for example">Hover me</span>
			</p>
			<p>
				<a href="#modal-one" class="btn">Modal!</a>
			</p>
			<p>
				This will be the layout for almost everything in this Joplin notes. I will be making tweeks here and there, but overall I believe this is a nice easy template to understand and work with.<br />
				<br />
				<b-construction>
					This template is still under construction.
				</b-construction>
				<b-notice>
					<b>NOTICE:</b> This is a &lt;b-notice&gt;&lt;/b-notice&gt; box
				</b-notice>
				<b-success>
					<b>SUCCESS:</b> This is a &lt;b-success&gt;&lt;/b-success&gt; box
				</b-success>
				<b-warning>
					<b>WARNING:</b> This is a &lt;b-warning&gt;&lt;/b-warning&gt; box
				</b-warning>
				<b-error>
					<b>ERROR:</b> This is a &lt;b-error&gt;&lt;/b-error&gt; box
				</b-error>
				<b-help>
					<b>ERROR:</b> This is a &lt;b-help&gt;&lt;/b-help&gt; box
				</b-help>
			</p>
			<p>
				<div class="terminal">
					<div class="terminal__window">
						<div class="terminal__window-header">user@comp28~<div class="terminal__controls"></div>
    				</div>
					<div class="terminal__window-body">
						<div class="terminal__screen">
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
								<span class="screen__primary">~</span>
								<span class="screen__primary">&#36;</span>
							</div>
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
            					<span class="screen__primary">~</span>
            					<span class="screen__primary">&#36;</span>
            					<span class="screen__default">git log</span>
          					</div>
          					<div class="screen__row">
            					<span class="screen__warning">commit 5ac05326d918acc74afd9e9caede75d64aa3e5f5</span>
          					</div>
							<div class="screen__row">
								<span class="screen__danger">Author:</span>
								<span class="screen__default">jessica@jbrowns.com</span>
							</div>
							<div class="screen__row">
								<span class="screen__danger">Date:</span>
								<span class="screen__default">Fri Aug 21 13:50:44 2020 -0500</span>
							</div>
							<div class="screen__row"></div>
							<div class="screen__row tab">
								<span class="screen__dark">My First Commit</span>
							</div>
							<div class="screen__row"></div>
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
								<span class="screen__primary">~</span>
								<span class="screen__primary">&#36;</span>
							</div>
						</div>
					</div>
				</div>
			</p>
			<p>
				<table>
					<thead>
						<tr>
							<th>Column 1</th>
							<th>Column 2</th>
							<th>Column 3</th>
							<th>Column 4</th>
							<th>Column 5</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Cell 1-1</td>
							<td>Cell 2-1</td>
							<td>Cell 3-1</td>
							<td>Cell 4-1</td>
							<td>Cell 5-1</td>
						</tr>
						<tr>
							<td>Cell 1-2</td>
							<td>Cell 2-2</td>
							<td>Cell 3-2</td>
							<td>Cell 4-2</td>
							<td>Cell 5-2</td>
						</tr>
						<tr>
							<td>Cell 1-3</td>
							<td>Cell 2-3</td>
							<td>Cell 3-3</td>
							<td>Cell 4-3</td>
							<td>Cell 5-3</td>
						</tr>
						<tr>
							<td>Cell 1-4</td>
							<td>Cell 2-4</td>
							<td>Cell 3-4</td>
							<td>Cell 4-4</td>
							<td>Cell 5-4</td>
						</tr>
						<tr>
							<td>Cell 1-5</td>
							<td>Cell 2-5</td>
							<td>Cell 3-5</td>
							<td>Cell 4-5</td>
							<td>Cell 5-5</td>
						</tr>
					</tbody>
				</table>
			</p>
		</div>
		<div style="clear: both;"></div>
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<div class="modal" id="modal-one" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-header">
				<h2>Modal in CSS?</h2>
				<a href="#close" class="btn-close" aria-hidden="true">×</a>
			</div>
			<div class="modal-body">
				<p>One modal example here! :D</p>
			</div>
			<div class="modal-footer">
				<a href="#close" class="btn">Nice!</a>
			</div>
		</div>
	</div>
</div>
9 Likes
16

While much of the conversation here is about the userstyle.css I was trying to change the font in the rest of the UI. I suspect my use of the AppImage on linux might be preventing my global settings. At any rate, the following snippet in userchrom.css finally got me the size increase I wanted.

html *
{
   font-size: 13pt !important;
}

!important being the important part. the puns :slight_smile:

1 Like
17

Invaluable app, I was looking for my way to contribute.
Here's styled TOC, to be continued.
--- UPD ---
Dark style added.
https://github.com/p0rc0jet/joplin_styles

toc
toc1521×767 174 KB

3 Likes
19

A quick way to increase the font size of the entire app is to use the zoom feature (View > Zoom In) or

ctrl + = zooms in*
ctrl + - zooms out*
ctrl + 0 resets to default*

*Using the keyboard top row, not the numberpad keys

Joplin remembers the zoom level.

1 Like
20

I suggest easy way to manage styles for different devices here.

21

I think it's time to close this topic in favor of the main CSS topic:

Share your CSS