CSS主题

站点的外观取决于其使用的CSS主题。CSS意为“[http://www.w3schools.com/css/ 层叠式样式表]”，它是定义页面上各种元素的规制与属性的根本方式。 作为站点管理员，您可以选择更换或修改站点的主题，并以此来满足您的个人需求。 [[toc]] + 选择一种颜色 [http://css.wikidot.com/theme 标准模板（Standard Theme）]的默认主题称为“标准主题”，这是一类颇有创意的主题.  其采用的是锐化边角与弧形边缘，给人一种激烈却又优雅的感觉。 由于它没有版权，因此其基本上可以被用于任何网站。 但是，有时你会发现这些默认的颜色并不符合你的口味。幸运的是，标准主题有八种不同的颜色：**##AD2020|红色##**，**##B07834|橙色##**，**##908149|黄色##**，**##367A00|绿色##**，**##005CAD|蓝色##**，**##A65E93|紫色##**，**##000|黑色##**, and **##AAA|白色##**。最可喜的是，选择它们的步骤十分简单。 如果你想更换上述的颜色，请依照以下步骤进行操作： [[div class="row"]] [[div class="col-md-7"]] # 前往 [/_admin 网站管理器（Site Manager）]。 # 从控制盘（Dashboard）中，单击“外观与指令”（Appearance & Behavior）。 # 找到第一个选项“主题”（Themes）。 # 在其加载完毕后，单击选项“你的”（You）。 # 找到你希望使用的颜色，单击“安装”（Install）。 # 操作完成以后，你就成功了！ [[/div]] [[div class="col-md-5"]] [[include :snippets:modal-image |image=http://css.wikidot.com/local--files/csi:help:css-themes/css_chooseColor.png |name=选择一种颜色 |size=lg |heading=选择一种颜色 |caption=选择八种颜色的其中一种 ]] [[/div]] [[/div]] ++ 自定义颜色 如果这八种颜色您都不喜欢呢？幸运的是，您可以使用 **[*http://css.wdfiles.com/local--files/program%3Astandard-theme-colorification/stc_html.html 标准主题着色（Standard Theme Colorification）]**工具对于配色方案进行自定义！该工具允许您使用特定的颜色，并为您提供生成此颜色的代码。如果您需要这样做，请依据以下步骤进行操作： [[div class="row"]] [[div class="col-md-7"]] # 前往 [/_admin 网站管理器（Site Manager）]。 # 从控制盘（Dashboard）中，单击“外观与指令”（Appearance & Behavior）。 # 找到第一个选项“主题”（Themes）。 # 在其加载完毕后，单击选项“自定义”（Custom）。 # 找到“我的颜色”（My Colors）的主题。 # 将工具提供给您的代码粘贴在底部的文本框中。  * [[span class="text-warning"]]**注意：** 不要更改主题的名称！[[/span]] # 单击“保存主题”（Save Theme）。 # 来到页面顶部，单击“你的”（You）。 # 找到“自定义标准主题”（Custom Standard Theme）的选项并选择“安装”（Install）。 # 操作完成以后，你就成功了！ [[/div]] [[div class="col-md-5"]] [[include :snippets:modal-image |image=http://css.wikidot.com/local--files/csi:help:css-themes/css_colorification.png |name=着色工具 |size=lg |heading=着色工具 |caption=可能你想要一个热辣的粉色。没问题！ ]] [[/div]] [[/div]] + 编辑你的主题 有时，你可能需要调整你主题的细节。例如，你想要所有链接都加上下划线。标准模板就是为了将这个过程变得简便。但是，如果你想要做到上述操作，你需要先了解何为CSS以及它的工作原理。想了解更多， [*http://www.w3schools.com/css/ W3Schools]有些不错的教程。 [[div class="alert alert-warning"]] 这里的操作过程与**私人站点**（private sites）略有不同。如果您有私人站点，请阅读[#private-sites 私人站点] 章节。 [[/div]] 主题会同时使用网站管理器（Site Manager）与CSS页面（CSS pages）来生效。如果您只想修改当前主题，您只需编辑“全局CSS”（Global CSS）的特殊CSS页面即可。此页面与wiki页面完全相同，但它仅允许默认状态下的管理员对其做出修改。 如需访问CSS页面，请点击[[[http://css.wikidot.com/css:_home|主题管理（Themes Administration）]]]页面。此页面会列出所有可供编辑或由您所建立的页面。其中会有一个名为“全球CSS”（Global CSS）。如果您单击它，它就会跳转到“全球CSS样式表”网页。您可以在那里编辑您的网页与CSS。 + 从头开始制作主题 可能标准主题也不符合您的需求。这完全可以理解！我们的确也鼓励您自定义您的站点！Wikidot在站点自定义方面非常出色。 您可能希望创建一个全新的主题。为此，我们希望您使用 [[[http://css.wikidot.com/css:_home|主题管理（Themes Administration）]]]页面。它能允许您保留您对于站点CSS所作更改的历史。 首先，您需要使用主题管理（Theme Adminstration）页面上提供的样式创建一个新的样式表页面。这样操作以后，将会出现一个包含少量代码的新页面。将您的CSS放在{{[[cod@@e@@]]}}（代码） 标签之中。接着，这个页面将会出现在主题管理（Theme Administration）的页面中，您可以随时对它进行编辑。默认状态下，仅允许管理员编辑CSS页面。 在有了CSS页面以后，你现在需要使用 [/_admin 站点管理器（Site Manager）]将其应用于站点。请依据以下步骤进行操作： [[div class="row"]] [[div class="col-md-7"]] # 前往 [/_admin 网站管理器（Site Manager）]。 # 从控制盘（Dashboard）中，单击“外观与指令”（Appearance & Behavior）。 # 找到第一个选项“主题”（Themes）。 # 在其加载完毕后，单击选项“自定义”（Custom）。 # 找到”创建新主题“（Create a New Theme）选项，单击它。 # 你会看到一系列选项。  * 在“要拓展的主题”（Which theme to extend）选项处，将其替换为“引导程序基数”（Bootstrap Base）。  * 在“选择布局”（Choose layout）选项处，将其替换为“标准布局”（Standard Layout）。 # 在大文本框处，粘贴以下代码： [[code type="css"]] @import url('/css:THEME-NAME/code/1'); @import url('/local--theme/global-css/style.css'); [[/code]] 注意，{{THEME-NAME}}（主题名称）是您在主题管理页面上的主题名称， //所有的小写和空格都需替换为连字符。[[footnote]] 原文为“hypens”，可能为“hyphens”（连字符）的笔误。 [[/footnote]]。//. [[/div]] [[div class="col-md-5"]] [[include :snippets:modal-image |image=http://css.wikidot.com/local--files/csi:help:css-themes/css_makeTheme.png |name=创建一个主题 |size=lg |heading=创建一个主题 |caption=注意在站点管理器中创建主题的方法 ]] [[/div]] [[/div]] 在您单击“保存主题”（Save Theme）以后，将会在网站管理器中生成一个主题。现在您需要应用它。 # 来到页面顶部，单击“你的”（You）。 # 找到您的主题并选择“安装”（Install）。 # 操作完成以后，你就成功了！ [[div class="alert alert-info"]] 如果您正从头开始制作主题，了解网站的HTML框架会对您很有帮助。该框架继承于[http://standard-template.wikidot.com/main:layout 标准布局（Standard Layout）]，供您学习之用。同时需要注意的是，该标准布局基于[*http://getbootstrap.com 引导程序（Bootstrap）]，因此您可以访问引导程序的实用程序与类目。 [[/div]] [[# private-sites]] + 私人站点 如果您正在创建私人站点，那么[[[http://css.wikidot.com/css:_home|主题管理（Themes Administration）]]]的页面将无法工作。您应使用[/_admin 站点管理器（Site Manager）].来管理所有CSS。如您需要微调站点的CSS或创建新主题，请依据以下步骤进行操作： [[div class="row"]] [[div class="col-md-7"]] # 前往 [/_admin 网站管理器（Site Manager）]。 # 从控制盘（Dashboard）中，单击“外观与指令”（Appearance & Behavior）。 # 找到第一个选项“主题”（Themes）。 # 在其加载完毕后，单击选项“自定义”（Custom）。 # 找到名为“私人站点”（Private Site CSS）的主题。 # 在底部的文本框中插入任何你想要的CSS。 # 单击“保存主题”（Save Theme）。 # 如您需要微调更多，请重复上述步骤。 [[/div]] [[div class="col-md-5"]] [[include :snippets:modal-image |image=http://css.wikidot.com/local--files/csi:help:css-themes/css_privatesites.png |name=私人站点 |size=lg |heading=私人站点 |caption=在站点管理器（Site Manager）中找到“私人站点CSS”（Private Site CSS） ]] [[/div]] [[/div]]