Наработочки

Администратор блога:
Все рубрики (4)

Шаблон Greenstyle

Переверстал такой шаблончик



Шаблон фиксированной ширины. Тестил на Инстанте 1.6.2 в браузерах Firefox и IE.

Имеет статическое одноуровневое меню в шапке, пункты которого можно изменить в файле template.php.

Так же для разных модулей сделал разные темы, для цветовой гаммы module_2.tpl - синее,module_3.tpl - зелёное и module_4.tpl серое. Для центральных блоков по стандарту module.tpl. тестируем, отписываемся, не забываем чистить папку cache в корне.

Скачать

Шаблон - otash

И вот ещё один перевёрстанный шаблон otash, кроссбраузерный, лёгкий.



КАЧАЕМ тестируем и комментируем

Шаблон infolanlife

Лёгенький шаблончик в светлых тонах.

Верстка и кроссбраузерноть: Шаблон проверялся под Internet Explorer 7, 8; Mozilla Firefox 3.*; Opera 10; Google Chrome.




СКАЧАТЬ

Сворачивание блоков

Озадачился на портале сделать сворачивание боковых блоков. Рассмотрел как устроен шаблон, порылся и нашёл решение.
Итак, как сделать сворачиваемые блоки.

1. Создаем в папке temp/ваш_шаблон/modules файл module_tree.tpl (Внимание, файл обязательно должен начинаться на "module_")

Содержание файла
Код PHP:
<div class="leftblock" style="width: 190px;">
	<div onclick="tree_toggle(arguments[0])">
		<ul class="Container">
			<li class="Node IsRoot IsLast ExpandOpen">
			
				<div class="Expand"></div>
				<div class="leftblocktitle">
				<div class="Content">
					{$mod.title}
				</div>
			</div>
				<div class="blocktext">
				<ul class="Container">
				{$mod.body}
				</ul>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="spaceline"> </div>
2. Создаем в корневой папке шаблона файл tree.js
с содежанием:
Код PHP:
function tree_toggle(event) {
        event = event || window.event
        var clickedElem = event.target || event.srcElement

        if (!hasClass(clickedElem, 'Expand')) {
                return // клик не там
        }

        // Node, на который кликнули
        var node = clickedElem.parentNode
        if (hasClass(node, 'ExpandLeaf')) {
                return // клик на листе
        }

        // определить новый класс для узла
        var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
        // заменить текущий класс на newClass
        // регексп находит отдельно стоящий open|close и меняет на newClass
        var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
        node.className = node.className.replace(re, '$1'+newClass+'$3')
}
function hasClass(elem, className) {
        return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}
3. Подключаем скрипт, для этого в самое начало файла ваш_шаблон/template.php вставляем строчку в категорию где подключены другие скрипты

Код PHP:
<script type="text/javascript" src="/templates/ваш_шаблон/tree.js"></script>
4. Скачиваем архив Копируем иконки в папку temp/ваш_шаблон/images/

5. Открываем файл temp/ваш_шаблон/css/style.css, в самый конец файла вставляем код:
Код PHP:
/* Tree css  */
.Container {
	padding: 0;
	margin: 0;
}
.Container li {
	list-style-type: none;
}
/* indent for all tree children excepts root */
.Node {
	/*margin-left: 18px;*/
	margin-left: 7px;
	zoom: 1;
}
.IsRoot {
	margin-left: 0;
}
.ExpandOpen .Expand {
	background-image: url("../images/minus.gif");
}
/* closed is higher priority than open */
.ExpandClosed .Expand {
	background-image: url("../images/plus.gif");
}
/* highest priority */
.ExpandLeaf .Expand {
	background-image: url("../images/leaf.gif");
}
.Content {
	min-height: 18px;
	/*margin-left:18px;*/
	margin-left: 7px;
}
* html  .Content {
	height: 18px;
}
.ExpandLoading   {
	width: 18px;
	height: 18px;
	float: left;
	background-image: url("../images/loading.gif");
}
.Expand {
	width: 18px;
	height: 18px;
	float: left;
}
.ExpandOpen .Container {
	display: block;
}
.ExpandClosed .Container {
	display: none;
}
.ExpandOpen .Expand, .ExpandClosed .Expand {
	cursor: pointer;
}
.ExpandLeaf .Expand {
	cursor: auto;
}
6. Заходим в админку, и для нужных блоков ставим оформление modul_tree.

П.С. можно отредактировать файл под ваш шаблон. В коде присутствует немного лишнего. но это кому как.