Cоздание тем для вашего сайта

ТЕХНИЧЕСКАЯ СТРУКТУРА.

•  Во-первых, разделение больших сложных страниц на отдельные шаблоны позволяет повторно использовать эти шаблоны, а это означает, что требуется поддерживать меньше кода. Это также позволяет часто повторяющимся участкам кода записываться только в одном месте. Это значительно упрощает обновление и поддержку вашего HTML.
•  Во-вторых, мы считаем, что это упрощает процесс редактирования. Вместо того, чтобы загружать весь веб-сайт в поисках нужного HTML-кода для редактирования, можно просто вызвать шаблон, длина которого обычно составляет от 2 до 20 строк. Это означает, что если вы хотите отредактировать определенный раздел, вы можете загрузить шаблон для этого раздела и работать только с этим шаблоном.

МАСТЕР ТЕМ.

•  Некоторые программные смайлики по умолчанию являются анимированными, и привлекательные анимированные изображения должны быть сохранены с определенным цветом фона, поэтому вы можете удалить эти анимированные смайлики или переработать их в графическом редакторе.

•  Чрезвычайно черно-белые темы не получатся в Мастере тем на 100 % и потребуют небольшой настройки. Использование Мастера тем в крайнем черно-белом режиме вызывает проблемы с контрастностью из-за математических расчетов (по сути, промежуточных оттенков черного или белого меньше, чем оттенков цвета, если насыщенность достаточно высока, чтобы цвет был различим). Для этого нет хорошего автоматического решения, кроме как вручную войти и изменить некоторые из наших слегка затененных цветов на жесткий белый / черный по мере необходимости. Проблема усугубляется в тех немногих местах, где мы используем разные цвета для обеспечения контраста, а не комбинируем темный и светлый.

СОЗДАНИЕ НОВОЙ ТЕМЫ ВРУЧНУЮ.

Хороший дизайн:

• Поддержание единообразного вида на ваших страницах.
• Избегайте «занятых», тесных страниц — дайте зрителю возможность «вздохнуть». 
• Визуальный поток: убедитесь, что вы используете заголовки и другие большие/маленькие разделы, чтобы помочь направить взгляд зрителя на самую важную информацию.
• Цветовые схемы: выберите цветовую схему и старайтесь ее придерживаться. Не используйте разные цвета для каждого класса в файле CSS - ваши цвета в конечном итоге будут конфликтовать и выглядеть некрасиво.
• С другой стороны, приветствуются хорошо контрастирующие цвета. Если вы можете выбрать несколько цветов (обычно не более двух), которые дополняют друг друга, разумно использовать их. Это позволит вам отделить важный контент с помощью цветовой вариации.

Технический аспект:

Ссылка для добавления темы:

CSS.

Выбор файла CSS для редактирования:

Экран редактирования CSS:

 Редактирование CSS — одна из наиболее важных возможностей тем оформления в Composr. Вы можете отредактировать его, нажав «Редактировать CSS» в строке выбранной темы. Вам будет предложено отредактировать файл CSS. 

Основные из них, поставляемые с Composr:

• global.css: этот файл содержит большинство классов, используемых в Composr. Это файл, который вы будете редактировать большую часть времени.

• no_cache.css: это классы, которые используют Tempcode (например, проверяют, какой браузер используется) для изменения стиля класса.

• cns.css: это набор классов, которые используются в Conversr.

Другие файлы CSS используются в определенных областях системы.

Чтобы отредактировать файл CSS:

1. Щелкните его из списка.

2. Нажмите кнопку "Редактировать".

3. Изменить CSS. Например, добавив:

   Код

   body {
        font-style: italic;
}
        … сделал бы весь текст курсивом (очевидно, глупый, но простой пример).

4. Нажмите «Редактировать CSS», чтобы сохранить.

Вы должны сразу увидеть свои изменения.

 Если вас смущает то, что Composr использует Tempcode в CSS, вы можете удалить его и заменить на чистый CSS по ходу дела. Tempcode используется для мастера создания тем и для облегчения обслуживания, но на самом деле у вас нет особого личного стимула поддерживать его.

