Правим стили в Atlassian Confluence

После установки Atlassian Confluence выглядит мягко говоря не радужно — монохромный дизайн с гнетуще синей плашкой меню.

Дабы придать своему портала приглядный вид, необходимо кастомизировать (изменить) таблицу стилей, благо для этого не нужно искать на сервере папку с ".css" файлами.

Я расскажу, как без особых знаний можно «разукрасить» портал, сделав из него конфетку.
Основной принцип — если какой-то из элементов интерфейса Confluence не устраивает, в большинстве случаев его можно удалить или изменить за пару минут с помощью таблицы стилей.

Где правятся стили Confluence?

1. Логинимся с правами администратора.
2. Выбираем Browse > Confluence Admin.
3. В левой колонке находим и кликаем ссылку Stylesheet (по умолчанию, получаем пустое окно).
4. Нажимаем кнопочку Edit — здесь мы будем изменять стили.

Как получить нужный стиль?

Нам понадобиться браузер Firefox + бесплатный плагин Firebug (устанавливаем его).

1. На странице, которую нужно проанализировать, нажимаем Ctrl+Shft+C (вызывается Firebug).
2. Наводим курсор мыши на нужный элемент и получаем нужный класс (class="...") или идентификатор (id="...").

Как переписать стиль элемента?

1. Открываем окно Stylesheet.
2. Если известен класс элемента (class), то обращаемся к нему так (перед точкой — пробел):
   

   #com-atlassian-confluence.имя-класса
   {
   /* тут переопределяем стиль */
   }

3. Если известен идентификатор элемента (id)
   

   #идентификатор
   {
   /* тут переопределяем стиль */
   }

4. Можно обращаться и к конкретному элементу с конкретным стилем — смотрим примеры и учим CSS.

Примеры

Переопределяем стиль заголовка h1

#com-atlassian-confluence .wiki-content h1
{
font-size: 23px;
color: #006699;
}

Делаем шире записи в блогах

#com-atlassian-confluence .has-personal-sidebar > .page
{
margin: 0;
}

Меняем фон всех страниц, кроме главной

full-height-container > #main.has-sidebar
{
background-image: url('URL-картинки-для-фона');
}

Изменяем главную страницу (как пример)

table.dashboard td.left
{
width:50%;
}

table.dashboard td.right
{
display: none;
}

Дополнительно

Для изменения цвета некоторых элементов интерфейса возможно через: Browse > Confluence Admin > Colour Scheme.

В заключение

Процесс кастомизации портала с помощью стилей — вещь перманентная. Так Stylesheet портала, который я развиваю, содержит уже более 350 строк.
В моём случае, Stylesheet + переписывание стартовой страницы портала и стартовых страниц всех его разделов (spaces) дал отличный результат — ресурс стал более привлекательным, удобным и главное «своим» для полторы сотни сотрудников, которые работают с ним каждый день.