自定义Dynalist美化效果

最近在用dynalist辅助写作，在英文网站上面研究了很久，我想我这个应该是第一篇教分享自定义Dynalist CSS效果的，对应的备注都写在代码里面了，需要直接按自己的要求更改即可，也可以拿走即用。

• 任意书写软件（Mweb、Ulysses、iAwriter随你喜欢➕Dynalist在屏幕一侧作为大纲软件
• 优势：跨平台一致的使用体验，同时兼顾好看优雅

1、如果您觉得不错，麻烦用推荐链接注册一下，感恩，好软件共分享。https://dynalist.io/invite/nsYfXg
2、美化方法：pro账户下，setting——Custom CSS复制粘贴上述代码到框里去，空白处点一下自动保存。
废话不多说，看效果

---

电脑端效果

手机端

iPad端

直接上代码：

个人觉得优点如下：

• 模版跨平台完美支持，iPad、iPhone X、Mac、网页端均显示一致的效果
• 对任务样式也进行了定义
• 对#、@标签进行了缩小，视觉上舒服
• 自定义了六个特殊标签：如下图，分别用来区分重要性（⭐️）和紧急性（‼️）两个维度

最后附上CSS代码（dynalist界面自定义为pro功能）：

/* Fix the redo button position in the mobile version. */
/* (Not that useful, as the only option to use it is mobile Firefox with the Stylus extension, and it's really slow.) */
.MobileHeader-optionContainer .MobileHeader-option--undo {
    right: 175px;
}


  /*     文章标题        */

  .Node.is-currentRoot > .Node-self
  {
    font-weight: 900;
    /* box-shadow: 10px 10px 5px #888888; */
    /*   font-size:40px; 测试有宽度，但是无效*/
    /*   font-size:10em;测试有宽度，但是无效*/
    text-align:center;
    text-shadow: 2px 2px 10px #d3d3d3;
    border-bottom:thick double #FF7F50;
    text-overflow:ellipsis;
  }


/* 设置   段落标题   颜色 */
.is-largeFont .Node-self.is-heading1 .Node-contentContainer 
{
  font-size: 26px;
  text-align:center;
  text-shadow: 2px 2px 10px #d3d3d3;
  color:#4682B4;
}

.is-largeFont .Node-self.is-heading2 .Node-contentContainer 
{
  font-size: 22px;
  color:#4682B4;
}

.is-largeFont .Node-self.is-heading3 .Node-contentContainer 
{
  font-size: 20px;
  color:#4682B4;
}


/* 更改标签条颜色 Color  1,2,3,4,5,6*/
  .Node-contentContainer.has-color
  {
    position: relative;
  }

  .Node-contentContainer.has-color::before
  {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 100%;
    background-color: white;
  }

 .Node-contentContainer.mod-color-label-1,
.Node-contentContainer.mod-color-label-2, 
.Node-contentContainer.mod-color-label-3,
.Node-contentContainer.mod-color-label-4,
.Node-contentContainer.mod-color-label-5,
.Node-contentContainer.mod-color-label-6
  {
    background-color: transparent;
    text-indent: 6px /*设置色标的文字偏移*/
  }

  .Node-contentContainer.mod-color-label-1::before
  {
    background-color: #ff0000;
  }

  .Node-contentContainer.mod-color-label-2::before
  {
    background-color: #FFA500;
  }

  .Node-contentContainer.mod-color-label-3::before
  {
    background-color: #ff9124;
  }

  .Node-contentContainer.mod-color-label-4::before
  {
    background-color: green;
  }

  .Node-contentContainer.mod-color-label-5::before
  {
    background-color: #0085ff;
  }

  .Node-contentContainer.mod-color-label-6::before
  {
    background-color: gray;
  }



/* item bulletpoints 设置bullet那个黑点的颜色，测试通过，改为蓝色*/
  .Node-bullet:before
  {
    font-size: 14px !important;
  }

/* hyperlinks 超链接样式*/
  .node-link
  {
  /* Formatting done just as in Discourse. */
    word-wrap: break-word !important;
    color: #4169E1 !important;
    cursor: pointer !important;
    background: transparent !important;
    text-decoration:underline
  }
   /* 内链款式*/
    a[href^="https://dynalist.io"]
  {
    color: green !important;
    box-sizing: border-box !important;
    font-weight: bold;
  }


  /* #tags and @tags mouse-over highlighting 标签移动上去的高亮样式*/
  .node-tag:hover
  {
    background-color: #363636 !important;
    color: white !important;
  }



/* 自定义标签开始   .node-tag[title~="#"]*/
/*设置全局标签（ # ）效果*/
  .node-tag[title*="Filter #"]
  {
    background: transparent !important;
    color: gray !important;
    font-style: italic !important;
    text-decoration: underline !important;
    font-size: 16px;
  }
/*设置全局标签（ @ ）效果*/
    .node-tag[title*="Filter @"]
  {
    background: transparent !important;
    color: gray !important;
    font-style: italic !important;
    text-decoration: underline !important;
    font-size: 16px;
  }
  .node-tag[title~="#★★★"]
  {
    background: transparent !important;
    color: red !important;
    font-style: italic !important;
    text-decoration: underline !important;
  }
    .node-tag[title~="#★★"]
  {
    background: transparent !important;
    color: #FF8C00 !important;
    font-style: italic !important;
    text-decoration: underline !important;
  }
      .node-tag[title~="#★"]
  {
    background: transparent !important;
    color: green !important;
    font-style: italic !important;
    text-decoration: underline !important;
  }
    .node-tag[title~="#!!!"]
  {
    background: transparent !important;
    color: red !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }
    .node-tag[title~="#!!"]
  {
    background: transparent !important;
    color: #FF8C00 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }
      .node-tag[title~="#!"]
  {
    background: transparent !important;
    color: green !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }
  /*测试：标签为任务*/
    .node-tag[title="is:checklist"]
  {
    background: transparent !important;
    color: green !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }

  /* 任务列表完成时候的样式*/
  .Node.is-checked .Node-checkbox, .Node.is-checked .Node-content, .Node.is-checked .Node-renderedContent, .Node.is-checked .Node-note, .Node.is-checked .Node-renderedNote
  {
    opacity: .5;
    color: blue;
  } 
/* 设置任务列表*/
  .Node.is-checklist
  {
    color: blue !important;
  }


/* 设置纵向连接线 */
  .Node.is-currentRoot .Node .Node-children
  {
    border-left: 1.1px dashed gray !important;
  }
/* 设置所有“点”的可见性*/
  .Node.is-currentRoot .Node .Node-bullet:before
  {
    visibility: visible;
  }

  /* Displays Any Collapsed bulletpoint */
  .Node.is-currentRoot .Node .is-collapsed>.Node-bullet:before
  {
    color:  #FF7F50; /*设置成橙色，等于告知下面一层有东西*/
    visibility: visible;
  }

  /* Override 2nd bulletpoint in current view */
  .Node.is-currentRoot .Node .Node .Node-bullet:before
  {
    visibility: visible;
    font-size: 14px;
  }

  /* Overrides 3rd Bulletpoint in current view */
  .Node.is-currentRoot .Node .Node .Node .Node-bullet:before
  {
    visibility: visible;
  }

1、如果您觉得不错，麻烦用推荐链接注册一下，感恩，好软件共分享。https://dynalist.io/invite/nsYfXg
2、美化方法：pro账户下，setting——Custom CSS复制粘贴上述代码到框里去，空白处点一下自动保存。