Workflowy | 自定义全局样式

要实现Workflowy自定义全局样式需要使用到插件WFx，这是一个国外Workflowy用户使用的比较多的自定义跳转工具，国内使用的似乎并不多。这里的自定义全局样式是基于workflowy的功能，只是目前没有开放使用，只能通过WFx进入。

步骤

1.安装WFx插件

2.复制下面代码

1

(function customCssWidget_0_3(){const showEditDialog=()=>ioc("dialogs").show("dialogs:custom-css");const htmlEscText=str=>str.replace(/&/g,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;").replace(/"/g,"&quot;");const toggleSheet=sheet=>sheet.disabled=!sheet.disabled;function getCustomStyleSheet(){for(const sheet of document.styleSheets){if(sheet.ownerNode.dataset.customCss){return sheet}}}function showCSSDialog(title,button1,button2){const addButton=(num,name)=>`<button type="button" class="btnX" id="btn${num.toString()}">${htmlEscText(name)}</button>`;const buttonStyle='.btnX{font-size:18px;background-color:steelblue;border:2px solid;border-radius:20px;color:#fff;padding:5px 15px;margin-top:16px;margin-right:16px}.btnX:focus{border-color:#c4c4c4}';const buttons=addButton(1,button1)+addButton(2,button2);WF.showAlertDialog(`<style>${htmlEscText(buttonStyle)}</style><div>${buttons}</div>`,title);const intervalId=setInterval((function(){let btn1=document.getElementById("btn1");if(btn1){clearInterval(intervalId);const btn2=document.getElementById("btn2");btn1.focus();btn1.onclick=()=>{WF.hideDialog();toggleSheet(customSheet);if(focus)WF.editItemName(focus)};btn2.onclick=()=>{showEditDialog()}}}),50)}const focus=WF.focusedItem();const customSheet=getCustomStyleSheet();customSheet?showCSSDialog("Custom CSS",customSheet.disabled?"Enable":"Disable","Edit"):showEditDialog()})();

3.设定快捷方式，在浏览器中选中插件将代码复制到如下图所示的位置

4.在web端按下 Alt + W 弹出输入框，在输入框内输入设定的“css”

5.在弹出窗口里操作，完成。

备注：修改样式时在编辑器里编辑，完成后粘贴到窗口里面。

参考样式

• https://github.com/akaready/styleflowy-for-workflowy ，已经多端适配（不过似乎有一点样式问题）
• https://seyee.co/post/workflowy_style/

选择器说明

将标注中“Comversations”的颜色调整为灰#777

  .comment-container > .name > .content > .innerContentContainer{
    color:#777 !important;
}

改变带有特定标签的节点的字体颜色

/* 将带有#archives标签的节点的字体颜色调整为#777 */
.name:has(span[data-val="#archives"]) {
  color: #777;
}

/* 改变#archives下 标签 、 链接 、日期 的样式 */
.name:has(span[data-val="#archives"]) > .content > .innerContentContainer >,
.name:has(span[data-val="#archives"]) > .content > .innerContentContainer > .contentTag,
.name:has(span[data-val="#archives"]) > .content > .innerContentContainer > .contentLink,
.name:has(span[data-val="#archives"]) > .content > .innerContentContainer > .contentTag > .contentTagText {
  color: #777;
  text-decoration: none !important;
}

/* 将标签的透明度调整为0.2 */
.noted > .name .contentTag[data-val="#archives"] {
opacity: 0.2;
}

/* 鼠标经过时标签透明度调整为1 */
.noted > .name .contentTag[data-val="#archives"]:hover {
opacity: 1;
}

/* 改变“notes”的 标签 和 链接 */
.name:has(span[data-val="#archives"]) + .notes > .content > .innerContentContainer,
.name:has(span[data-val="#archives"]) + .notes > .content > .innerContentContainer > .contentTag,
.name:has(span[data-val="#archives"]) + .notes > .content > .innerContentContainer > .contentLink,
.name:has(span[data-val="#archives"]) + .notes > .content > .innerContentContainer > .contentTag > .contentTagText {
    color: #777 !important; 
    text-decoration: none !important;

}
.name:has(span[data-val="#archives"]) + .notes > .content > .innerContentContainer > .contentTag{
    background: none !important; ;
}
    

这是第05/50篇笔记