开始编辑空间样式表

一个空间的样式表是你开始对 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-4404-1 chromium

    Package : chromium CVE ID : CVE-2019-5786 Clement Lecigne在chromium的文件读取器实现中发现了一个use-after-free(释放后重用 ...

  2. PHP获取表单并使用数组存储 疯狂提示 Notice: Undefined offset

    $answer=array(); $answer[0]='0'; for($i=1;$i<=$QUESTION_COUNT;$i++){ $answer[$i]=$_POST[(string)$ ...

  3. 内容分享-迅为IMX6开发板编译问题及解决方法

    [经验分享]IMX6开发板编译问题及解决方法本文转自迅为IMX6开发板售后讨论群,分享给大家~ 物理主机 win10 64 位专业版.虚拟机 VM12 Pro.开发环境采用迅为提供的开发环境: Ubu ...

  4. scrapy框架的每个模块的用途

    ## 一.scrapy框架的每个模块的用途 1.spiders: 自定义爬虫 定义允许爬取的范围 定义开始爬取的url parse:一定要重写 start_request:一般不需要重写,可以通过重写 ...

  5. struts2简单入门-参数传递的三种方式

    三种方式的简单说明 属性传递 把参数定义为属性提供get/set方法. 使用情况 参数少,不需要共享. 演示代码 public class LoginAction extends ActionSupp ...

  6. git 生成公钥 使用命令行无需输入用户名密码(windows)

    之前设置过一次,后来就忘记了,今天改完密码之后发现命令行clone时验证身份失败,重新设置公钥,记录一下 1. 由于之前设置过公钥,所以不用输入用户名密码就可以执行git命令.现在密码变了,取消公钥, ...

  7. sql-connectionStrings

    <connectionStrings> <add name="ClassReservatConnectionString" connectionString=&q ...

  8. Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)

    题目链接: D - Coconuts  HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...

  9. 转:Java项目开发规范参考

    Java项目开发规范参考 - KevinLee的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/u011383131/article/details/51227860 ...

  10. python中的正则表达式--re模块

    参考博客:https://www.cnblogs.com/tina-python/p/5508402.html 这里说一下python的re模块即正则表达式模块,先列出其中涉及到的各种字符和模式等: ...