Koken - CMS для фотогалерей - Изменяем тему

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

Содержание

• Демо
• Цикл статей по Koken
• Постановка задачи
• Создание своей темы
• Активация новой темы
• Ставим Lightbox в теме
• Чистка сайта от ненужных элементов
• Редактирование настроек сайта
• Редактирование темы
• Редактирование CSS

Демо

Демо

Цикл статей по Koken

Koken – CMS для фотогалерей – Первый обзор
Koken – CMS для фотогалерей – Изменяем тему (Вы ее читаете)
Koken – CMS для фотогалерей – Принцип перевода сайта
Koken – CMS для фотогалерей – Подключение комментариев

На данный момент галерея выглядит с прошлой статьи вот так:

Постановка задачи

Непосредственно первую часть не решает ни одна из тем данной cms (даже уточнил у разработчиков). Скорее всего это связано с тем, что в первую очередь CMS рассчитана на сложные фотогалерея с несколькими альбомами. Но хороший Lightbox там есть. Только он отрывается странно в темах, где он есть. Вначале надо щелкнуть по фотографии, потом она откроется в отдельном режиме просмотра одной фотографии, а потом только запускает Lightbox, то есть на одну операцию больше. Исправим это, создав свою тему.

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

1. Идем в папку /storage/themes/
2. Копируем папку той темы, которая Вам больше приглянулась и которая ближе всего к тому, что Вы хотите по структуре фотогалереи. И обзываем папку как-то по своему (без пробелов). Например, я буду изменять ту же тему regale, за которую взялся в прошлой статье.