Контекстное редактирование CSS:

Инструменты рендеринга страницы в футере:

 Вы можете редактировать CSS контекстно, с помощью параметров в раскрывающемся списке «Инструменты рендеринга страницы» в нижнем колонтитуле, если он существует в вашей теме. Все файлы CSS, используемые на экране, на котором вы находитесь, будут отображаться в виде вариантов в раскрывающемся списке.

 Контекстный редактор позволяет вносить изменения в режиме реального времени, предварительно просматривать их на лету, а затем сохранять.

 Вы можете добавить &keep_no_minify=1/ ?keep_no_minify=1 к URL-адресу перед использованием этих инструментов, так как это сделает предварительный просмотр в реальном времени более точным. Если вы не знаете, как это сделать, просто зайдите http://yourbaseurl/index.php?keep_no_minify=1 и вернитесь туда, где вы хотите быть. Функции минимизации Composr иногда не позволяют контекстному редактору интерактивно удалять стили, которые вы удаляете в редакторе CSS.

Отладка:

 Если вы обнаружите, что CSS полностью «искажает», вероятно, вы где-то допустили опечатку. Например, невозможно закрыть комментарий.

Вы не можете эффективно проверить CSS Composr, потому что в нем много Tempcode. Кроме того, обычный выводимый CSS минимизирован, поэтому его трудно читать и использовать.
К счастью, есть решение. Если вы перейдете, http://yourbaseurl/index.php?keep_no_minify=1, то CSS не будет минифицирован. Затем вы можете просмотреть исходный HTML-код, найти URL-адрес вашего CSS, а затем передать его обычному валидатору CSS .

Уравнения:

