1"use strict";(self.webpackChunk_joplin_doc_builder=self.webpackChunk_joplin_doc_builder||[]).push([[2417],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var o=n(67294);function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,o,s=function(e,t){if(null==e)return{};var n,o,s={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=o.createContext({}),l=function(e){var t=o.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},u=function(e){var t=l(e.components);return o.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,s=e.mdxType,r=e.originalType,p=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),c=l(n),h=s,d=c["".concat(p,".").concat(h)]||c[h]||m[h]||r;return n?o.createElement(d,a(a({ref:t},u),{},{components:n})):o.createElement(d,a({ref:t},u))}));function d(e,t){var n=arguments,s=t&&t.mdxType;if("string"==typeof e||s){var r=n.length,a=new Array(r);a[0]=h;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[c]="string"==typeof e?e:s,a[1]=i;for(var l=2;l<r;l++)a[l]=n[l];return o.createElement.apply(null,a)}return o.createElement.apply(null,n)}h.displayName="MDXCreateElement"},63705:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return a},default:function(){return m},frontMatter:function(){return r},metadata:function(){return i},toc:function(){return l}});var o=n(87462),s=(n(67294),n(3905));const r={created:new Date("2019-06-13T19:26:13.000Z"),source_url:"https://www.patreon.com/posts/customising-your-27609047",sidebar_label:"Customising your notes with the help of the development tools and CSS",date:new Date("2019-06-13T00:00:00.000Z"),title:"Customising your notes with the help of the development tools and CSS",description:"In Joplin desktop, it has been possible to customise the appearance of your notes using CSS for quite some time. An issue however is that it is difficult to know what CSS to write and how to select...",image:"https://joplinapp.org/images/news/20190613-192613_0.png"},a="Customising your notes with the help of the development tools and CSS",i={permalink:"/news/20190613-192613",editUrl:"https://github.com/laurent22/joplin/tree/dev/readme/news/20190613-192613.md",source:"@site/news/20190613-192613.md",title:"Customising your notes with the help of the development tools and CSS",description:"In Joplin desktop, it has been possible to customise the appearance of your notes using CSS for quite some time. An issue however is that it is difficult to know what CSS to write and how to select...",date:"2019-06-13T00:00:00.000Z",formattedDate:"June 13, 2019",tags:[],readingTime:.61,hasTruncateMarker:!1,authors:[],frontMatter:{created:"2019-06-13T19:26:13.000Z",source_url:"https://www.patreon.com/posts/customising-your-27609047",sidebar_label:"Customising your notes with the help of the development tools and CSS",date:"2019-06-13T00:00:00.000Z",title:"Customising your notes with the help of the development tools and CSS",description:"In Joplin desktop, it has been possible to customise the appearance of your notes using CSS for quite some time. An issue however is that it is difficult to know what
1CSS to write and how to select...",image:"https://joplinapp.org/images/news/20190613-192613_0.png"},prevItem:{title:"Joplin now supports Fountain screenwriting markup language",permalink:"/news/20190814-215957"},nextItem:{title:"Changing attachment download behaviour to save disk space",permalink:"/news/20190610-230711"}},p={authorsImageUrls:[]},l=[],u={toc:l},c="wrapper";function m(e){let{components:t,...n}=e;return(0,s.kt)(c,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("div",{className:"donate-links"},(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://www.paypal.com/donate/?hosted_button_id=WQCERTSSLCC7U"},(0,s.kt)("img",{parentName:"a",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Donate-PayPal-green.svg",alt:"Donate using PayPal"}))," ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/sponsors/laurent22/"},(0,s.kt)("img",{parentName:"a",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/GitHub-Badge.svg",alt:"Sponsor on GitHub"}))," ",(0,s.kt)("a",{parentName:"p",href:"https://www.patreon.com/joplin"},(0,s.kt)("img",{parentName:"a",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Patreon-Badge.svg",alt:"Become a patron"}))," ",(0,s.kt)("a",{parentName:"p",href:"https://joplinapp.org/donate/#donations"},(0,s.kt)("img",{parentName:"a",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/badges/Donate-IBAN.svg",alt:"Donate using IBAN"})))),(0,s.kt)("p",null,"In Joplin desktop, it has been possible ",(0,s.kt)("a",{parentName:"p",href:"https://joplinapp.org/help/apps/custom_css"},"to customise the appearance of your notes")," using CSS for quite some time."),(0,s.kt)("p",null,"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 ",(0,s.kt)("strong",{parentName:"p"},"Help ",">"," Toggle development tools.")),(0,s.kt)("p",null,(0,s.kt)("img",{parentName:"p",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20190613-192613_0.png",alt:null})),(0,s.kt)("p",null,'Then, from the "Elements" 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.'),(0,s.kt)("p",null,(0,s.kt)("img",{parentName:"p",src:"https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20190613-192613_1.png",alt:null})))}m.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.