开始编辑空间样式表

一个空间的样式表是你开始对 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 做过多修改) 。

https://www.cwiki.us/display/CONFLUENCEWIKI/Basic+Styling+Tutorial

Confluence 6 CSS 编辑技巧的更多相关文章

  1. Confluence 6 CSS 编辑快速入门

    希望编辑空间的 CSS 样式表: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and Feel) . 然后选择 样式表(Stylesheet) ...

  2. Confluence 6 开始编辑 CSS

    希望编辑空间的样式表: 进入到空间,然后在左侧边栏中选择 空间工具 > 界面外观(Space tools > Look and Feel). 选择 样式表(Stylesheet)然后选择 ...

  3. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  4. [css 揭秘]:CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  5. VS Code:让你工作效率翻倍的23个插件和23个编辑技巧

    VS Code:让你工作效率翻倍的23个插件和23个编辑技巧 总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来. 文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问. ...

  6. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  7. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  8. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  9. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

随机推荐

  1. Debian Security Advisory(Debian安全报告) DSA-4412-1 drupal7 security update

    Debian Security Advisory(Debian安全报告) DSA-4412-1 drupal7 security update Package:drupal7 CVE ID:暂无 Dr ...

  2. 实现两线程的同步二(lockSupport的park/unpark)

    1.使用LockSupport的part/unpark实现 package com.ares.thread; import java.util.concurrent.locks.LockSupport ...

  3. WIN10配置MongoDB

    WIN10配置MongoDB 1. 下载 [MongoDB 官网下载链接](https://www.mongodb.com/download-center?jmp=nav#community) 2. ...

  4. 【译】第五篇 SQL Server安全架构和安全

    本篇文章是SQL Server安全系列的第五篇,详细内容请参考原文. 架构本质上是一个数据库对象,其他对象的一个容器,在复杂的数据库中它能够很容易的管理各组对象.架构具有重要的安全功能.在这一篇你会学 ...

  5. vue-axios

    vue axios全攻略   不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就 ...

  6. 【tmos】SpringBoot+WebSocket打包时候的注意点

    要跳过测试打包:mvn package -DskipTests否则会报以下错误 Error creating bean with name 'serverEndpointExporter' defin ...

  7. mysql 案例 ~ 表空间迁移数据与数据导入

    一  简介:mysql5.6+的表空间传输二 目的:复制数据到另一个表三 步骤   1 create table b like a ->创建一个空表   2 alter table b disc ...

  8. EL知识点总结

    EL知识点总结 - canger - 博客园http://www.cnblogs.com/canger/p/6675799.html 1 只可以获取内置对象的属性值,不可以获取JSP页面中局部java ...

  9. awk基本用法

    1  简介 awk实质是一种编程语言,基本作用在于查找和替换. 2  基本用法 有文本名称为:awk.txt 内容为: john.wang male 30 021-111111 lucy.yang f ...

  10. truncate、delete、drop区别

    语法: truncate table 表名 delete from 表名 drop table 表名 应用范围: truncate 只能对表,且不能用于参与了索引的表,不能用于外键约束引用的表 del ...