Некоторые файлы CSS имеют {$THEME_WIZARD_COLOR,#RRGGBB,name,equation} линии вверху.

Когда Мастер тем запускается, первый параметр (цвет) THEME_WIZARD_COLOR линии регенерируется из третьего параметра (уравнения) путем выполнения логики расчета Мастера тем.

Например,

… может стать:

 Это произошло бы, если бы исходный цвет, используемый в Мастере тем, был #ff0000.

Все это происходит только при запуске Мастера тем.

Только для этих конкретных уравнений существует особый случай global.css:

 Theme Wizard фактически полностью заменяет эти уравнения на основе начального значения и того, был ли для темы указан светлый или темный. Именно эти уравнения лежат в основе расчета Theme Wizard (поскольку они не зависят ни от каких других уравнений, они определяются непосредственно цветом). Theme Wizard — это, по сути, алгебраический решатель, использующий теорию цвета (раздел прикладной математики). Он продолжает работать над решением уравнений, взяв за основу те, что были из global.css, пока не закончит.

 Когда файл CSS скомпилирован, он работает как простая система переменных. Второй параметр служит именем переменной, на которое затем можно ссылаться в CSS как {$GET,name}. Это очень простая система замены.

 Вы можете, если хотите, просто обойти систему уравнений мастера тем и напрямую ввести свои собственные цветовые коды CSS вместо или в дополнение к тому, что делает мастер тем. Вы никоим образом не связаны с механизмом Мастера тем, когда начинаете редактировать свою собственную тему. Тем не менее, это может быть полезно, чтобы помочь вам сохранить согласованность цветовой палитры.

Префикс CSS:

 Некоторые браузеры экспериментируют с новыми свойствами CSS, используя префиксы. Подробнее объяснено здесь: Что такое префиксы поставщика CSS или префиксы браузера?.

 В Composr мы используем {$BETA_CSS_PROPERTY,property: value;} автоматическое добавление префикса к свойству или внесение других изменений, чтобы свойство работало в разных веб-браузерах.

 Конечно, это рискует полагаться на поведение CSS браузера, которое может содержать ошибки или подвергаться изменениям. Передавая его BETA_CSS_PROPERTY согласованным образом, мы можем фактически изменить вывод в выпусках патчей Composr, если браузеры изменят свой синтаксис - так что это хорошее маленькое решение, которое у нас есть.

Другие примечания о соглашениях CSS:

 Некоторые дополнительные комментарии доступны в верхней части global.css. В основном, наша поддержка языков rtl и использование единиц em.

Лист регистраций изменений:

 Если вы внесли какие-либо изменения в CSS своего файла, они будут отображаться в списке под CSS. Вы увидите даты их создания, кто их редактировал, а также ссылку для восстановления, если вы выберете.

Шаблоны:

 Как указывалось ранее, шаблоны позволяют вам управлять макетом вашего сайта, позволяя вам редактировать весь HTML-код, используемый в Composr.

 Прежде чем редактировать свои шаблоны, вам нужно знать, какой шаблон вы собираетесь редактировать. Во многих случаях страница создается с помощью Comcode, и в этом случае вы можете отредактировать страницу, просто щелкнув ссылку «редактировать эту страницу» внизу страницы.

Параметр «Дерево шаблонов», выбранный в инструментах рендеринга страницы:

 Примером этого является главная страница в зоне приветствия. Если, например, вы хотите отредактировать раздел «опрос», просто щелкните ссылку «Редактировать страницу» внизу страницы. Это приведет вас прямо к экрану «Редактировать страницу Comcode», где вы можете редактировать любой элемент этой страницы. Понять разницу между страницами Comcode и страницами, использующими шаблоны, иногда бывает сложно. Общее эмпирическое правило заключается в том, что если внизу страницы есть кнопка «редактировать эту страницу», сначала попробуйте ее, чтобы увидеть, можете ли вы редактировать то, что хотите. Если нет, вам нужно будет определить, какой шаблон вам нужно отредактировать.

Пример экрана "Дерево шаблонов":

 Чтобы получить список всех шаблонов для данной страницы, выберите инструмент рендеринга страницы «Дерево шаблонов» (см. пример). Затем нажмите кнопку «Просмотр», и появится новое окно, содержащее список шаблонов для просматриваемой страницы, показанный в формате структурированного дерева (изображение). Сначала этот список может показаться немного пугающим, но как только вы поймете его концепцию, он станет относительно простым.

 Список, по сути, представляет собой список всех шаблонов, используемых на этой странице. Те, которые вложены ниже родителей, являются шаблонами, которые используются внутри этих родителей.

Экран редактирования шаблона:

 Записи в списке являются отдельными шаблонами. Если вы знаете, какой из них вы хотите отредактировать, вы можете просто щелкнуть по нему, и вы попадете на страницу, где вы можете отредактировать этот шаблон. Вы также можете выбрать несколько шаблонов для редактирования; это очень удобно, так как позволяет вам сделать групповой предварительный просмотр ваших изменений перед их сохранением.

 На этой странице вы увидите текстовое поле, в котором вы можете редактировать HTML для этого шаблона. Ниже представлена выделенная серым цветом версия того же шаблона, содержащая оригинал на тот случай, если вам потребуется сослаться на него.

Вы можете просто изменить шаблон здесь, а затем щелкнуть ссылку «Редактировать шаблон», чтобы сохранить изменения, или, если вы попали в редактор шаблонов из экрана «дерево шаблонов», вы можете просмотреть изменения всех шаблонов, которые вы в настоящее время открыты. для редактирования без необходимости их немедленного сохранения.

Внизу также есть раздел, позволяющий восстановить предыдущую версию, если она у вас есть.

Альтернатива: инструмент рендеринга страницы шаблонов:

 Существует инструмент рендеринга страниц «Шаблоны», который вы можете использовать. Это похоже на инструмент «Дерево шаблонов», за исключением того, что это плоский отсортированный список без повторений. Отображается количество использований каждого шаблона.

Преимущества этой техники:

1. Гораздо более компактный дисплей.

2. Показывает параметры «переопределения» шаблонов, которые поддерживаются, даже если они не используются (например, как поддерживается в системе каталогов, для переопределения шаблонов для каждого каталога).

Альтернатива: keep_markers

 Если вы не можете получить доступ к этому раскрывающемуся дереву (возможно, вы удалили его из своей пользовательской темы), есть немного менее удобная альтернатива. Если вы добавите &keep_markers=1/ ?keep_markers=1 в конец своего URL-адреса, снова нажмите «Перейти», затем нажмите «Просмотр»> «Исходный код» в своем браузере, вы сможете увидеть разметку HTML для своей страницы с комментариями, отмечающими начало и конец каждого шаблона. Это отличный способ найти шаблон, если вы точно знаете, в каком разделе страницы он находится.

Вы можете видеть, что он отмечает начало и конец двух шаблонов. Первый — это MENU_BRANCH_popup.tpl, который содержит еще один шаблон: HYPERLINK.tpl.

Альтернатива: вручную определить шаблон для редактирования.

 Если вы уже знаете, какой шаблон вы собираетесь редактировать (по интуиции, памяти или чтению кода), вы можете сделать это прямо через экран «Редактировать шаблоны».

1. Перейдите в Зону администратора > Стиль > Темы.

2. Нажмите «Редактировать шаблоны» для темы по вашему выбору.

3. Вы увидите список шаблонов на выбор, чтобы вы могли выбрать подходящий.

Понимание кода шаблонов (Tempcode):

 В ваших шаблонах есть много разделов кода, о которых вам нужно знать, чтобы эффективно редактировать. Код написан на нашем языке шаблонов, известном как Tempcode. Дополнительные сведения см. в учебнике по программированию Tempcode.

Превью экрана:

 Для шаблонов с объединенной функциональностью в редакторе шаблонов будет отображаться кнопка «Предварительный просмотр». Кнопка вызывает предварительный просмотр экрана, который охватывает конкретный шаблон, но включает любые изменения, которые вы вносите в редакторе. 
Это очень полезная функция.  

Тематические изображения:

 Изображение, используемое темой Composr (включая тему по умолчанию), называется «изображением темы»; это в основном каждое изображение, которое не является частью контента (изображения галереи, баннеры и т. д. будут контентом). Существует целая система для работы с тематическими изображениями.

Соглашение о  наименовании:

 Кодовые имена изображений темы сопоставляются с URL-адресами через таблицу базы данных, но изначально они автоматически определяются из очень простого соглашения об именах.

• themes/yourtheme/images_custom/foo/bar.png это будет foo/bar изображение темы, и на него может ссылаться этот Tempcode в шаблонах или файлах CSS: {$IMG,foo/bar}.

 Composr ищет совпадения в вашей теме images_customи images папках, и если он не может найти совпадения, он возвращается к поиску тем images_custom и images папок по умолчанию.

Распознаются все следующие расширения файлов в порядке приоритета:

• png

• jpg

• jpeg

• gif

• ico

• svg

 Не используйте несколько файлов с одинаковым базовым именем, но с разными расширениями файлов, так как будет использоваться только файл с наивысшим приоритетом.

После обнаружения правильного URL-адреса таблица базы данных обновляется. По сути, это кеш, который можно очистить, выбрав «Зона администратора» > «Инструменты» > «Инструменты очистки веб-сайта».

Редактирование изображений темы:

Кнопка «редактировать изображение темы» появляется после наведения курсора на некоторые изображения в течение нескольких секунд.

Форма "редактировать изображение темы"

 Чтобы отредактировать изображение темы из Composr, перейдите в раздел «Администрирование» > «Стиль» > «Темы», затем выберите ссылку «Редактировать изображения темы» для выбранной вами темы. Вы попадете на экран со списком всех используемых в данный момент изображений. Выберите изображение, затем нажмите «Редактировать изображение».

 В качестве альтернативы, для многих изображений (более крупных с использованием <img> тегов) вы можете перейти прямо к экрану их редактирования, наведя указатель мыши на изображение и нажав появившуюся кнопку «Редактировать изображение темы» (см. снимок экрана).

 На экране редактирования изображения темы вверху отображается текущая версия этого изображения. У вас также есть возможность отредактировать имя этого изображения, местоположение или загрузить вместо него новое изображение.

Удаление изображений темы:

• Вы можете удалить изображение темы в нижней части формы редактирования, если оно не является изображением темы по умолчанию.

Добавление изображений темы:

• Чтобы добавить изображение темы, перейдите в «Зона администратора» > «Стиль» > «Темы», затем выберите значок «Редактировать изображения темы» для выбранной вами темы, как и раньше. Внизу есть кнопка «Добавить изображение темы», которая приведет вас к экрану, позволяющему создать новое изображение темы.

Вам необходимо заполнить эти поля:

• Имя: вы можете называть это как хотите, но мы рекомендуем указать что-то на основе пути к изображению. Например, изображение «sortablefield_asc» в папке themes/themename/images/results в настоящее время называется results/sortablefield_asc. Это позволяет с первого взгляда определить, в какой папке находится изображение, что, в свою очередь, обычно определяет, к какой группе изображений оно принадлежит.

• Загрузить или URL: выберите один из этих вариантов, чтобы загрузить изображение на свой веб-сайт. Используйте поле загрузки для файлов, которые в настоящее время существуют на вашем компьютере, или используйте параметр URL для изображения, которое уже находится где-то в сети.

• Использовать для всех тем:

  • Если вы добавляете изображение темы, относящееся только к вашей новой теме: вы не должны отмечать это. Например, изображение, на которое ссылается только один из ваших настраиваемых шаблонов.

  • Если вы добавляете изображение темы, которое потенциально может использоваться любой темой: вы должны отметить это. Например, изображение, используемое в одном из ваших меню (вы можете добавить такие изображения, добавив их с кодами изображений, начинающимися с icons/).

Форма добавления изображения темы:

…прокручиваем вниз…

Находим кнопку «Добавить изображение темы»:

Это простой пример:

1. Найдите или сделайте подходящее изображение для своего сайта. Загрузите этот файл.

2. Перейдите в раздел «Административная зона» > «Стиль» > «Темы» > «Редактировать изображения темы» (в соответствии с вашей собственной темой).

3. Нажмите кнопку «Добавить изображение темы» в нижней части экрана, которая направит вас к форме добавления изображения темы.

4. Заполните кодовое имя для изображения. Для этого примера мы будем использовать new_background.

5. Найдите файл изображения в поле Изображение.

6. Отправьте форму через кнопку «Добавить изображение темы».

7. Чтобы применить загруженное изображение к теме вашего веб-сайта, вам необходимо отредактировать файл CSS.
   Перейдите в Зону администратора > Стиль > Темы > Редактировать CSS (в соответствии с вашей собственной темой).

8. Наши изменения в действии

   
   Отредактированный CSS:

   

   

    

   
   
   • Выберите global.css файл для редактирования (на самом деле он выбран по умолчанию) и нажмите кнопку «Редактировать».
   • Найдите background: url('{$IMG_INLINE;,outer_background}'); с помощью функции поиска браузера или функции поиска на панели редактора.
   • Измените background: url('{$IMG_INLINE;,outer_background}') на background: url('{$IMG_INLINE;,new_background}') - наше новое изображение темы.

 Более разумным вариантом было бы прямое редактирование outer_background изображения темы, но я хотел привести простой пример нового изображения темы, выполняя минимальное редактирование CSS.
 

Удаление тем:

• Вы можете удалить тему в нижней части формы редактирования.

Советы:

1. Не используйте пользовательскую тему в зоне администратора или зоне CMS. Это не обязательно и заставит вас учитывать всевозможные дополнительные детали.

2. Удалите все ненужные дополнения, чтобы вам не пришлось тестировать новую тему на стольких экранах. 

3. Инструменты веб-разработчика в современных веб-браузерах удобны для анализа того, как CSS Composr взаимодействует с HTML. Вы можете использовать их для запуска всевозможных тестов и быстро разбираться в том, как все устроено.

4. Почитайте про CSS и HTML вообще. Если вы выходите за рамки простого создания тем, вам необходимо понимать сложные аспекты этих технологий. Composr полностью построен на веб-стандартах, поэтому его можно переформулировать с их использованием. Веб-стандарты дополнены Tempcode и склеены со структурой, предоставляемой Composr (см. ниже).

5. Попробуйте мыслить структурно. Помните, что ваш макет будет лучше всего составлен с использованием стандартных функций Composr, таких как панели, меню, блоки, пользовательские теги Comcode, страницы и включения Comcode/Tempcode. Вы можете сгибать все это далеко за пределы настроек по умолчанию. Например, панель может быть размещена где угодно и иметь любую форму.

6. Правильно используйте дерево шаблонов, если вы уверены, какие шаблоны используются на экране. В качестве альтернативы используйте функцию поиска по шаблону (доступна на экране, где вы выбираете шаблон для редактирования).

7. Если вы выбираете шаблон для редактирования вручную из полного списка по его названию, вы можете быстро перейти к нему, набрав, а не прокручивая. Просто щелкните одну из записей в списке, а затем введите «dash-space-template-name», и большинство браузеров сразу перейдут к ней.

8. Не забудьте проверить, как выглядят ваши электронные письма, а также ваши экраны.

9. Средство изменения размера шрифта предполагает, что вы будете использовать размер на основе em (т.е. относительный) для всех стилей. Размер шрифта работает, устанавливая больший базовый размер шрифта. Тема по умолчанию измеряет почти все относительно (используя em), поэтому больший размер базового шрифта имеет эффект, который каскадно распространяется на все. Если вы измените стили на pt или px, то это будет абсолютным, и, следовательно, каскад будет остановлен в этой точке.

10. Не забудьте сделать фавикон.

11. Не забудьте подумать о том, как выглядит ваш сайт в распечатанном виде.

12. Если вы хотите тщательно протестировать свою тему для использования третьими лицами, функция предварительного просмотра экрана действительно поможет.

13. Если вам удобнее копировать отдельные файлы и редактировать их в своем любимом текстовом редакторе, это может оказаться лучшим подходом, чем использование встроенных шаблонов и редакторов CSS, особенно если вы разработчик.

14. Если вы застряли или допустили ошибку, не расстраивайтесь — это случается и с лучшими разработчиками.

Многие другие советы и рекомендации включены в темы Designer, реализующие руководство по проектированию чистых помещений.

Копирование тем:

 Вы можете копировать темы между сайтами или дублировать их, но убедитесь, что вы очистили кэш шаблонов перед использованием скопированной темы. Кэш-файлы жестко задают пути к файлам, URL-адреса и имя темы.

Ограничения нескольких тем (дополнительно):

Есть несколько ограничений, если вы хотите запустить несколько тем одновременно:

1. Когда Comcode компилируется, он компилируется с активной темой. Поэтому не пытайтесь настраивать шаблоны Comcode по-разному для разных тем, так как это будет «произвольно», какой шаблон будет показан конечному пользователю.

2. Когда электронные письма отправляются нескольким получателям одновременно или неизвестным получателям, будет использоваться настроенная по умолчанию тема сайта (он не будет отдельно стилизовать вещи для каждого отдельного получателя). Тема влияет на MAIL выбранный шаблон, используемые изображения темы и CSS. Обратите внимание, что Composr очень редко отправляет сообщения одновременно нескольким получателям, потому что система уведомлений сама генерирует электронные письма отдельно для каждого участника, которому отправляется электронное письмо.

Смотрите также:

• Руководство по веб-технологиям (включая HTML, CSS и JavaScript)

• Дизайнерские темы, реализующие дизайн чистой комнаты

• Мобильный дизайн

• Программирование временного кода

• Выпуск темы

• Жизненный цикл темы

• Составление структуры сайта

• Создание новой темы

• Использование инструментов разработки Chrome для создания тем