样式设置

[Jannah]

Jannah主题的优点之一是自定义网站样式的最简单方法。使用样式设置，您可以执行以下操作：

一键将您的网站转换为深色皮肤。

为网站的每个部分自定义颜色，如页头、页脚、主导航、辅助导航、内容、移动菜单等。

选择我们的预定义皮肤中的一个，您经常会喜欢其中的一个。

想要更多的想象力，你可以在自定义代码区写下你的自定义风格。

现在让我们找出一些更明显的设置：

一、样式设置

样式设置区域

file-vR3fYYnjnr.png (15.89 KiB) 查看 6840 次

1.Dark Skin-启用/禁用站点深色皮肤。

2.Apply custom styling by inline code-如果由于样式文件重写权限而导致样式出现问题，请选中此选项。

二、自定义主体类

自定义Body类区域

IMG_20240501_082126.png (9.3 KiB) 查看 6839 次

将一个或多个自定义类（通过用空格分隔主题）添加到body标签以进行更多自定义。

三、主要颜色

主要颜色设置区域

file-UEWLy1ed5k.jpg (21.05 KiB) 查看 6839 次

1.Predefined Skins-从可用的15个预定义皮肤中选择您最喜欢的皮肤，选择一个后，以下样式选项将自动填充。

2.Custom Primary Color-站点主要颜色。

四、主体

Body设置区域

file-xtV3nD8Yn9.jpg (41.46 KiB) 查看 6838 次

1.Disable Boxed/Framed Layout Shadows-仅在方框和框架布局中启用/禁用站点周围的阴影。

2.Highlighted Text Color-鼠标选择某些单词或字符时的文本背景。

3.Links Text Color-所有链接在正常状态下的颜色（不是悬停或聚焦）。这将覆盖新闻块上的自定义颜色。

4.Links text HOVER color-悬停状态下所有链接的颜色，这将覆盖新闻块的自定义颜色。

5.Borders Color-这是样式设置中最强大、最棒的选项之一，可以让您更改网站上所有边框的颜色。

边框色预览

IMG_20240501_082839.png (666.18 KiB) 查看 6838 次

五、辅助导航

您可以更改辅助导航背景颜色、文本颜色、链接颜色、鼠标悬停时的链接颜色和突发新闻标签背景。

您可以从Jannah options > Header > Secondary Nav Settings控制辅助导航位置（页头上方或下方），或根据需要隐藏或更改其组件。

六、页头

页头设置区域

file-tLAaIPSInl.jpg (32.53 KiB) 查看 6837 次

1.Rainbow Line Above Header-启用/禁用页头上方的彩虹线。

彩虹线预览

file-jc1cOfyYsU.png (26.31 KiB) 查看 6837 次

2.Background Color-页头背景颜色

页头背景颜色预览

file-O21PCbDmBG.png (84.74 KiB) 查看 6837 次

3.Background Image - 页头背景图片选项

页头背景图片预览

file-DVYzAmcaHN.png (117.33 KiB) 查看 6837 次

4.Disable Header Shadows启用/禁用页头下方的阴影。

页头下方阴影预览

file-BnLrNctBaD.png (254.71 KiB) 查看 6837 次

七、主要导航样式

您可以从Jannah options > Header > Main Nav Settings控制主导航位置（页头上方或下方），或根据需要隐藏或更改其组件。

主要导航设置区域

file-olkmPUSfU4.jpg (54.91 KiB) 查看 6836 次

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。

主导航上下边框预览

file-ZOLDpzu4l2.png (24.1 KiB) 查看 6835 次

八、主要内容区域样式

主要内容设置区域

file-tsqfIT6hCY.jpg (37.3 KiB) 查看 6835 次

1.Background Color-主要内容背景色。

内容区背景色预览

file-lGAM7CHpdi.jpg (144.68 KiB) 查看 6835 次

2.Background image-或者您可以设置背景图像，而不是以前的灰色。

3.In Post Links-Color-文章内容区域中所有链接的颜色。

4.In Post Links-Color on mouse over-文章内容区域所有链接的鼠标悬停颜色。

九、页脚和版权区域

您可以通过最简单的方式自定义页脚和版权区域的每个元素，您可以设置背景颜色和图像，在页脚区域上方绘制边框，更改小工具标题颜色，更改文本和链接颜色，控制页脚区域的边距和填充间距。

此外，您还可以为版权区域设置背景色和图像，更改文本和链接的颜色。

页脚和版权设置区域

file-75Z8GDEua4.png (160.48 KiB) 查看 6834 次

下图将显示页脚和版权区域选项预览。

页脚和版权区预览

file-WY69gqsllg.png (800.84 KiB) 查看 6834 次

十、手机菜单

您可以完全控制手机菜单样式，可以将背景更改为纯色、渐变色或图像，还可以更改链接、社交图标和移动菜单图标的颜色。

手机菜单预览

file-qKw9dlz9Rs.jpg (165.99 KiB) 查看 6833 次

手机菜单设置区域

file-hIazySlnbB.png (92.7 KiB) 查看 6833 次

1.Mobile Header Background Color-为手机版页头设置自定义背景色。

2.Mobile Header Background Image-为手机版页头设置自定义背景图像。

3.Mobile Menu Icon-控制手机菜单图标的颜色。

手机菜单图标预览

file-ZHqQIep6MM.png (60.01 KiB) 查看 6833 次

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提供了一个添加您的自定义风格的地方。

自定义CSS区域

file-Y4h4azYJD0.jpg (58.36 KiB) 查看 6832 次

1.Custom CSS-嵌入在此区域的代码将适用于所有屏幕大小，除非您在媒体查询中指定代码片段。

2.Tablets-仅适用于平板电脑，从768px到1024px。

3.Phones-仅适用于0到768的手机。