最近在用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复制粘贴上述代码到框里去，空白处点一下自动保存。
网友评论