{"id":1937,"date":"2018-05-24T19:53:22","date_gmt":"2018-05-25T00:53:22","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1937"},"modified":"2018-05-24T19:53:22","modified_gmt":"2018-05-25T00:53:22","slug":"atom-enable-style-editor-scrollbars","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/24\/atom-enable-style-editor-scrollbars\/","title":{"rendered":"Atom: How to enable and style editor scrollbars"},"content":{"rendered":"<p>To enable scrollbars in the Atom code editor, you will need to open and edit Atom&#8217;s styles.less file. This can be done by clicking File &#8211;&gt; Stylesheet&#8230; For example:<\/p>\n<h4><b>Step 1: Open the Atom styles.less file for editing<\/b><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1939\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/stylesheet.png\" alt=\"\" width=\"241\" height=\"586\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/stylesheet.png 241w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/stylesheet-123x300.png 123w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><b>Step 2: Paste the following webkit-scrollbar code<\/b><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1940\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/atom-webkit-scrollbars.png\" alt=\"\" width=\"613\" height=\"459\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/atom-webkit-scrollbars.png 613w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/atom-webkit-scrollbars-300x225.png 300w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><\/p>\n<p>Here is the code that can be pasted:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.scrollbars-visible-always {\r\n  ::-webkit-scrollbar {\r\n    width: 25px !important;\r\n    height: 25px !important;\r\n    &amp;-track {\r\n        border: 0px;\r\n        border-radius: 0px;\r\n        background-color: #444 !important;\r\n        width: 32px;\r\n    }\r\n    &amp;-thumb {\r\n        \/\/ background-color: rgba(255,200,200,0.35) !important;\r\n        background-color: #86acac !important;\r\n        border: 0px;\r\n        \/\/ border-radius: 9px;\r\n    }\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h4><b>Step 3: Paste the following scrollbar code<\/b><\/h4>\n<p><strong>Note<\/strong>: The width and height sizes here MUST be bigger than the webkit size, otherwise the scrollbars will not appear on every tab when switching tabs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1943\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/css-scrollbar.png\" alt=\"\" width=\"621\" height=\"143\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/css-scrollbar.png 621w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/css-scrollbar-300x69.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/p>\n<p>Here is the code that can be pasted:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.vertical-scrollbar {\r\n  width: 30px !important;   \/\/ has to be bigger than webkit-scrollbar\r\n}\r\n.horizontal-scrollbar {\r\n  width: 30px !important;   \/\/ has to be bigger than webkit-scrollbar\r\n}<\/pre>\n<p>Once the style.less is saved (ctrl+s), the scrollbar will appear in the Atom editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1949\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/scrollbar.png\" alt=\"\" width=\"32\" height=\"221\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To enable scrollbars in the Atom code editor, you will need to open and edit Atom&#8217;s styles.less file. This can be done by clicking File &#8211;&gt; Stylesheet&#8230; For example: Step 1: Open the Atom styles.less file for editing &nbsp; Step 2: Paste the following webkit-scrollbar code Here is the code that can be pasted: .scrollbars-visible-always &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/24\/atom-enable-style-editor-scrollbars\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Atom: How to enable and style editor scrollbars<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[121,10],"class_list":["post-1937","post","type-post","status-publish","format-standard","hentry","category-technologies-and-tools","tag-atom","tag-css"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"predecessor-version":[{"id":1954,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1937\/revisions\/1954"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}