Skip to content

Custom panel style

Root Chu edited this page Sep 1, 2022 · 3 revisions

How to configure

The loading order of styles is:

  1. $profileDir/outline.css
  2. Plugin advanced setting: User Style

Panel structure

+---[div.outline-content]-------------------------+
|                                                 |
|  +---[div#header]----------------------------+  |
|  | OUTLINE                                   |  |
|  +-------------------------------------------+  |
|                                                 |
|  +---[div.container]-------------------------+  |
|  |                                           |  |
|  |  |===[a.toc-item-link]=================|  |  |
|  |  |===[a.toc-item-link]=================|  |  |
|  |  |===[a.toc-item-link]=================|  |  |
|  |                                           |  |
|  +-------------------------------------------+  |
|                                                 |
+-------------------------------------------------+

Example

#header {
  font-size: 20pt;
  font-weight: bold;
  color: DimGray;
}

.toc-item-link {
  padding: 3px;
  font-size: 10pt;
  color: Black;
  font-weight: normal;
  text-decoration: none;
}

.toc-item-link:hover {
  color: Blue;
  font-weight: bold;
  text-decoration: underline;
}

screenshoot

Clone this wiki locally