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

 

  1. Скачиваю архив шаблона (В моем случае это был GreenTrack) и разархивирую у себя.

  2. Первым делом мне хочется заменить картинку в заголовке. В поддиректории img нахожу картинку rail.jpg и делаю свою картинку такого же размера, называю ее, например, main.jpg. Далее нужно найти, где упоминается rail.jpg (тут возможны два варианта - либо ссылка на картинку находится в шаблоне header.template, либо она прописана через стили, в style.css). В данном случае картинка прописана через стили, причем почему-то так, что она не влезает целиком в header, меняю в style.css строчки: 
    	#header {
	background: url('img/rail.jpg'); 	
	height: 175px;
	margin: 0;
	padding:0;
	}
    на строчки: 
    	#header {
	background: url('img/main.jpg'); 	
	height: 203px;
	margin: 0;
	padding:0;
	}

  3. Вношу другие мелкие изменения в style.css на свой вкус (меняю цвета, шрифты, и т.д.). Кое-где некрасиво выглядели активные ссылки (hover) при наведении курсора мышки на изображения, пришлось поправить.

  4. Из шаблона GreenTrack мне совершенно не нужны в самом верху страницы ссылки "главная", "альбомы", "управление", поэтому я удаляю следующие строчки в файле header.template: 
    	<ul id="topnav">
	<li><a href="{$url->blogLink()}"> {$locale->tr("main")} </a> | </li>
	<li><a href="{$url->getAdminUrl()}" accesskey="2">{$locale->tr("dashboard")} </a> | </li>
	<li><a href="{$url->albumLink()}">{$locale->tr("albums")} </a> | </li>
	</ul>

  5. Изменяю шаблон post.template, он отвечает за то, как отображаются посты в списке (например, на заглавной странице). Здесь мне просто хотелось поменятьmanco.zip расположение элементов и удалить кое-что лишнее, результат можно посмотреть в прилагаемых исходниках.

  6. Следующий кусок работы, с которым пришлось повозиться, - это postandcomments.template - шаблон отвечающий за отображение поста и комментариев к нему. Уж больно мне не нравилось, как в исходном шаблоне отображались комментарии к записям. В итоге добился того, что все выводится ровненько, как для комментариев от пользователей с аватарами, так и от пользователей без аватаров. Результат смотрите в исходниках. Обратите внимание, что в стилях я прописал ограничение по размеру для аватаров, чтобы они выглядели более или менее одинаково: 
    	.poster_avatar {
	margin: 5px 10px 0 0;
	width: 60px;
	height: 60px;
	float: left;
	}

  7. Особая тема - это форма добавления нового комментария. Такое ощущение, что многие авторы шаблонов для LifeType не очень-то обращали внимание на внешний вид этой формы, особенно если адаптировали под LifeType темы WordPress (как в моем случае). Файл commentform.template, который отвечает за форму добавления нового комментария, в мою тему не включен, следовательно используется стандартный файл системы. Можно было бы создать и свой вариант, но я решил просто поправить стили, чтобы нормально отображался шаблон по умолчанию. Кое-где пришлось поменять регистр букв, а кое-где и названия айдишников. В общем, следующие строчки в файле стилей дают вполне приемлемое оформление стандартной формы добавления комментариев: 
    	#CommentForm #commentTopic, #CommentForm #userName, 
	#CommentForm #userNameDisabled, #CommentForm #userEmail, 
	#CommentForm #userUrl, #CommentForm #commentText {
	border: 1px solid #999;
	padding: 0.2em;
	width: 250px;
	background: #f1f1f1;
	}
	#CommentForm div {
	padding: 5px;
	clear: left;
	}
	#CommentForm div label {
	display: block;
	float: left;
	width: 150px;
	text-align: right;
	padding-right: 5px;
	}
	#CommentForm #Submit {
	padding-left: 160px;
	}

  8. panel.template - это файл, который отвечает за отображение SideBar - "панели", которая в моем случае расположена справа от основной области контента. Здесь я поменял местами некоторые элементы, поправил форму поиска, добавил блок контекстной рекламы от Google (AdSense), кое-что удалил (например, мне ни к чему было разбиение блока ссылок на подразделы, поэтому я убрал отображение названий подразделов). Здесь все манипуляции описывать долго, поэтому можете просто посмотреть исходники. Отдельно остановлюсь на RSS-потоках и на счетчиках.

  9. Я решил убрать стандартные ссылки шаблона на RSS, а добавить свои ссылки на подписку для Google Reader и Яндекс Ленты. Все-таки, в основном народ пользуется именно этими инструментами. При формировании ссылок я использовал адреса RSS-потоков версии 2.0.

  10. Я поставил два счетчика - видимый от LiveInternet (в нижней части panel) и невидимый Google Analytics (в footer, непосредственно перед тегом body).

  11. Теперь самое интересное - загрузка шаблона на сервер. Все прошло без проблем, загрузил шаблон в разделе "Настройки -> Новый шаблон", а затем в разделе "Настройки -> Настройки блога" выбрал его в поле "Шаблон". Пользовательские шаблоны там отображаются в самом конце списка. И еще небольшая хитрость: поскольку проверить внешний вид блога можно только "вживую", переключив его на новый шаблон, я поступаю для этого следующим образом: у меня загружена постоянная копия моего шаблона с немного измененным названием - manco-tmp. Когда мне нужно внести мелкие изменения, я переключаюсь на нее, удаляю основной шаблон с названием manco, загружаю новый вариант manco и переключаюсь обратно.

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

Файл для скачивания:  manco.zip