Сегодня хотелось бы рассказать о Emlog CMS, о данной системе мало кто слышал, но она является хорошим вариантом для ведения личного сайта. Emlog работает быстро и стабильно, но уступает по функционалу Wordpress, например, и у этого скрипта меньше плагинов и шаблонов. Скрипт китайский, но имеет русскую локализацию, правда, шаблоны к нему только на китайском и, в основном, не адаптивные, напишем подходящий шаблон для ведения блога, например.
Работа с Emlog немногим отличается от Wordpress, дефолтный шаблон включает в себя такие файлы, как:

404.php
echo_log.php – Полная новость.
footer.php
header.php
log_list.php – Короткая новость.
main.css – Все css шаблона.
module.php – Подключаемые модули и комментарии.
page.php — Страница открытой новости.
side.php – Боковая панель.
t.php – Микроблог.

Примеры функций для шаблона:

<?php require_once View::getView('module'); ?> //Подключение модулей.
<?php include View::getView('side'); ?> //Подключение боковой панели с модулями.
<?php echo $site_title; ?> //Заголовок страницы.
<?php blog_navi(); ?> //Панель со ссылками.
<?php echo $footer_info; ?> //Информация в конце страницы.

За основу своего адаптивного шаблона я возьму установленный по умолчанию шаблон.

Для начала нужно отредактировать main.css и заменить все width с пиксельных на процентные, также важно поставить CSS свойство overflow-x:auto; на контейнеры с контентом, так как элементы контента могут быть неадаптивными и будут отображаться некорректно на мобильных устройствах.
Верхняя панель сo ссылками и боковое меню должны уйти под спойлер, header и footer будут выглядеть в виде картинки с текстом.

Далее перемещаем <?php blog_navi(); ?> и <?php include View::getView('side'); ?> в таблицу,
которая будет открываться с помощью JS функции, вызываемой при помощи события onclick.

Удаляем дублирующие боковые панели на всех страницах шаблона.
Функция открытия — закрытия спойлера.

var menuheader = function(){
if(document.getElementById("splCont").style.display == "none")
{
document.getElementById("splCont").style.display = "block";
}else{
document.getElementById("splCont").style.display = "none";
}
}

Вставляем фоновое изображение в header и footer.

background-image: url(bg.jpg);
    background-position: center center;
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: cover;
    background-color:#464646;

Также нужно оформить разделение между новостями с помощью градиента, используем генератор стилей.

Код CSS

padding:3%;
border-top:#1faee9 2px solid;
border-bottom:#1faee9 2px solid;
    background-color: #e3e3e3;
    /* IE9, iOS 3.2+ */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZDFkMWQxIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0.5, rgb(219, 219, 219)),color-stop(0.51, rgb(209, 209, 209)),color-stop(1, rgb(254, 254, 254)));
    /* Android 2.3 */
    background-image: -webkit-repeating-linear-gradient(top,rgb(226, 226, 226) 0%,rgb(219, 219, 219) 50%,rgb(209, 209, 209) 51%,rgb(254, 254, 254) 100%);
    /* IE10+ */
    background-image: repeating-linear-gradient(to bottom,rgb(226, 226, 226) 0%,rgb(219, 219, 219) 50%,rgb(209, 209, 209) 51%,rgb(254, 254, 254) 100%);
    background-image: -ms-repeating-linear-gradient(top,rgb(226, 226, 226) 0%,rgb(219, 219, 219) 50%,rgb(209, 209, 209) 51%,rgb(254, 254, 254) 100%);

Стрелочка «наверх» пригодится, поэтому, вставляем изображение стрелки в header и подключаем CSS.

<a name="top"></a> /* Якорь */
<a href="#top" title="Вернуться к началу" class="topbutton"><img src="http://journal.twoclub.ru/src/content/templates/default/arrow.png" width="50px" /></a>

Форму комментариев также нужно обновить. Ставим placeholder и изменяем стили под цветовую гамму сайта.

#contentleft .comment-post .cancel-reply{float:right;font-size:12px;cursor:pointer; _cursor:hand;padding-right:10%}
#contentleft .comment-post .cancel-reply:hover{text-decoration:underline}
#contentleft .comment-post small{font-size:12px; color:#999}
#contentleft .comment-post input{padding:5px 5px; border:1px #1faee9 solid; font-size:12px; color:#333; width:40%}
#contentleft .comment-post #comment{ width:90%; border:1px #1faee9 solid; font-size:12px; color:#333}

В шаблоне по умолчанию присутствуют элементы интерфейса, заданные изображениями, их нужно заменить на градиенты.
Я хочу, чтобы на главной странице был слайдер с последними новостями.
Создаем файл slider.php и подключаем его в header.php с помощью конструкции:

 <?php require_once View::getView('slider'); ?>

Пример используемого слайдера по ссылке.
Дорабатываем CSS, чтобы он не конфликтовал с общей стилистикой сайта.
Далее, нужно внедрить контент в полученный слайдер.
Используем встроенные функции Emlog для получения контента из топа. Стоить заметить, что приведенный фрагмент будет работать только на главной странице, так что на других страницах слайдер мешать не будет.

Код

<div class="crsl-items" data-navigation="navbtns">
<div class="crsl-wrap">
<?php 
if(!defined('EMLOG_ROOT')) {exit('error!');} 
?>
<?php doAction('index_loglist_top'); ?> // Загрузка контента.
<?php 
$i=0;
if (!empty($logs)):
foreach($logs as $value):  // Цикл, который должен вывести первые 5 новостей перебором массива.
if($i >5) break; 
$i++;
?>
<div class="crsl-item">
<div class="thumbnail">
<?php blog_author($value['author']); ?> // Автор новости.
<span class="postdate"><?php echo gmdate('Y-n-j G:i', $value['date']); ?></span> //Дата вызывается с помощью функции gmdate() и элемента массива.
</div>
<h3><a href="<?php echo $value['log_url']; ?>"><?php echo $value['log_title']; ?></a></h3>// Заголовок и ссылка.
<div id="kroll"> // ovweflow-x:auto;
	<?php blog_sort($value['logid']); ?>  // Контент
	<?php editflg($value['logid'],$value['author']); ?>
	<?php echo $value['log_description']; ?>
</div>
</div>
<?php 
endforeach; // Конец цикла.
else:  // Или выводит пустое окно.
?>
<style> // Если не главная страница, то скрываем слайдер.
.crsl-items {
height:0px;
}
</style>
<?php endif;?>
</div>

</div><!-- end #contentleft-->
<hr/>
<script type="text/javascript"> 
$(function(){ //
  $('.crsl-items').carousel({
    visible: 3,
    itemMinWidth: 180,
    itemEqualHeight: 370,
    itemMargin: 9,
  });
  
  $("a[href=#]").on('click', function(e) {
    e.preventDefault();
  });
});
</script>

Теперь осталось запустить систему, инициализировать базу данных и работать с сайтом.

GitHub | Демо

Пишем адаптивный шаблон для Emlog CMS