Section Headers Within Evernote
Evernote allows, at least indirectly, users to modify the underlying code used to display notes. This raw code is actually HTML. While some attributes like anchor names cause sync failures, other elements like tables work as expected. Evernote’s parsing engine requires proper structure and has some quarks.
Without the ability to use name attributes for anchor elements, it is difficult to create internal linking for a table of contents. This prompted the creation of nice looking section headers that would stand out while scrolling. The sample below was created using tables. This is not proper for HTML on the Internet as it confuses text readers and fails to meet certain accessibility standards, but it will work for the purposes here.
The below code uses CSS styling of HTML elements to achieve its appearance. The TBODY element is not required, but it does not hurt to have it. The non-breaking space entities are required however. Evernote does not like empty tags and will refuse to sync the note. This is applicable in other areas for manually hacking notes.
Aside from changing the content, colors, and typeface, the below code should serve as template. Enjoy and modify to taste.
Section Header example
<table style="border-collapse:collapse; width:100%"> <tbody> <tr> <td style="width:50px; padding:0px 5px; background-color:#99CCFF; color:#F0F0F0; text-align:center; font-size:36px;">1</td> <td style="padding:0px 10px; background-color:grey; color:#F0F0F0; color:#F0F0F0; font-size:24px;">Section 1 Title</td> </tr> <tr style="height:5px;"> <td style="background-color:#99CCFF;font-size:0px;"> </td> <td style="background-color:#FF6633; font-size:0px;"> </td> </tr> </tbody> </table>