self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-05 12:50:29 +02:00
Code Issues Releases Activity
95ad4c3177
joplin/docs/blog/20190613-202613/index.html
Laurent Cozic 53bad3a768 Update website
2021-08-20 11:38:05 +01:00

358 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<!--
!!! WARNING !!!
This file was auto-generated from readme/blog/20190613-202613.md and any manual change
made to it will be overwritten. To make a change to this file please modify
the source Markdown file:
https://github.com/laurent22/joplin/blob/dev/readme/blog/20190613-202613.md
-->
<head>
<!-- Donate button A/B testing -->
<script async src="https://www.googleoptimize.com/optimize.js?id=OPT-PW3ZPK3"></script> <meta
charset="utf-8"
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<link rel="icon" href="&#x2F;images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Joplin, the open source note-taking application" />
<link
rel="stylesheet"
href="&#x2F;css/bootstrap5.0.2.min.css"
as="style"
/>
<link rel="stylesheet" href="&#x2F;css/fontawesome-all.min.css?t=1629455871213">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
as="style"
media="all"
onload="this.media='all'; this.onload = null"
/>
<link rel="stylesheet" href="&#x2F;css/site.css?t=1629455871213" as="style" />
<title>Customising your notes with the help of the development tools and CSS | Joplin</title>
<script
src="&#x2F;js/jquery-3.6.0.min.js"
rel="preload"
as="script"
></script>
</head>
<body class="website-env-prod">
<div class="container-fluid generic-template -page" id="main-container">
<div class=" navbar-main white-bg" id="nav-section">
<div class="container">
<div class="row">
<div class="col-3">
<a href="/">
<img
src="&#x2F;images/logo-text-blue.svg"
alt=""
id="top-logo"
width="180"
/>
</a>
</div>
<div class="col-9 text-right d-none d-md-block">
<a href="/help/" class="fw500">Help</a>
<a href="https:&#x2F;&#x2F;discourse.joplinapp.org&#x2F;" class="fw500">Forum</a>
<a href="/plans/" class="button-link btn-trans plans-button">Joplin Cloud</a><a class="button-link btn-blue sponsor-button" href="/donate">
<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support us
</a> </div>
<div class="col-9 text-right d-block d-md-none navbar-mobile-content">
<a class="button-link btn-blue sponsor-button" href="/donate">
<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support us
</a>
<span class="pointer"
><img
src="&#x2F;images/mobile-menu-black-open-icon.png"
id="open-menu-mobile"
alt=""
/></span>
&nbsp;&nbsp;
<div id="menu-mobile">
<div>
<div class="text-right">
<img
src="&#x2F;images/close-icon.png"
alt=""
class="pointer"
id="close-menu-mobile"
/>
</div>
<div class="text-center menu-mobile-top">
<a href="https:&#x2F;&#x2F;discourse.joplinapp.org&#x2F;" class="fw500 mobile-menu-link">Forum</a>
<a href="/help/" class="fw500 mobile-menu-link">Help</a>
</div>
<div class="menu-mobile-buttons">
<a href="/plans/" class="button-link btn-trans plans-button">Joplin Cloud</a><a class="button-link btn-blue sponsor-button" href="/donate">
<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support us
</a> </div>
</div>
<div id="toc-mobile"><div><ul>
<li>
<p>Applications</p>
<ul>
<li><a href="/desktop/">Desktop application</a></li>
<li><a href="/mobile/">Mobile applications</a></li>
<li><a href="/terminal/">Terminal application</a></li>
<li><a href="/clipper/">Web Clipper</a></li>
</ul>
</li>
<li>
<p>Support</p>
<ul>
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
<li><a href="/markdown/">Markdown Guide</a></li>
<li><a href="/e2ee/">How to enable end-to-end encryption</a></li>
<li><a href="/conflict/">What is a conflict?</a></li>
<li><a href="/debugging/">How to enable debug mode</a></li>
<li><a href="/rich_text_editor/">About the Rich Text editor limitations</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li>
<p>Joplin Cloud</p>
<ul>
<li><a href="/share_notebook/">Sharing a notebook</a></li>
<li><a href="/publish_note/">Publishing a note</a></li>
</ul>
</li>
<li>
<p>Joplin API - Get Started</p>
<ul>
<li><a href="/api/overview/">Joplin API Overview</a></li>
<li><a href="/api/get_started/plugins/">Plugin development</a></li>
<li><a href="/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
</ul>
</li>
<li>
<p>Joplin API - References</p>
<ul>
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
<li><a href="/api/references/rest_api/">Data API</a></li>
<li><a href="/api/references/plugin_manifest/">Plugin manifest</a></li>
<li><a href="/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
<li><a href="/api/references/plugin_theming/">Plugin theming</a></li>
</ul>
</li>
<li>
<p>Development</p>
<ul>
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
<li><a href="/spec/e2ee/">End-to-end encryption spec</a></li>
<li><a href="/spec/history/">Note History spec</a></li>
<li><a href="/spec/sync_lock/">Sync Lock spec</a></li>
<li><a href="/spec/plugins/">Plugin Architecture spec</a></li>
<li><a href="/spec/search_sorting/">Search Sorting spec</a></li>
<li><a href="/spec/server_file_url_format/">Server: File URL Format</a></li>
<li><a href="/spec/server_delta_sync/">Server: Delta Sync</a></li>
<li><a href="/spec/server_sharing/">Server: Sharing</a></li>
</ul>
</li>
<li>
<p>Google Summer of Code 2021</p>
<ul>
<li><a href="/gsoc2021/index/">Google Summer of Code 2021</a></li>
<li><a href="/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
<li><a href="/gsoc2021/ideas/">Project Ideas</a></li>
</ul>
</li>
<li>
<p>About</p>
<ul>
<li><a href="/changelog/">Changelog (Desktop App)</a></li>
<li><a href="/changelog_cli/">Changelog (CLI App)</a></li>
<li><a href="/changelog_server/">Changelog (Server)</a></li>
<li><a href="/stats/">Stats</a></li>
<li><a href="/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div></div>
<div>
<p class="light-blue mobile-menu-link-bottom text-center">
Copyright &copy; 2016-2021 Laurent&nbsp;Cozic
<br/>
<a href="/privacy/" class="fw500">Privacy Policy</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="help-page-container page-20190613-202613">
<div class="container">
<div class="row content-wrapper">
<div id="toc"><div><ul>
<li>
<p>Applications</p>
<ul>
<li><a href="/desktop/">Desktop application</a></li>
<li><a href="/mobile/">Mobile applications</a></li>
<li><a href="/terminal/">Terminal application</a></li>
<li><a href="/clipper/">Web Clipper</a></li>
</ul>
</li>
<li>
<p>Support</p>
<ul>
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
<li><a href="/markdown/">Markdown Guide</a></li>
<li><a href="/e2ee/">How to enable end-to-end encryption</a></li>
<li><a href="/conflict/">What is a conflict?</a></li>
<li><a href="/debugging/">How to enable debug mode</a></li>
<li><a href="/rich_text_editor/">About the Rich Text editor limitations</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li>
<p>Joplin Cloud</p>
<ul>
<li><a href="/share_notebook/">Sharing a notebook</a></li>
<li><a href="/publish_note/">Publishing a note</a></li>
</ul>
</li>
<li>
<p>Joplin API - Get Started</p>
<ul>
<li><a href="/api/overview/">Joplin API Overview</a></li>
<li><a href="/api/get_started/plugins/">Plugin development</a></li>
<li><a href="/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
</ul>
</li>
<li>
<p>Joplin API - References</p>
<ul>
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
<li><a href="/api/references/rest_api/">Data API</a></li>
<li><a href="/api/references/plugin_manifest/">Plugin manifest</a></li>
<li><a href="/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
<li><a href="/api/references/plugin_theming/">Plugin theming</a></li>
</ul>
</li>
<li>
<p>Development</p>
<ul>
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
<li><a href="/spec/e2ee/">End-to-end encryption spec</a></li>
<li><a href="/spec/history/">Note History spec</a></li>
<li><a href="/spec/sync_lock/">Sync Lock spec</a></li>
<li><a href="/spec/plugins/">Plugin Architecture spec</a></li>
<li><a href="/spec/search_sorting/">Search Sorting spec</a></li>
<li><a href="/spec/server_file_url_format/">Server: File URL Format</a></li>
<li><a href="/spec/server_delta_sync/">Server: Delta Sync</a></li>
<li><a href="/spec/server_sharing/">Server: Sharing</a></li>
</ul>
</li>
<li>
<p>Google Summer of Code 2021</p>
<ul>
<li><a href="/gsoc2021/index/">Google Summer of Code 2021</a></li>
<li><a href="/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
<li><a href="/gsoc2021/ideas/">Project Ideas</a></li>
</ul>
</li>
<li>
<p>About</p>
<ul>
<li><a href="/changelog/">Changelog (Desktop App)</a></li>
<li><a href="/changelog_cli/">Changelog (CLI App)</a></li>
<li><a href="/changelog_server/">Changelog (Server)</a></li>
<li><a href="/stats/">Stats</a></li>
<li><a href="/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div></div>
<div class="main-content">
<div class="alert alert-danger alert-env-dev" role="alert">
Running in prod mode!
</div>
<div class="donate-links">
<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=E8JMYD2LQ8MMA&amp;lc=GB&amp;item_name=Joplin+Development&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted"><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Donate-PayPal-green.svg" alt="Donate using PayPal"></a> <a href="https://github.com/sponsors/laurent22/"><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/GitHub-Badge.svg" alt="Sponsor on GitHub"></a> <a href="https://www.patreon.com/joplin"><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Patreon-Badge.svg" alt="Become a patron"></a> <a href="https://joplinapp.org/donate/#donations"><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Donate-IBAN.svg" alt="Donate using IBAN"></a></p>
</div>
<h1>Customising your notes with the help of the development tools and CSS<a name="customising-your-notes-with-the-help-of-the-development-tools-and-css" href="#customising-your-notes-with-the-help-of-the-development-tools-and-css" class="heading-anchor">🔗</a></h1>
<p>In Joplin desktop, it has been possible <a href="https://joplinapp.org/help/#custom-css">to customise the appearance of your notes</a> using CSS for quite some time.</p>
<p>An issue however is that it is difficult to know what CSS to write and how to select specific elements with CSS. The development tools that were just added allow figuring this out. They are available under the menu <strong>Help &gt; Toggle development tools.</strong></p>
<p><img src="images/20190613-202613_0.png" alt=""></p>
<p>Then, from the &quot;Elements&quot; tab, it is possible to select an element and view the corresponding HTML as well as styles. It is also possible to modify the style in real time and view the changes before adding them to userstyle.css.</p>
<p><img src="images/20190613-202613_1.png" alt=""></p>
<hr>
<p>url: <a href="https://www.patreon.com/posts/customising-your-27609047">https://www.patreon.com/posts/customising-your-27609047</a><br>
published_at: 2019-06-13T19:26:13.000+00:00</p>
<div class="bottom-links">
<a href="https://github.com/laurent22/joplin/blob/dev/readme/blog/20190613-202613.md">
<i class="fab fa-github"></i> Improve this doc
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="darkblue-bg">
<div class="container">
<div class="row">
<div class="col-3 d-none d-md-block">
<img src="&#x2F;images/logo-text.svg" alt="" width="150" />
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<img
src="&#x2F;images/logo-text.svg"
width="120"
class="img-center d-block d-md-none"
alt=""
/>
<br class="d-block d-md-none" />
<p class="text-center-sm">Copyright &copy; 2016-2021 Laurent Cozic</p>
</div>
<div class="col-12 col-md-6 right-links">
<p class="text-right text-center-sm">
<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
<a href="/privacy/">Privacy Policy</a>
</p>
</div>
</div>
</div>
</footer>
</div>
<script src="&#x2F;js/script.js?t=1629455871213"></script>
<script>
if (window.location.hostname !== 'localhost') {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103586105-1', 'auto');
ga('send', 'pageview');
}
</script> </body>
</html>
Reference in New Issue View Git Blame Copy Permalink