Форум - Урок 2 (Серый тач дизайн)

LeXoN [Офф]
25 Окт 2013 в 21:06
В первом уроке думаю логику преподания материала была не правильная , поэтому его я удоляю .

В этом уроке мы сделаем простой тач дизайн ,он будет скорее ознакомительный , из него вы поймете что к чему, будет полезным кто только собирается что то переделать и тем кто уже ковырялся .Мы возьмем и немножко изменим расцветку стандартной голубой темы , и сделаем её серо-черной . За место голубой шапки сделаем серо-черной, так же постраничную навигацию , ссылки с действиями , кнопки поменяем с голубого на серо-черный. Тем самым из голубой она превратиться в серо-черную. И еще добавим логотип .

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

И так начнем наш урок. Хочу вас ознакомить с ходом выполнения, такой план мы будем всегда использовать в следующих уроках :
1) Копируем папку со стандартным дизайном , и переименовываем
2) Переименовываем название дизайна в confing.ini
3) Вписываем градиенты в общию таблицу стилей theme_light.css
4) Изменяем названия градиентов в tpl, на наши которые будем использовать
5) По необходимости изменяем код в шаблонах tpl
6) Изменяем css самого дизайна


1. Копируем папку со стандартным дизайном light_touch и переименовываем в что хотите , я назвал так touch_lexon.

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

3. Далее вписываем наши новые градиенты в общию таблицу стилей theme_light.css , которые будем использовать в нашем дизайне . Для удобства будем встовлять новые градиенты в конец .

.theme_light .gradient_grey_touch{ /*серо-черный градиент*/
color: white;
text-shadow: 1px 1px 0px #000;
background: #262626;
background: -moz-linear-gradient(top, #898989, #262626);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#898989), color-stop(100%,#262626));
background: -webkit-linear-gradient(top, #898989, #262626);
background: -o-linear-gradient(top, #898989, #262626);
background: -ms-linear-gradient(top, #898989, #262626);
background: linear-gradient(top, #898989, #262626);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#898989', endColorstr='#262626');
}


Далее добавим цвет бордюра для нашего серо-черного градиента
.theme_light .gradient_grey_touch.border{
border-color: #676767;
}

А это нам понадобиться для веб в ссылках пути:
.theme_light .gradient_grey_touch.invert{
color: white;
text-shadow: 1px 1px 0px #000;
background:#898989;
}


4. Теперь изменим названия градиентов в tpl шаблонах.
Серо-черный градиент будем использовать в шапке, значит открываем /sys/themes/touch_lexon/tpl/inc.title.tpl.php за место gradient_blue встовляем gradient_grey_touch.

Далее нужно заменить голубой градиент на серо-черный , в кнопках [submit]. Для этого открываем /sys/themes/touch_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/touch_lexon/tpl/design.pages.tpl.php и где видим gradient_blue заменяем на gradient_grey_touch

Ну и осталось измен (...)
LeXoN [Офф]
3 Дек 2013 в 12:14
serikbol [Офф], Изъясняйся по русски!
[Система]
5 Мая 2014 в 08:45
LeXoN [Офф] переместил тему из раздела Всё что касаемо DCMS 7.x.x/Уроки по переделыванию дизайнов в раздел Вопросы по дизайну CSS/js/Ajax/Dcms Seven
* Dcms Seven* Вопросы по дизайну CSS/js/Ajax* Форум * На главную
Изготовление ворот, калиток, перил