Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt

中文标题【基本样式表指南】

本页面介绍了如何在 Confluence 开始进行自定义 CSS。

CSS 编辑快速入门

Include Page
_Editing Space CSS
_Editing Space CSS

Panel

本页面中的内容:

Table of Contents
maxLevel4
minLevel2

相关页面:


指南:修改顶部背景

Confluence 默认页面的顶部是有关站点的菜单连接,在这里定义了 快速连接浏览菜单,用户菜单和快速查找输入框。在这个示例中,我们将会尝试修改顶部的菜单部分的背景和一些自定义的图片。

  1. 创建一个自定义图片。在这个例子中,我们将会创建一个自定义头图片,使用 1046 x 61 像素。
  2. 上传自定义图片到你希望自定义的空间页面中。
  3. 注意你需要上传新图片的(在这个例子中页面 ID 是 658833839)。
  4. 为头部的修改创建你的自定义 CSS 文件。在这个例子中,我们上传的的新图片文件(被称为 header.png),针对特定的页面ID(页面 ID 为 658833839)。这个文件也在相同的空间中。

    No Format
     #header .aui-header  {
           background-image:url('../download/attachments/658833839/header.png');
           background-repeat: no-repeat;
        }
    
  5. 以空间管理员身份登录系统。
  6. 打开空间管理员界面。
  7. 单击 样式表(Stylesheet)
  8. 单击 编辑(Edit)来修改文本输入框中的代码。
  9. 张贴你自定义的 CSS 文件到文本输入框中。
  10. 单击 保存(Save)然后重新载入页面(你可能需要强制刷新你的浏览器)。空间的背景将会被修改。
  11. 自定义的头文件将会在空间的所有页面中被应用。希望删除这个修改恢复到原始状态的话,你可以简单的删除样式表中的所有内容,单击 保存(Save)就可以了。

CSS 编辑技巧

开始编辑空间样式表

一个空间的样式表是你开始对 CSS 进行自定义编辑的好的开始。在空间样式表中,包含了你所有可以进行修改的元素。当你对空间样式表进行编辑的时候,空间样式表的修改只会对你修改的空间有效,并且会应用到所有的空间页面中。在空间样式表中创建一些样式,然后进行测试,当没有问题后,你可以将这些样式应用到整个站点上。然后你可以对Confluence 的 CSS 进行更多的自定义包括调整搜索页,主面板和其他的一些整体页面。

使用正确的工具

Confluence 的 CSS 也具有相当的复杂性,Web 开发工具将会帮助你理解页面的样式表是如何被创建的的。针对一些具体的情况,你可能需要查看页面已经存在的源代码。下面的一些免费工具将会帮助你对源代码进行调试和查看。h as the following free applications will allow you to do this.

1. Firebug
Firebug,是一个 Firefox 浏览器的插件。这个插件允许你对你页面中元素的样式表进行查看。这个工具对你对当前元素的样式表进行分析非常有效,例如仅仅应用在头部的样式表。

2. Web Developer
Web Developer 是一个针对 Firefox 的插件,这个插件允许你在页面中直接对 CSS 进行编辑和创建一个新的设计。

3. CSS Edit
CSS 编辑器是一个为 Macintosh 系统编辑使用 CSS 的独立编辑器。这个编辑器能够获取当前所有的 CSS 样式表,然后允许你对这些样式表重新进行编辑。

从简单的元素开始

你可以从一些简单的原始开始编辑,通过这些编辑来看这些修改是如何工作的。当对 CSS 进行修改后,对每一个修改你都应该查看下效果,这样有助于更好的分析和解决问题。请注意一些页面的元素可能比其他页面更适合进行编辑。例如,为页面添加一个 gradient 到工具栏相对于修改整个页面的宽度能够让 CSS 更好的工作,而不会导致页面损坏。编辑合适的静态元素,例如背景图片相对于设计整个节目或者使用 JavaScript 来进行下拉菜单展示就更加精确的表现页面情况(其实也不建议在使用 JavaScript 做过多修改) 。

说明

Include Page
_CSSPermissions
_CSSPermissions