├── README.md
└── custom.css


/README.md:
--------------------------------------------------------------------------------
 1 | # How to emulate Workflowy in Dynalist
 2 | 
 3 | **Step 1 - Go Pro**
 4 | 
 5 | Only Dynalist Pro allows you to use custom CSS or change keyboard shortcuts. But you can test this in the free trial.
 6 | 
 7 | **Step 2 - Copy CSS from here**
 8 | 
 9 | Copy / paste the CSS in custom.css in this repo into Dynalist (Dynalist Pro settings)
10 | 
11 | **Step 3 - Change view preferences**
12 | 
13 | Change view preferences in Dynalist settings:
14 |  - theme = Default
15 |  - density = Cozy
16 |  - font size = small
17 |  - font = system
18 |  - narrow document layout = tick (this emulates Workflowy Classic)
19 |  - document border = tick (this emulates Workflowy Classic)
20 | 
21 | **Step 4 - Keyboard Shortcuts**
22 | 
23 | Edit keyboard shortcuts:
24 |  - Expand/Collapse = Ctrl+Space
25 |  - Zoom in = Alt+Right
26 |  - Zoom out = Alt+Left
27 |  - Swap with previous = Ctrl-Shift-Up, Ctrl-Up, Alt-Shift-Up (I threw the kitchen sink at this. Sometimes I forget which.)
28 |  - Swap with next = similar to above
29 |  - Delete item = Ctrl-Alt-Shift-Backspace (not workflowy. Adobe Lightroom, but I like it)
30 |  - Duplicate = Ctrl-Shift-D (not workflowy. Sublime text editor and others)
31 | 
32 | The keyboard shortcuts in Dynalist are killer, I especially like ones like "Delete from above" and "Select this and previous item".
33 | 


--------------------------------------------------------------------------------
/custom.css:
--------------------------------------------------------------------------------
 1 | /* Headings more like WF */
 2 | 
 3 | .Node.is-currentRoot > .Node-self .node-line, .Node.is-currentRoot > .Node-self.is-heading .node-line, .Node.is-currentRoot > .Node-self .node-line-strict, .Node.is-currentRoot > .Node-self.is-heading .node-line-strict {
 4 |     font-weight: 600;
 5 |     font-size: 128%;
 6 |     color: #444;
 7 | }
 8 | 
 9 | /***** Breadcrumbs - smaller and less visual impact *****/
10 | 
11 | .DocumentBreadcrumb-item {
12 |     font-size: 0.75em;
13 |     color: #777;
14 | }
15 | 
16 | .DocumentBreadcrumb-delimiter {
17 |     margin: 0 6px;
18 |     vertical-align: top;
19 |     font-size: 0.75em;
20 |     color: #777;
21 |     line-height:18px;
22 | }
23 | 
24 | /* Override text colour and font */
25 | html, body {
26 |     color:#000000;
27 | }
28 | 
29 | /***** Bullets like Workflowy *****/
30 | 
31 | /* Non-expanded nodes */
32 | .Node-self.is-collapsed.is-parent > .Node-bullet:before {
33 |     content: "\e90d"; /* change bullet style */
34 |     border-radius: 50%; /* rounded background */
35 |     background-color: #e0e0e0; /* background bullet colour */
36 |     color:#666; /* internal bullet colour */
37 | }
38 | 
39 | /* Do same for expanded nodes */
40 | .AppContainer.is-using-bullet-to-zoom .Node-bullet:before {
41 |     background-color: transparent; /* i.e. same as ... */
42 |     color: #666; /* internal bullet colour */
43 | }
44 | 
45 | 
46 | /* Hover colours */
47 | .AppContainer.is-using-bullet-to-zoom .Node-bullet:hover:before {
48 |     background-color: #aaa;
49 | }
50 | 
51 | .Node-self.is-collapsed.is-parent > .Node-bullet:hover:before {
52 |     content: "\e90d";
53 |     background-color: #aaa;
54 | }
55 | 
56 | .Node-self.is-collapsed > .Node-bullet:hover:before {
57 |     content: "\e90a";
58 |     background-color: #aaa;
59 | }
60 | 
61 | /* Size of bullet */
62 | .Node-bullet:before {
63 |     font-size:18.5px;
64 | }
65 | 
66 | /* Reduce visual impact of date boxes */
67 | .node-inline-item {
68 |     background-color: #fdfdfd;
69 | }
70 | 
71 | #image-preview-loader, #image-preview-fail, #inline-image-preview, .node-inline-item {
72 |     border: 1px solid #efefef;
73 | }
74 | 
75 | /* favorite star */
76 | .node-icon.mod-bookmark:hover:before, .node-icon.mod-bookmark.is-alreadyBookmarked:before {
77 |     content: "\e929";
78 |     color:#f4c542;
79 | }
80 | 


--------------------------------------------------------------------------------