为非编码人员和设计师定制话语论坛
在软件行业，我们热爱网络开发和社区。了解如何使用HTML，CSS和其他一些免费工具制作自己的论坛。
1.使用链接创建标题！
这些图标是指您社区居住的其他地方，您的博客，网站，社交媒体渠道或帮助页面的链接！你可以做尽可能多的，或尽可能少的。
转到管理→自定义→CSS / HTML→创建新自定义→单击标题选项卡。您可以在此处放置Header图标代码。你可以把它叫做任何你想要的，我称之为“标题图标”。
第1步
插入您希望定向到的URL。
第2步
_blank在新窗口或选项卡中打开链接。这是一个值得记住的方便脚本。
第3步
找到一些你想要使用的酷图标。我建议使用FontAwesome。搜索或浏览图标，然后单击要获取图标名称的图标。您可以使用CSS前缀fa和图标名称将FontAwesome图标放置在标记的任何位置。
可选：要增加相对于容器的图标大小，请使用fa-lg （增加33％），fa-2x，fa-3x，fa-4x或fa-5x类。
第4步
这是可选的。如果您希望当某人用光标悬停在图标上时显示该名称，请在此处标记。有时，如果你有大量的图标，或者你有一个没有经验的社区，他们可能无法识别图标代表什么。拥有标签通常是一个安全的赌注。
第5步
根据需要创建上述图标链接！只需确保将它们包装在此：
第6步
现在，导航到CSS选项卡 （Header选项卡旁边）。您可以在此处粘贴以下代码。此代码将帮助您自定义背景颜色以及您希望图标从哪一侧开始。
/********** Nav Header **********/
#top-navbar {
height:44px;
background-color:#7093b5;
width:100%;
z-index: 1001;
}
div#top-navbar-links {
width:99%;
margin: 0 auto;
padding-top:5px;
max-width:1100px;
}
div#top-navbar-links a {
color:#FFFFFF;
font-size: 18px;
font-weight: lighter;
}
#navbar-left {
float: left;
margin-left: -15px;
padding-top: 8px;
}
#navbar-left a {
font-size: 20px;
padding-left: 20px;
}
#navbar-right {
float:right;
padding-top: 8px;
}
#navbar-right a {
padding-left: 20px;
}
第7步
选中Enabled框并点击Save！而已。
如果您没有立即看到更改，请重新刷新页面和/或清除缓存和Cookie。
2.添加Logo
第1步
创建一个新样式并将其命名为“Company Logo Header”。将此代码粘贴到顶部的“ 标题”标签下：
更新您希望徽标重定向到上面的粗体和斜体名称的链接。
第2步
将徽标图像上传到像Staff这样的私有类别下。创建一个新线程并上传图像。使用此线程存储论坛设计中使用的图像和文件。不要删除它！同样的方法将用于存储下一节中概述的横幅图像。
使用帖子编辑器中的上传工具栏图标，或拖放或粘贴图像。提交你的回复发布。右键单击新帖子中的图像以获取上载图像的路径，或单击编辑图标以编辑帖子并检索图像的路径。复制图像路径。将这些图像路径粘贴到基本设置中：
http://YourForumURL.com/admin/site_settings/category/required
或者导航到设置→必需→徽标URL。
你们都完成了！
3.创建一个横幅！
横幅非常适合入职用户并突出显示重要信息。它还有助于指导人们如何使用论坛并在您的社区中进行互动！通常，它们包括社区准则，学习如何使用论坛的方式或可能的相关公司信息，如即将发生的事件，错误或发布。以下是我为DreamFactory Software和Codecademy创建的横幅示例。
第1步
创建一个新样式，并将其命名为“Banner”。粘贴在下面的 CSS代码中：
试试这个更简化的代码：
// Banner
#banner {
border-radius: 0;
box-shadow: none;
background: url(“IMAGE PATH URL HERE") no-repeat;
padding: 2em 2em 1em 2em;
max-height: inherit;
background-size: cover;
background-color: rgba(255, 255, 255, 0.7);
background-blend-mode: color;
color: rgba(0,0,0,0.8);
margin-bottom: 20px;
}
#banner .close {
color: #fff;
}
#banner #banner-content h2 {
margin-bottom: 0.75em;
}
第2步
现在，您需要创建一个新线程作为横幅文本。同样，您将需要在像“staff”这样的私有类别下创建一个新线程。
恭喜！您刚刚定制了您的Discourse论坛的外观和感觉。让我知道您对本教程的看法，如果您有任何建议或反馈，请在下面的评论中留下。
查看原文 >>
