Birch styling example

1

Continuing the discussion from Will Birch be as theme-able as FoldingText:

This is one of the nice things about Atom, hacking in your own styles is a much easier process then it was in FoldingText. Try this out:

  1. Create (or open) a new outline in Atom.

  2. Right click on the outline and choose “Split Left” from the context menu, so now you should have two panes, each with a view of your outline.

  3. Then choose Atom > Open your Stylesheet. Now you should have one view with your custom LESS styles and another view with your outline.

  4. Now try adding some styles that target Birch. For example this style will make the text bold for any item that has child items.

     li.bhasChildren > .bcontent > .bbody {
   font-weight: bold;
 }

  5. Now save your stylesheet and notice that the styles are instantly updated without you even having to reload the app.

Here’s another example stye;

li[data-level="1"] > .bcontent > .bbody {
  border-bottom: 1px solid red;
}

This styles items based on their indention level in the editor. So with the above rule all “top” level items will get a red underline.

2

How do I find out “styles that target Birch”? Is there something similar to FT’s SDK inspector? I tried to change the base font via Atom’s editor preference, but it didn’t have an effect on Birch documents.

3

Yes, see:

  • View > Developer Tools > Toggle Developer Tools

Or just Option-Command-I to get the same inspector as FT’s SDK inspector.

4

Finding one’s way around the stylable elements and class names of FoldingText 3

If, in Atom, you choose ⌘⌥I, or View > Developer > Toggle Developer Tools most of the nested elements in the Web Inspector view will initially be collapsed.

You can jump straight to the root of the FoldingText 3 editor, or step through the elements of the outline, viewing the class names to which styles can be attached, by:

  • Putting your cursor in the Web Inspect window,
  • hitting ⌘F Find,
  • and entering a simple XPath

For the root of the FoldingText material:

//ft-outline-editor

and to step through each of the nested text lines, enter the XPath filter:

//*[@class='ft-body-text']

5

Haven’t yet had much time to look at styles – the basic dark and amber (ground and fore) colors which I am used to for text editing are

(in Atom > Open Your Stylesheet, which opens ~/.atom/styles.less )

ft-outline-editor {
  color: #e9b37a;
  background-color: #2d2d2d;
}

but I need to ask how to set the disclosure triangles (and any Markdown prefixes in Markdown mode) to gray shades

I have tinkered, in Developer Tools, with the css for ft-branch-controls, but I think I’m still missing something :- )

( UPDATE suddenly realised that I had forgotten to apply the gray prefix styles specifically to the automatically generated ::before content – see below)

6

Gray disclosure triangles (and MD prefixes) ( generated as CSS ::before content ) might, for example look something like:

ft-outline-editor {
  color: #e9b37a;
  background-color: #2d2d2d;

  font-size: 14px;

  .ft-handle:before {
    color: #777;
  }
}

li[data-type="Header"] {
  > .ft-branch-controls > .ft-handle:before {
    content: "#";
    font-size: 18px;
  }
  > .ft-branch > .ft-item-content > .ft-body-text {
    font-size: 18px;
    font-weight: bold;
  }
}

( FoldingText for Atom brightens the prefixes of lines which have hidden material folded/collapsed under them,

so:

expands to:

( 2 above is expanded, while 1,3,4 are folded, concealing collapsed descendant lines )

7

@complexpoint Looks like you’ve figured it out, but for others and future reference here’s the link to FoldingText for Atom’s default styles:

https://github.com/FoldingText/foldingtext-for-atom/tree/master/styles

I think that’s the best place to start when looking how to customize things.

8

Thanks – I should have started there

and for coloring the outline/markdown prefixes I found this very helpful too:

https://github.com/FoldingText/foldingtext-markdown/tree/master/styles