CSS主题

站点的外观取决于其使用的CSS主题。CSS意为“层叠式样式表”,它是定义页面上各种元素的规制与属性的根本方式。 作为站点管理员,您可以选择更换或修改站点的主题,并以此来满足您的个人需求。

选择一种颜色

标准模板(Standard Theme)的默认主题称为“标准主题”,这是一类颇有创意的主题. 其采用的是锐化边角与弧形边缘,给人一种激烈却又优雅的感觉。 由于它没有版权,因此其基本上可以被用于任何网站。

但是,有时你会发现这些默认的颜色并不符合你的口味。幸运的是,标准主题有八种不同的颜色:红色橙色黄色绿色蓝色紫色黑色, and 白色。最可喜的是,选择它们的步骤十分简单。

如果你想更换上述的颜色,请依照以下步骤进行操作:

  1. 前往 网站管理器(Site Manager)
  2. 从控制盘(Dashboard)中,单击“外观与指令”(Appearance & Behavior)。
  3. 找到第一个选项“主题”(Themes)。
  4. 在其加载完毕后,单击选项“你的”(You)。
  5. 找到你希望使用的颜色,单击“安装”(Install)。
  6. 操作完成以后,你就成功了!

选择一种颜色

Image Unavailable

选择八种颜色的其中一种

自定义颜色

如果这八种颜色您都不喜欢呢?幸运的是,您可以使用
标准主题着色(Standard Theme Colorification)工具对于配色方案进行自定义!该工具允许您使用特定的颜色,并为您提供生成此颜色的代码。如果您需要这样做,请依据以下步骤进行操作:

  1. 前往 网站管理器(Site Manager)
  2. 从控制盘(Dashboard)中,单击“外观与指令”(Appearance & Behavior)。
  3. 找到第一个选项“主题”(Themes)。
  4. 在其加载完毕后,单击选项“自定义”(Custom)。
  5. 找到“我的颜色”(My Colors)的主题。
  6. 将工具提供给您的代码粘贴在底部的文本框中。
    • 注意: 不要更改主题的名称!
  7. 单击“保存主题”(Save Theme)。
  8. 来到页面顶部,单击“你的”(You)。
  9. 找到“自定义标准主题”(Custom Standard Theme)的选项并选择“安装”(Install)。
  10. 操作完成以后,你就成功了!

着色工具

Image Unavailable

可能你想要一个热辣的粉色。没问题!

编辑你的主题

有时,你可能需要调整你主题的细节。例如,你想要所有链接都加上下划线。标准模板就是为了将这个过程变得简便。但是,如果你想要做到上述操作,你需要先了解何为CSS以及它的工作原理。想了解更多, W3Schools有些不错的教程。

这里的操作过程与私人站点(private sites)略有不同。如果您有私人站点,请阅读私人站点 章节。

主题会同时使用网站管理器(Site Manager)与CSS页面(CSS pages)来生效。如果您只想修改当前主题,您只需编辑“全局CSS”(Global CSS)的特殊CSS页面即可。此页面与wiki页面完全相同,但它仅允许默认状态下的管理员对其做出修改。

如需访问CSS页面,请点击主题管理(Themes Administration)页面。此页面会列出所有可供编辑或由您所建立的页面。其中会有一个名为“全球CSS”(Global CSS)。如果您单击它,它就会跳转到“全球CSS样式表”网页。您可以在那里编辑您的网页与CSS。

从头开始制作主题

可能标准主题也不符合您的需求。这完全可以理解!我们的确也鼓励您自定义您的站点!Wikidot在站点自定义方面非常出色。

您可能希望创建一个全新的主题。为此,我们希望您使用 主题管理(Themes Administration)页面。它能允许您保留您对于站点CSS所作更改的历史。

首先,您需要使用主题管理(Theme Adminstration)页面上提供的样式创建一个新的样式表页面。这样操作以后,将会出现一个包含少量代码的新页面。将您的CSS放在[[code]](代码) 标签之中。接着,这个页面将会出现在主题管理(Theme Administration)的页面中,您可以随时对它进行编辑。默认状态下,仅允许管理员编辑CSS页面。

在有了CSS页面以后,你现在需要使用 站点管理器(Site Manager)将其应用于站点。请依据以下步骤进行操作:

  1. 前往 网站管理器(Site Manager)
  2. 从控制盘(Dashboard)中,单击“外观与指令”(Appearance & Behavior)。
  3. 找到第一个选项“主题”(Themes)。
  4. 在其加载完毕后,单击选项“自定义”(Custom)。
  5. 找到”创建新主题“(Create a New Theme)选项,单击它。
  6. 你会看到一系列选项。
    • 在“要拓展的主题”(Which theme to extend)选项处,将其替换为“引导程序基数”(Bootstrap Base)。
    • 在“选择布局”(Choose layout)选项处,将其替换为“标准布局”(Standard Layout)。
  7. 在大文本框处,粘贴以下代码:
@import url('/css:THEME-NAME/code/1');
@import url('/local--theme/global-css/style.css');

注意,THEME-NAME(主题名称)是您在主题管理页面上的主题名称, 所有的小写和空格都需替换为连字符。1.

创建一个主题

Image Unavailable

注意在站点管理器中创建主题的方法

在您单击“保存主题”(Save Theme)以后,将会在网站管理器中生成一个主题。现在您需要应用它。

  1. 来到页面顶部,单击“你的”(You)。
  2. 找到您的主题并选择“安装”(Install)。
  3. 操作完成以后,你就成功了!

如果您正从头开始制作主题,了解网站的HTML框架会对您很有帮助。该框架继承于标准布局(Standard Layout),供您学习之用。同时需要注意的是,该标准布局基于引导程序(Bootstrap),因此您可以访问引导程序的实用程序与类目。

私人站点

如果您正在创建私人站点,那么主题管理(Themes Administration)的页面将无法工作。您应使用站点管理器(Site Manager).来管理所有CSS。如您需要微调站点的CSS或创建新主题,请依据以下步骤进行操作:

  1. 前往 网站管理器(Site Manager)
  2. 从控制盘(Dashboard)中,单击“外观与指令”(Appearance & Behavior)。
  3. 找到第一个选项“主题”(Themes)。
  4. 在其加载完毕后,单击选项“自定义”(Custom)。
  5. 找到名为“私人站点”(Private Site CSS)的主题。
  6. 在底部的文本框中插入任何你想要的CSS。
  7. 单击“保存主题”(Save Theme)。
  8. 如您需要微调更多,请重复上述步骤。

私人站点

Image Unavailable

在站点管理器(Site Manager)中找到“私人站点CSS”(Private Site CSS)

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License