dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 05:09:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
78ca0b719d
notion-enhancer/docs/styling.html

313 lines
26 KiB
HTML
Raw Blame History

<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>styling | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.png"><meta name="title" content="styling | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/styling.html"><meta property="og:title" content="styling"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/notion.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="#styling">styling</a><ul><li class="level-2"><a href="#generalapp-wide">general/app-wide</a></li><li class="level-3"><a href="#colour-theming">colour theming</a></li><li class="level-3"><a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a></li><li class="level-3"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-3"><a href="#wider-page-preview">wider page preview</a></li><li class="level-3"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-2"><a href="#tables">tables</a></li><li class="level-3"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-3"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-3"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-3"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-3"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-3"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-2"><a href="#boards">boards</a></li><li class="level-3"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-3"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-3"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
<section class="block" id="styling">
<h1>
<a href="#styling">styling</a>
</h1>
<p>to modify the appearance of the notion app, edit the style rules in <code>resources/user.css</code>,
use some of the suggested/documented optional styles below, or invent your own.</p>
<p>these styles are written in a language called &quot;CSS&quot;. if you don&#39;t know what this is and are interested,
check out some youtube videos or <a href="https://www.codecademy.com/learn/learn-css#" title="">try a free short course like the one on codecademy</a>.</p>
<p>due to the enhancements directly fetching from the local CSS files,
changes will be applied instantly on notion reload
(no need to re-run <code>customiser.py</code> every time you want to change some styles).</p>
<p>these should also work for the web version, if copied into your css customiser.</p>
<p>css below will work for every instance of the element, but if you wish to hide only a specific element
(e.g. the &#39;+ new&#39; table row) it is recommended that you prepend each selector with
<code>[data-block-id=&#39;ID&#39;]</code>.</p>
</section>
<section class="block" id="generalapp-wide">
<h2>
<a href="#generalapp-wide">general/app-wide</a>
</h2>
<p><img loading="lazy" src="screenshots/app-enhanced.jpg" alt="" title=""></p>
<p><em>image: the default post-customisation appearance</em></p>
</section>
<section class="block" id="colour-theming">
<h3>
<a href="#colour-theming">colour theming</a>
</h3>
<p>this replaces the default notion dark theme. the provided theme file is my custom dark+ theme:
if you have another you wish to share, please contact me. if a few themes are submitted i will
set up a distribution method (either including them as optionally-enableabled themes or sharing them on the website).</p>
<p>to enable, see the <a href="index.html#tray" title="">tray</a> options.</p>
<p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names
should describe what each colour will affect.</p>
<p><img loading="lazy" src="screenshots/theme-dark+.jpg" alt="" title=""></p>
<p><em>image: the dark+ theme</em></p>
</section>
<section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
<h3>
<a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/discussion-default.jpg" alt="" title=""></p>
<p><em>image: before styling</em></p>
<p><img loading="lazy" src="screenshots/discussion-hidden.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="custom-fonts">
<h3>
<a href="#custom-fonts">custom fonts</a>
</h3>
<p><strong>the <code>@import</code> statement must be added to the top of the file (with nothing above it</strong>
<strong>except comments or other <code>@import</code> statements)</strong></p>
<p>to change the fonts, put the relevant URL in the <code>@import</code> statement and then change the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#" title="">font-family</a> property.
plenty of other fonts that can be found on google fonts or that may be on your system already.</p>
<pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>);
<span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'monospace;'</span>]</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Fira Code'</span>, monospace <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/fonts-custom.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="font-resizing">
<h3>
<a href="#font-resizing">font resizing</a>
</h3>
<p><strong>not recommended:</strong> this can mess up container sizes.
it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale everything up/down.</p>
<p>to change the size, change the value of <code>--font-scale</code>.</p>
<pre><code class="lang-css"><span class="hljs-selector-pseudo">:root</span> {
<span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1.4</span>;
}
<span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 40px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">40px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 16px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 14px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">14px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 12px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">12px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 11px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">11px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/fonts-resized.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="wider-page-preview">
<h3>
<a href="#wider-page-preview">wider page preview</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/preview-default.jpg" alt="" title=""></p>
<p><em>image: before styling</em></p>
<p><img loading="lazy" src="screenshots/preview-wider.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="thinner-cover-image">
<h3>
<a href="#thinner-cover-image">thinner cover image</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span>
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/cover-default.jpg" alt="" title=""></p>
<p><em>image: before styling</em></p>
<p><img loading="lazy" src="screenshots/cover-thinner.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="tables">
<h2>
<a href="#tables">tables</a>
</h2>
<p><img loading="lazy" src="screenshots/table-before.jpg" alt="" title=""></p>
<p><em>image: before styling</em></p>
</section>
<section class="block" id="table-columns-below-100px">
<h3>
<a href="#table-columns-below-100px">table columns below 100px</a>
</h3>
<p><strong>not recommended!</strong> this may cause buggy viewing.
as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.</p>
<p>to see how to do this, watch <a href="https://www.youtube.com/watch?v=6V7eqShm_4w#" title="">this video</a>.</p>
<pre><code class="lang-css"><span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(COL_NUMBER)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; min-width: calc(100% - 192px);'</span>]</span>
&gt; <span class="hljs-selector-attr">[data-block-id]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(COL_NUMBER)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</span>]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(5)</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(COL_NUMBER)</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">32px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</span>]</span>
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: absolute; top: 0px; left: 0px; pointer-events: none;'</span>]</span><span class="hljs-selector-pseudo">:not(.notion-presence-container)</span> {
<span class="hljs-attribute">display</span>: none;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-columnunder100px.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="hide--new-table-row">
<h3>
<a href="#hide--new-table-row">hide '+ new' table row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-hideaddrow.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="hide-calculations-table-row">
<h3>
<a href="#hide-calculations-table-row">hide calculations table row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-hidecalculationsrow.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="centre-align-table-column-headers">
<h3>
<a href="#centre-align-table-column-headers">centre-align table column headers</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> &gt; <span class="hljs-selector-tag">div</span> &gt; <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> auto;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-centredheaders.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="smaller-table-column-header-icons">
<h3>
<a href="#smaller-table-column-header-icons">smaller table column header icons</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
<span class="hljs-selector-tag">svg</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin-right</span>: -<span class="hljs-number">4px</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-smallercolumnicons.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="remove-icons-from-table-column-headers">
<h3>
<a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'margin-right: 6px;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-hidecolumnicons.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="removingdecreasing-side-padding-for-tables">
<h3>
<a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;'</span>]</span>
<span class="hljs-selector-class">.notion-table-view</span>,
<span class="hljs-selector-attr">[class=<span class="hljs-string">'notion-scroller'</span>]</span> &gt; <span class="hljs-selector-class">.notion-table-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">35px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">15px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">0%</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;'</span>]</span>
<span class="hljs-selector-class">.notion-selectable</span>
<span class="hljs-selector-class">.notion-scroller</span><span class="hljs-selector-class">.horizontal</span><span class="hljs-selector-pseudo">::-webkit-scrollbar-track</span> {
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/table-shrinkpadding.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="boards">
<h2>
<a href="#boards">boards</a>
</h2>
<p><img loading="lazy" src="screenshots/board-default.jpg" alt="" title=""></p>
<p><em>image: before styling</em></p>
</section>
<section class="block" id="hide--new-board-row">
<h3>
<a href="#hide--new-board-row">hide '+ new' board row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-group</span>
<span class="hljs-selector-attr">[style=<span class="hljs-string">'user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/board-hideaddnew.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="hide-board-view-hidden-columns">
<h3>
<a href="#hide-board-view-hidden-columns">hide board view hidden columns</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/board-hidehidden.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="hide-board-view-add-a-group">
<h3>
<a href="#hide-board-view-add-a-group">hide board view 'add a group'</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/board-hideaddgroup.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section>
<section class="block" id="removingdecreasing-side-padding-for-boards">
<h3>
<a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
}</code></pre>
<p><img loading="lazy" src="screenshots/board-shrinkpadding.jpg" alt="" title=""></p>
<p><em>image: after styling</em></p>
</section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/STYLING.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
</footer><nav><a class="prev" href="index.html">ᐊ</a><a class="next" href="changelog.html">ᐅ</a></nav></article></div></body></html>
Reference in New Issue View Git Blame Copy Permalink