Styling Fonts in Confluence
Confluence provides the ability to adjust its visual style via Cascading Style Sheets (CSS). This tutorial shows you to change the fonts and font sizes of a Confluence page, using a few lines of CSS.
Below is the code for the custom font. Copy and paste it into the Space Stylesheet form within the Space Administration section.
Related pages:
- Basic Styling Tutorial
- Styling Confluence with CSS
Changing the fonts
In order to customize the fonts in Confluence, you first need to set the body font to the font you want. Secondly, you may want to adjust the font size because different fonts have different relative sizes.
The relevant CSS is shown below. It changes Confluence’s font from the default of Helvetica/Arial – sans serif to Times/Times New Roman – serif. To adjust for the fact that Times is a bit smaller than Helvetica, we increase the font size to 14 pixels. The many styles that ‘wiki-content’ in their definition are necessary to change the font size for all the tags in the wiki content.
To edit a space’s stylesheet:
- Go to the space and choose Space tools >Look and Feel from the bottom of the sidebar
- Choose Stylesheet then Edit.
- Paste your custom CSS into the text field.
- Save your changes. The new CSS will be visible on all content pages in the space.
.wiki-content, .wiki-content p, .wiki-content table, .wiki-content tr, .wiki-content td, .wiki-content th, .wiki-content ol, .wiki-content ul, .wiki-content li
Notes
Note: By default, only system administrators can edit the CSS for a space or for the site. To allow any user with Space Admin permissions to edit the CSS for a space, go to Administration > General Configuration > Security Configuration and select Custom Stylesheets for Spaces.
Правим стили в Atlassian Confluence
После установки Atlassian Confluence выглядит мягко говоря не радужно — монохромный дизайн с гнетуще синей плашкой меню.
Дабы придать своему портала приглядный вид, необходимо кастомизировать (изменить) таблицу стилей, благо для этого не нужно искать на сервере папку с «.css» файлами.
Я расскажу, как без особых знаний можно «разукрасить» портал, сделав из него конфетку.
Основной принцип — если какой-то из элементов интерфейса Confluence не устраивает, в большинстве случаев его можно удалить или изменить за пару минут с помощью таблицы стилей.
Где правятся стили Confluence?
- Логинимся с правами администратора.
- Выбираем Browse >Confluence Admin.
- В левой колонке находим и кликаем ссылку Stylesheet (по умолчанию, получаем пустое окно).
- Нажимаем кнопочку Edit — здесь мы будем изменять стили.
Как получить нужный стиль?
- На странице, которую нужно проанализировать, нажимаем Ctrl+Shft+C (вызывается Firebug).
- Наводим курсор мыши на нужный элемент и получаем нужный класс (class=». «) или идентификатор (id=». «).
Как переписать стиль элемента?
- Открываем окно Stylesheet.
- Если известен класс элемента (class), то обращаемся к нему так (перед точкой — пробел):
#com-atlassian-confluence.имя-класса
/* тут переопределяем стиль */
>
#идентификатор
<
/* тут переопределяем стиль */
>
Примеры
Переопределяем стиль заголовка 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-картинки-для-фона’);
>
Изменяем главную страницу (как пример)
Дополнительно
Для изменения цвета некоторых элементов интерфейса возможно через: Browse > Confluence Admin > Colour Scheme.
В заключение
Процесс кастомизации портала с помощью стилей — вещь перманентная. Так Stylesheet портала, который я развиваю, содержит уже более 350 строк.
В моём случае, Stylesheet + переписывание стартовой страницы портала и стартовых страниц всех его разделов (spaces) дал отличный результат — ресурс стал более привлекательным, удобным и главное «своим» для полторы сотни сотрудников, которые работают с ним каждый день.
Core / Общее
Во вкладке Core (рис . 1 ) можно выбрать формат, в котором будут отображаться значения в колонке gamma для таблиц Позиции и Доска опционов:
Рисунок 1 – выбор формата
- Fixed-point – формат представления значения с запятой (например, 19.0234);
- Scientific – экспоненциальный формат (например, 1.90234E1).
Также во вкладке можно изменить режим дерева инструментов (список Instrument tree mode):
- Options only – отображать только опционы;
- All – отображать все инструменты.
Для применения настроек нажмите кнопку OK.
Изменение размера шрифта
Для улучшения читабельности данных в таблицах, размер шрифта можно изменять. В раскрывающемся списке Table font size необходимо выбрать размер (рис. 2[1]). В поле Preview отобразится пример текста выбранного размера (рис. 2[2]). Для применения настроек следует нажать кнопку OK (рис. 2[3]).
Рисунок 2 – выбор шрифта
Режимы отображения графиков
В зависимости от формы работы с OptionWorkshop, локально или через удаленный рабочий стол, графики могут отображаться в режиме DiretX или в режиме High-Speed . Режим устанавливается автоматически.
В случае возникновения проблем с отображением линий графиков необходимо сменить режим визуализации.
В выпадающем списке Chart render mode (рис. 3) следует выбрать режим DirectX (compatible) или High-Speed , и сохранить настройки, нажав OK.
Рисунок 3 – Режим отображения графиков
Переключатель Write chartaring library events into log (Записывать в лог-файл события отрисовки графиков) рекомендуется активировать только по запросу технической поддержки.
Если проблема сохранилась, обратитесь в нашу службу технической поддержки.
- Нет меток
Не нравится шрифт списка документа (условное оформление списка документа)
Как обычно, для включения формы настройки нажмите на кнопку Еще , и далее выберите пункт Настроить список и перейдите на вкладку Условное оформление . Первоначально в списке на закладке не будет строк, и выглядит он гораздо проще чем те, которые мы изучали ранее.
2. Добавление элемента условного оформления
При добавлении новой строки в таблицу условного оформления открывается служебное окно. Которое содержит три вкладки: Оформление, Условие, Оформляемые поля. Далее мы рассмотрим их подробнее. Отметим, что каждая настройка будет отображаться в списке оформлений.
2.1 Закладка оформление.
На закладке оформление представлены настройки визуального отображения элементов нашего списка. Здесь можно поменять шрифты, цвет текста и фона. Задать формат строк и выравнивание в ячейках. Также можно управлять доступностью и отображением ячеек списка. Флажками напротив каждого параметра, можно включать и отключать его применение в данном элементе оформления. По умолчанию, все флажки выключены.
Обратите внимание если заполнить только эту вкладку, то оформление будет применяться без каких либо условий и ко всем строкам списка.
Например, если установить цвет фона строк в бирюзовый цвет, а в настройках шрифта отметить выделение жирным, то мы получим эффект изображенный на Рис. 3.
2.2 Закладка условие.
В приведенном выше примере раскрасились все строки. Допустим, теперь мы хотим раскрасить таким образом не все строки, а только те, в которых в качестве валюты установлено значение USD или EURO. Другими словами, мы хотим чтобы нам разу бросались в глаза такие строки. Как раз для этого и предназначена вкладка Условие . Перейдя на нее мы попадаем на вкладку отбора . В которой как раз и можно установить данное условие.
Обратите внимание. Условий отбора для одного оформления может быть несколько их можно группировать и сочетать друг с другом.
Теперь система выделяет подсветкой только валютные строки. И после сохранения отбора и условного оформления мы получим вот такой результат.
2.3 Закладка оформляемые поля
Давайте теперь рассмотрим ситуацию, когда необходимо оформлять не всю строку списка, а только определенные ячейки. Вернемся к нашему примеру. Допустим, у нас есть ключевой контрагент, название и номер накладной, от которого мы хотим выделять в итоговом списке. Все остальные настройки, мы хотим сохранить и оставить работать в прежнем режиме. Для решения этой задачи, создадим еще один элемент условного оформления. Зададим цвет оформления на вкладке оформление, на вкладке Условие добавим отбор по контрагенту, и перейдем на вкладку Оформляемые поля. На ней добавим два необходимых нам поля: Контрагент и Номер.
Система совместит оба наших оформления и перекрасит список в соответствии с новыми условиями. Как видно на рисунке 7, оформление применилось только к двум колонкам нашего списка, при этом предыдущее оформление, применявшееся ко все строкам, тоже работает. В тех строках которые попадают под оба условия, элементы оформления совмещаются.
В настройках условного оформления система автоматически показывает цвета заданные в данной строке. Это удобно так как можно сразу увидеть, какая строка отвечает за какое оформление. Также в списке строк условного оформления, с помощью флажков можно включать и отключать элементы оформления.
3. Вывод настроек оформления на форму списка
Как и в случае с отборами, настройки оформления можно вынести на форму списка и включать ее по мере необходимости. Это может быть полезно, когда функции раскраски определенных значений нужны вам не всегда, а например в конце месяца для поиска должников. Способ отображения отбора на форме списка можно настраивать. Можно включить его размещение на форме списка и задать ему произвольное представление.
На этом мы завершаем наш цикл, посвященный работе со списками. Теперь вы уже знаете все основные возможности системы. Остается только немного попрактиковаться и вы сможете сделать работу в 1С действительно удобной, а списки понятными и информативными.
- Нет меток