3. Открываем файл info.json в папке темы и меняем там данные нашей темы. В первую очередь меняйте имя темы на своё уникальное. Было:
{ "name": "Regale", "version": "1.1.2", "description": "Regale is a bold, assured theme that fluidly scales content across the entire browser window for larger than life photos. Includes a basic header and footer navigation, social media links, plus a configurable grid layout that allows you to control spacing and column count. Single photos presented on the content page are scaled as large as they can go for maximum impact. Theme preview photos by Daniele Zedda.", "demo": "http://koken.me", "author": { "name": "Koken", "link": "http://koken.me" }, "koken_version_required": "0.5.0",

1 2 3 4 5 6 7 8 9 10

{ "name": "Regale", "version": "1.1.2", "description": "Regale is a bold, assured theme that fluidly scales content across the entire browser window for larger than life photos. Includes a basic header and footer navigation, social media links, plus a configurable grid layout that allows you to control spacing and column count. Single photos presented on the content page are scaled as large as they can go for maximum impact. Theme preview photos by Daniele Zedda.", "demo": "http://koken.me", "author": { "name": "Koken", "link": "http://koken.me" }, "koken_version_required": "0.5.0",

Стало:

{ "name": "Regale - Harrix version", "version": "1.0", "description": "Модифицированная тема Regale движка Koken для фотогалерей. Модификация сделана http://harrix.org", "demo": "http://halo.harrix.org", "author": { "name": "Harrix", "link": "halo.harrix.org" }, "koken_version_required": "0.5.0",

1 2 3 4 5 6 7 8 9 10

{ "name": "Regale - Harrix version", "version": "1.0", "description": "Модифицированная тема Regale движка Koken для фотогалерей. Модификация сделана http://harrix.org", "demo": "http://halo.harrix.org", "author": { "name": "Harrix", "link": "halo.harrix.org" }, "koken_version_required": "0.5.0",

4. Удаляем файл koken.guid из папки с темой новой. Это обязательно.
5. Потом, когда настроите тему (или сразу), поменяйте файл preview.jpg на свою превьюшку темы. Но это необязательный шаг. Я пока это делать не буду.
6. Если Вы копировали на комп себе, то теперь обратно залейте папку новой темы в папку /storage/themes/ на Вашем домене.

Активация новой темы

1. Зайдите в админку вашей фотогалереи [домен или папка]/admin и перейдите в раздел Site:



2. А там подраздел Themes (внизу):


О! Пока я писал статью, вышли обновления стандартных тем. Обновите и Вы, если видите такую надпись.

3. А теперь спуститесь вниз и найдите свою тему:



4. Выберите ее и активируйте:



5. И примените изменения к сайту:



6. Вуаля! Теперь Ваша фотогалерея находится под управлением новой темы, которую мы будем дальше изменять под себя. Не рекомендуется изменять стандартные темы, без создания новых, а то все изменения слетят при обновлениях стандартных тем.

Ставим Lightbox в теме

Небольшая поправка. Я откладывал в этом месте написание статьи на несколько дней по техническим причинам. За это время вышло еще одно обновление Koken, в котором были исправлены некоторые места, которые мне не нравились. И это замечательно! Так как я переустанавливал еще движок, то не удивляйтесь, что фотографии будут другими. Это не важно – всё остальное точно такое же, как и было раньше.

Сама тема представляет набор множества файлов, которые потом интерпретируются движком по своим правилам, поэтому в коде этих файлов Вы найдете много нестандартных тэгов и команд вперемешку с обычными тэгами html.

Итак, на данный момент, наш сайт выглядит вот так:

При клике на фотографию загружается фотография отдельно:

Исправим ситуацию.

1. В папке нашей темы находим файл inc/grid.html. Он отвечает за прорисовку сетки фотографий в режиме Content:
<koken:include file="js/grid.js" /> <div id="grid" class="col-{{ settings.grid_col_num }}"> <div class="column"></div> </div> <koken:loop> <div class="item"> <koken:link> <koken:img lazy="true" fade="true" /> </koken:link> </div> </koken:loop>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<koken:include file="js/grid.js" />   <div id="grid" class="col-{{ settings.grid_col_num }}"> <div class="column"></div> </div>   <koken:loop>   <div class="item">   <koken:link>   <koken:img lazy="true" fade="true" />   </koken:link>   </div>   </koken:loop>

2. Находим строчки, отвечающие за отображение фотографии и ссылки для него:
<koken:link> <koken:img lazy="true" fade="true" /> </koken:link>

1 2 3 4 5

<koken:link>   <koken:img lazy="true" fade="true" />   </koken:link>

3. И меняем их на одну строчку, отвечающую за показ Lightbox:
<koken:link lightbox="true"><koken:img /></koken:link>

1	<koken:link lightbox="true"><koken:img /></koken:link>

4. Сохраним и перенесем на сервер. Если мы сейчас откроем сайт, то ничего не изменится, так как тему нужно применить измененную. Почему то это в движке не продумано – нет кнопки принудительного просмотра изменений. Можно вначале поставить другую тему, а затем эту. Но я предлагаю по другому. Переходим в режим Site и щелкнете по настройкам темы (шестеренка справа наверху).



5. Сдвиньте ползунок параметра Header pad top и примените изменения, а потом верните обратно и опять примените изменения:





6. И теперь наш сайт поменял свою работу. Если мы кликнем по фотографии на главной странице, то увидим уже Lightbox, как в нормальных галереях:

Чистка сайта от ненужных элементов

У нас уже есть отличный фотосайт, но будем доводить всё до ума. Но есть некоторые элементы, которые мне не нужны (Вам могут и пригодиться).

1. Мне не нравится наличие вот этих ссылок:


Пока ничего не хочу добавлять: альбом будет только один, текстовых заметок не хочу добавлять. Удалим.

2. В разделе сайт посмотрим на левую панель. В ней находятся те самые ссылки и ссылки в “подвале”:



3. Если щелкнете по шестеренке, то увидите, что сссылку можно удалить, переименовать или сделать главной на главную страницу сайта.



4. Мы же всё удалим, плюс из футера тоже всё нафиг удалим. И применим изменения:



5. Не беспокойтесь, если Вам потом эти ссылки будут нужны, то через Add Links… всё добавите:



6. Внизу еще остались социальные кнопки:



Открываем файл inc/footer.html и комментируем кнопки (а вдруг потом захочется?). Вы, наоборот, можете новые социальные приблуды добавить или что-то своё.

</div> <!-- close container --> <footer class="main"> <span class="copyright"> {{ site.copyright }} </span> <koken:navigation group="footer" /> <koken:if true="settings.show_social"> <div class="social"> <!--<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a>--> </div> </koken:if> </footer> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

</div> <!-- close container -->   <footer class="main">   <span class="copyright"> {{ site.copyright }} </span>   <koken:navigation group="footer" />   <koken:if true="settings.show_social"> <div class="social"> <!--<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a>--> </div> </koken:if>   </footer>   </body>   </html>

И также примените изменения к теме, как я выше писал.

Вроде почистили от мусора:

Редактирование настроек сайта

Теперь можно заняться редактированием настроек сайта.

1. Заходим в настройки Settings:



2. В первом пункте Console Вы можете только поменять часовой пояс.
3. В пункте Administrator Вы меняете системные параметры, которые назначали при установке. Из интересного, Вы можете вставить ссылки на Twitter и Facebook (для удаленных ссылок из “подвала”):



4. В разделе Uploading настройки для загрузки фотографий и видео. Ничего интересного. По умолчанию и так всё в порядке:



5. В разделах Applications, System, Plugins тоже нет ничего интересного:







6. Ну и раздел Publishing. Самый интересный для нас:



7. В пункте Site title введите имя своего сайта, а то пока оно в виде Вашего имени и фамилии. А в пункте Site tagline подпись к названию сайта (в некоторых темах присутствуют).




8. В трех других пунктах аналогично:



9. Остальное меняйте по своему усмотрению. Я не трогал. И не забудьте сохранить изменения.



10. В итоге получаем такой сайт:

Редактирование темы

Теперь настроим тему под себя инструментами самого движка

1. Зайдите в раздел Site и справа нажмите шестеренку:



2. Первый блог позволяет менять отступы и положение названия сайта и верхушку сайта. Я выставил такие:



3. В следующем блоке Вы редактируете заголовок. Он может быть или в виде текста:


либо в виде рисунка, который предварительно загружается, так как там только url его указывается:



4. В следующих частях настраивается параметры шрифтов и социальных кнопок (ой, а может и не надо было комментировать?):



5. И далее настраиваются цвета текста, ссылок и фона. Я выбрал такие цвета:



6. Не забудьте сохранить изменения:



7. И теперь наш сайт выглядит вот так:

Но есть недостатки, которые не убрались средствами движка:

• Фоновые рисунки я бы поставил, а не только цветом.
• Подчеркивается логотип линией как для ссылок.
• Рисунки я бы надвинул бы на сам логотип.
• Футер бы сделал не приклееным к низу окна браузера.

Редактирование CSS

Значит, надо доредактировать средствами CSS вручную. По способу настройки можно найти информацию в статье создателей движка.

1. В режиме Site находим снизу слева Custom CSS:



2. И появляется окно добавления CSS кода:
   
3. В настройках темы, как я делал выше поменял параметр Inside pad на 10px. Это такое отступление:



4. Ну, а в блок CSS я вставил следующий текст:
body { background-image:url("body.png"); } header.main { background-image:url("body.png"); margin-bottom:-60px; } footer.main { background-image:url("body.png"); position: relative; height:50px; } a { border-bottom: 0px; } div #grid { margin-left:100px; margin-right:100px; } div#grid div.column a { margin-bottom: 25px; margin-right: 30px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

body { background-image:url("body.png"); } header.main {     background-image:url("body.png");     margin-bottom:-60px; } footer.main {     background-image:url("body.png");     position: relative;     height:50px; } a {     border-bottom: 0px; } div #grid {     margin-left:100px;     margin-right:100px; }   div#grid div.column a {     margin-bottom: 25px;     margin-right: 30px; }

Разумеется, что файл body.png я скопировал в корень домена, где находится Koken: http://halo.harrix.org/body.png.

И не забудьте сохранить изменения.

5. Как я искал нужные элементы, чтобы понять, что и как в CSS менять? В Chrome выделял объект, который хочу поменять, правый клик мыши, и шел Посмотреть код элемента, и там уже искал свойства и имена элементов. Например, ниже я искал свойства картинки в как элемента сетки:



6. В итоге мы получаем всё, что нужно:

Осталось еще два момента:

• Перевод полученного сайта.
• Внедрение системы комментариев.

Но, это уже другая статья.