样式设置
发表于 ： 2024年 5月 1日 08:19
Jannah主题的优点之一是自定义网站样式的最简单方法。使用样式设置，您可以执行以下操作：
一键将您的网站转换为深色皮肤。
为网站的每个部分自定义颜色，如页头、页脚、主导航、辅助导航、内容、移动菜单等。
选择我们的预定义皮肤中的一个，您经常会喜欢其中的一个。
想要更多的想象力，你可以在自定义代码区写下你的自定义风格。
现在让我们找出一些更明显的设置：
一、样式设置
1.Dark Skin-启用/禁用站点深色皮肤。
2.Apply custom styling by inline code-如果由于样式文件重写权限而导致样式出现问题，请选中此选项。
二、自定义主体类
将一个或多个自定义类（通过用空格分隔主题）添加到body标签以进行更多自定义。
三、主要颜色
1.Predefined Skins-从可用的15个预定义皮肤中选择您最喜欢的皮肤，选择一个后，以下样式选项将自动填充。
2.Custom Primary Color-站点主要颜色。
四、主体
1.Disable Boxed/Framed Layout Shadows-仅在方框和框架布局中启用/禁用站点周围的阴影。
2.Highlighted Text Color-鼠标选择某些单词或字符时的文本背景。
3.Links Text Color-所有链接在正常状态下的颜色（不是悬停或聚焦）。这将覆盖新闻块上的自定义颜色。
4.Links text HOVER color-悬停状态下所有链接的颜色，这将覆盖新闻块的自定义颜色。
5.Borders Color-这是样式设置中最强大、最棒的选项之一，可以让您更改网站上所有边框的颜色。
五、辅助导航
您可以更改辅助导航背景颜色、文本颜色、链接颜色、鼠标悬停时的链接颜色和突发新闻标签背景。
您可以从Jannah options > Header > Secondary Nav Settings控制辅助导航位置（页头上方或下方），或根据需要隐藏或更改其组件。
六、页头
1.Rainbow Line Above Header-启用/禁用页头上方的彩虹线。
2.Background Color-页头背景颜色
3.Background Image - 页头背景图片选项
4.Disable Header Shadows启用/禁用页头下方的阴影。
七、主要导航样式
您可以从Jannah options > Header > Main Nav Settings控制主导航位置（页头上方或下方），或根据需要隐藏或更改其组件。
1.Background Color-主导航背景色。
2.Text Color-主导航菜单上的所有文本颜色，如超级菜单文章元数据。
3.Links Color-所有链接的颜色。
4.Links Color on mouse over-鼠标悬停时链接颜色。
5.Main Nav Border Top Color-您可以在主导航上方绘制边框，并从这里控制其颜色。
6.Main Nav Border Top Width-不带单位的整数，例如1、2、3。
7.Main Nav Border Bottom Color-底部边框颜色。
8.Main Nav Border Bottom Width-不带单位的整数，例如1、2、3。
八、主要内容区域样式
1.Background Color-主要内容背景色。
2.Background image-或者您可以设置背景图像，而不是以前的灰色。
3.In Post Links-Color-文章内容区域中所有链接的颜色。
4.In Post Links-Color on mouse over-文章内容区域所有链接的鼠标悬停颜色。
九、页脚和版权区域
您可以通过最简单的方式自定义页脚和版权区域的每个元素，您可以设置背景颜色和图像，在页脚区域上方绘制边框，更改小工具标题颜色，更改文本和链接颜色，控制页脚区域的边距和填充间距。
此外，您还可以为版权区域设置背景色和图像，更改文本和链接的颜色。
下图将显示页脚和版权区域选项预览。
十、手机菜单
您可以完全控制手机菜单样式，可以将背景更改为纯色、渐变色或图像，还可以更改链接、社交图标和移动菜单图标的颜色。
1.Mobile Header Background Color-为手机版页头设置自定义背景色。
2.Mobile Header Background Image-为手机版页头设置自定义背景图像。
3.Mobile Menu Icon-控制手机菜单图标的颜色。
4.Links Color-控制菜单链接的颜色。
5.Social Icons Color-控制社交图标的颜色。
6.Search Button color-控制搜索按钮的颜色。
7.Mobile Menu Background-在实体、渐变和图像之间进行选择。
8.Background Gradient Color 1-背景渐变色1。
9.Background Gradient Color 2-背景渐变色2。
十一、自定义CSS
为了进行更多的定制，Jannah提供了一个添加您的自定义风格的地方。
1.Custom CSS-嵌入在此区域的代码将适用于所有屏幕大小，除非您在媒体查询中指定代码片段。
2.Tablets-仅适用于平板电脑，从768px到1024px。
3.Phones-仅适用于0到768的手机。
一键将您的网站转换为深色皮肤。
为网站的每个部分自定义颜色，如页头、页脚、主导航、辅助导航、内容、移动菜单等。
选择我们的预定义皮肤中的一个，您经常会喜欢其中的一个。
想要更多的想象力，你可以在自定义代码区写下你的自定义风格。
现在让我们找出一些更明显的设置：
一、样式设置
- 样式设置区域
- file-vR3fYYnjnr.png (15.89 KiB) 查看 6841 次
2.Apply custom styling by inline code-如果由于样式文件重写权限而导致样式出现问题，请选中此选项。
二、自定义主体类
- 自定义Body类区域
- IMG_20240501_082126.png (9.3 KiB) 查看 6840 次
三、主要颜色
- 主要颜色设置区域
- file-UEWLy1ed5k.jpg (21.05 KiB) 查看 6840 次
2.Custom Primary Color-站点主要颜色。
四、主体
- Body设置区域
- file-xtV3nD8Yn9.jpg (41.46 KiB) 查看 6839 次
2.Highlighted Text Color-鼠标选择某些单词或字符时的文本背景。
3.Links Text Color-所有链接在正常状态下的颜色（不是悬停或聚焦）。这将覆盖新闻块上的自定义颜色。
4.Links text HOVER color-悬停状态下所有链接的颜色，这将覆盖新闻块的自定义颜色。
5.Borders Color-这是样式设置中最强大、最棒的选项之一，可以让您更改网站上所有边框的颜色。
- 边框色预览
- IMG_20240501_082839.png (666.18 KiB) 查看 6839 次
您可以更改辅助导航背景颜色、文本颜色、链接颜色、鼠标悬停时的链接颜色和突发新闻标签背景。
您可以从Jannah options > Header > Secondary Nav Settings控制辅助导航位置（页头上方或下方），或根据需要隐藏或更改其组件。
六、页头
- 页头设置区域
- file-tLAaIPSInl.jpg (32.53 KiB) 查看 6838 次
- 彩虹线预览
- file-jc1cOfyYsU.png (26.31 KiB) 查看 6838 次
- 页头背景颜色预览
- file-O21PCbDmBG.png (84.74 KiB) 查看 6838 次
- 页头背景图片预览
- file-DVYzAmcaHN.png (117.33 KiB) 查看 6838 次
- 页头下方阴影预览
- file-BnLrNctBaD.png (254.71 KiB) 查看 6838 次
您可以从Jannah options > Header > Main Nav Settings控制主导航位置（页头上方或下方），或根据需要隐藏或更改其组件。
- 主要导航设置区域
- file-olkmPUSfU4.jpg (54.91 KiB) 查看 6837 次
2.Text Color-主导航菜单上的所有文本颜色，如超级菜单文章元数据。
3.Links Color-所有链接的颜色。
4.Links Color on mouse over-鼠标悬停时链接颜色。
5.Main Nav Border Top Color-您可以在主导航上方绘制边框，并从这里控制其颜色。
6.Main Nav Border Top Width-不带单位的整数，例如1、2、3。
7.Main Nav Border Bottom Color-底部边框颜色。
8.Main Nav Border Bottom Width-不带单位的整数，例如1、2、3。
- 主导航上下边框预览
- file-ZOLDpzu4l2.png (24.1 KiB) 查看 6836 次
- 主要内容设置区域
- file-tsqfIT6hCY.jpg (37.3 KiB) 查看 6836 次
- 内容区背景色预览
- file-lGAM7CHpdi.jpg (144.68 KiB) 查看 6836 次
3.In Post Links-Color-文章内容区域中所有链接的颜色。
4.In Post Links-Color on mouse over-文章内容区域所有链接的鼠标悬停颜色。
九、页脚和版权区域
您可以通过最简单的方式自定义页脚和版权区域的每个元素，您可以设置背景颜色和图像，在页脚区域上方绘制边框，更改小工具标题颜色，更改文本和链接颜色，控制页脚区域的边距和填充间距。
此外，您还可以为版权区域设置背景色和图像，更改文本和链接的颜色。
- 页脚和版权设置区域
- file-75Z8GDEua4.png (160.48 KiB) 查看 6835 次
- 页脚和版权区预览
- file-WY69gqsllg.png (800.84 KiB) 查看 6835 次
您可以完全控制手机菜单样式，可以将背景更改为纯色、渐变色或图像，还可以更改链接、社交图标和移动菜单图标的颜色。
- 手机菜单预览
- file-qKw9dlz9Rs.jpg (165.99 KiB) 查看 6834 次
- 手机菜单设置区域
- file-hIazySlnbB.png (92.7 KiB) 查看 6834 次
2.Mobile Header Background Image-为手机版页头设置自定义背景图像。
3.Mobile Menu Icon-控制手机菜单图标的颜色。
- 手机菜单图标预览
- file-ZHqQIep6MM.png (60.01 KiB) 查看 6834 次
5.Social Icons Color-控制社交图标的颜色。
6.Search Button color-控制搜索按钮的颜色。
7.Mobile Menu Background-在实体、渐变和图像之间进行选择。
8.Background Gradient Color 1-背景渐变色1。
9.Background Gradient Color 2-背景渐变色2。
十一、自定义CSS
为了进行更多的定制，Jannah提供了一个添加您的自定义风格的地方。
- 自定义CSS区域
- file-Y4h4azYJD0.jpg (58.36 KiB) 查看 6833 次
2.Tablets-仅适用于平板电脑，从768px到1024px。
3.Phones-仅适用于0到768的手机。