Форум - Урок 2.1 (Серый диз WEB)

LeXoN [Офф]
6 Ноября 2013 в 18:16
Всех приветствую ) В прошлом уроке мы сделали простую сереньку тач тему , этот урок продолжение начатого , и в этом мы сделаем Web тему к нашему тач дизайну.




Чтобы работать нам понадобиться компьютер, установленный на нем OpenServer, Блокнот ++ , так же напомню что данный урок был создан на версии 7.3.1.131, но Вы так же сможете его применить и более ранним версиям .


1. Копируем папку стандартного web дизайна light_web и переименовываем папку , я дал название такое web_lexon.

2. Теперь изменим название дизайна в /sys/themes/web_lexon/confing.ini , для отображения в списках тем оформлений . Заместо :
name="Light WEB (DESURE)";
напишем своё название :
name="Моя первая WEB тема";

3. Вписывать в theme_light.css ни чего не будем , так как мы уже вписывали градиенты когда делали touch тему. Так что сразу переходим к 4 пункту.

4.Изменяем названия градиентов в tpl шаблонах.
Серо-черный градиент будем использовать в шапке, так же как и в touch теме , которую делали в 2 уроке.
Для этого открываем /sys/themes/touch_lexon/tpl/document.tpl.php находим строчку <div id="header" class="gradient_blue"> и заменяем gradient_blue на gradient_grey_touch
должно получиться так:
<div id="header" class="gradient_grey_touch">

Далее заменим голубой градиент на ссылках пути.
Для этого всё в том же файле document.tpl.php после этих строчек
<div id="header" class="gradient_grey_touch">
<div class="body_width_limit">
<h1 id="title"><?= $title ?></h1>
<div id="navigation">
<? if (!IS_MAIN) { ?>


В <a class="gradient_blue invert border radius padding" href='/'><?= __("На главную") ?></a>
<? } ?>
<?= $this->section($returns, '<a class="gradient_blue invert border radius padding" href="{1}">{0}</a>', true); ?>

Заменяем gradient_blue на gradient_grey_touch.

Теперь нужно прописать серо-черный градиент в кнопках.
Для этого открываем /sys/themes/web_lexon/tpl/input.form.tpl.php
Ищем такую строчку
case 'submit':
echo '<input class="gradient_blue border radius padding radius" type="submit"' .

Изменяем gradient_blue на gradient_grey_touch
Выглядить должно так:
case 'submit':
echo '<input class="gradient_grey_touch border radius padding radius" type="submit"' .


Далее заменим в постраничной навигации .
Для этого открываем /sys/themes/web_lexon/tpl/design.pages.tpl.php и где видим gradient_blue заменяем на gradient_grey_touch

должно получиться так:
<div class="pages">
<?
echo $page == 1 ? '<span class="gradient_grey_touch invert border radius padding">1</span>' : '<a class="gradient_grey border radius padding" href="' . $link . 'page=1">1</a>';
for ($i = max(2, $page - 8); $i < min($k_page, $page + 10); $i++) {
if ($i == $page)
echo '<span class="gradient_grey_touch invert border radius padding">' . $i . '</span>';
else
echo '<a class="gradient_grey border radius padding" href="' . $link . 'page=' . $i . '">' . $i . '</a>';
}
echo $page == $k_page ? '<span class="gradient_grey_touch invert border radius padding">' . $k_page . '</span>' : '<a class="gradient_grey border radius padding" href="' . $link . 'page=' . $k_page . '">' . $k_page . '</a>'
?>
</div>


Теперь дабавим лого . Для этого в папку img добавим ваше лого logo.png.
Открываем /sys/themes/web_lexon/tpl/style.css ищем #title, в нем добавляем Наше лого таким образом:
background: url(img/logo.png) no-repeat;

Чтобы поверх нашего лого текст заголов (...)
LeXoN [Офф]
13 Ноября 2013 в 04:23
Что всем слабо выполнить урок? Когда я увижу скриншоты?
GreatMaster [Офф]
22 Ноября 2013 в 19:01
Уууу сделал все таки xD
LeXoN [Офф]
22 Ноября 2013 в 19:03
GreatMaster [Офф], Красвчег)
[Система]
5 Мая 2014 в 08:42
LeXoN [Офф] переместил тему из раздела Всё что касаемо DCMS 7.x.x/Уроки по переделыванию дизайнов в раздел Вопросы по дизайну CSS/js/Ajax/Dcms Seven
Gusen [Офф]
2 Авг 2014 в 19:12
LeXoN [Офф], На Dcms 7.3.2.137 будет урок по написанию и переделыванию дизайна?
LeXoN [Офф]
9 Авг 2014 в 11:10
Gusen [Офф], врятли
* Dcms Seven* Вопросы по дизайну CSS/js/Ajax* Форум * На главную
Изготовление ворот, калиток, перил