B2主题美化开发系列：B2主题单个文档界面只能显示当前分类的帮助文档，用户切换不方便。因此老白将其改为更加便捷、易于使用的现代化导航设计，支持最多三级文档分类、搜索文档工具优化，演示效果如下：
主要是修改模板文件和CSS样式美化，支持多级文档分类
single-document.php
文件在主题根目录，替换或者修改：
style.css
添加到文件底部：
/* 修改常见问题目录样式开始-https://www.dzw6.com/35945.html */
.b2-document-content .document-search-left h2,
.b2-document-content .document-left-item h2,
.b2-document-content .document-faq-box h2 {
font-size: 17px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 18px;
margin-top: -14px;
}
.b2-document-content .document-faq-box .document-faq-accordion {
margin-top: 8px;
}
.b2-document-content .document-faq-box .document-faq-section {
border-top: 1px solid #f3f3f3;
padding-top: 8px;
margin-top: 8px;
}
.b2-document-content .document-faq-box .document-faq-section:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.b2-document-content .document-faq-box .document-faq-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
padding: 4px 0;
color: #222;
}
.b2-document-content .document-faq-box .document-faq-summary::-webkit-details-marker {
display: none;
}
.b2-document-content .document-faq-box .document-faq-title {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
.b2-document-content .document-faq-box .document-faq-toggle {
font-size: 12px;
font-weight: 400;
color: #777;
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1;
flex: 0 0 auto;
margin-left: 12px;
}
.b2-document-content .document-faq-box .document-faq-toggle i {
font-size: 16px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.b2-document-content .document-faq-box .document-faq-toggle i:before {
display: inline-block;
}
.b2-document-content .document-faq-box .document-faq-toggle-close {
display: none;
}
.b2-document-content .document-faq-box details[open]>.document-faq-summary .document-faq-toggle-open {
display: none;
}
.b2-document-content .document-faq-box details[open]>.document-faq-summary .document-faq-toggle-close {
display: inline-flex;
}
.b2-document-content .document-faq-box .document-faq-panel {
margin-top: 6px;
}
.b2-document-content .document-faq-box .document-faq-subcat+.document-faq-subcat {
margin-top: 12px;
}
.b2-document-content .document-faq-box .document-faq-subcat .document-cat-rot {
font-size: 14.5px;
font-weight: 500;
line-height: 1.6;
margin-top: 6px;
}
.b2-document-content .document-faq-box .document-faq-panel>.document-faq-subcat {
margin-left: 10px;
}
.b2-document-content .document-faq-box .document-faq-subcat .document-faq-subcat {
margin-left: 20px;
}
.b2-document-content .document-faq-box ul.document-faq-posts {
list-style: none;
margin-left: 18px;
}
.b2-document-content .document-faq-box ul.document-faq-posts li {
margin-top: 6px;
font-size: 14px;
line-height: 1.8;
}
.b2-document-content .document-faq-box ul.document-faq-posts a {
color: #222;
}
.b2-document-content .document-faq-box ul.document-faq-posts a:hover {
color: #eb7350;
}
.b2-document-content .document-faq-box ul.document-faq-posts li.current {
color: #eb7350;
font-weight: 600;
}
.b2-document-content .document-search-left .single-document-search {
width: 100%;
}
.b2-document-content .document-search-left .single-document-search input {
background-color: #f5f5f5;
}
.b2-document-content .document-search-left .single-document-search input {
padding-left: 10px;
padding-right: 40px;
}
.b2-document-content .document-search-left .single-document-search button {
left: auto;
right: 0;
}
.document-left-item {
padding: 30px 17px;
}
/* 修改常见问题目录样式结束-https://www.dzw6.com/35945.html */
定制开发接单
B2主题可扩展的东西很多，欢迎大家进行个性化定制以及功能开发。
B2主题微信交流群：x c b t m w（防爬虫间隔符）
7B2主题阅读权限管理插件B2 Perm Manager Pro
建站经验
B2主题通用美化：https://www.dzw6.com/tag/b2-theme-beautify
WordPress顶级优化：https://www.dzw6.com/tag/wordpress_optimization