Главная » Для UCOZ » 2016 » Август » 26 » Меняем дизайн оформления кнопок в стандартных шаблонах системы uCoz

Разное

Меняем дизайн оформления кнопок в стандартных шаблонах системы uCoz



Теги: оформление кнопок, кнопки


Сегодня мы рассмотрим, каким образом можно изменить дизайн кнопок в стандартных шаблонах системы uCoz Я покажу на конкретных примерах поэтапно каким образом всё это делается. Данный урок, в первую очередь, предназначен для новичков,уже созревших для того, чтобы что-то начать изменять на своих сайтах. Хотя...чем чёрт не шутит, может пригодится и бывалым пользователям.

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

Итак, я установил шаблон на свой тестовый сайт, зашел на главную страницу сайта и выбрал вот такую симпатичную рыжую кнопку голосования в опросе:



Сейчас мы посмотрим, каким образом можно изменить её дизайн. Для начала, ваш сайт нужно открыть в браузере Opera. Почему именно в этом браузере? А только лишь потому, что в этом браузере лично мне очень удобно просматривать код страницы сайта, а точнее - непосредственно нужного элемента. Сейчас всё сами увидите.
Правой кнопкой мыши нажимаем на нашей рыжей кнопке и в контекстном меню выбираем пункт "Посмотреть код элемента"



Справа откроется окно с исходным кодом вашей страницы и в нём будет выделен нужный нам элемент, наша рыжая кнопка



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

Мы видим код нашей кнопки:

Код

<input class="pollBut" id="PlBtn936" type="submit" value="Оценить">  


Какую информацию мы получили? Теперь мы знаем, что элементу input присвоен класс pollBut. Осталось только в таблице CSS-стилей нашего сайта найти этот класс и изменить его свойства.

Переходим в редактирование шаблона Таблица стилей (CSS), активируем с помощью сочетания клавиш Ctrl+F поле для поиска и вставляем в него запрос pollBut. В моём случае запрос не дал результатов, поскольку класс pollBut не был непосредственно прописан в таблице стилей.
Тогда я пришел к выводу, что для всех элементов input с атрибутом type="submit" заданы одинаковые свойства (то есть оформление всех кнопок с таким атрибутом на сайте выглядит одинаково).

Делаем запрос input [type='submit'] в поисковом поле и вуаля:

Код

#casing input[type='submit'],#casing input[type='reset'],#casing input[type='button'],#casing button {font-size:11px!important;padding:9px 11px;margin:0 0 1px;border:none;font-weight:normal!important;cursor tongue ointer;background:#f27935;text-transform:uppercase;color:#fff; width:auto !important}  
#casing input[type='submit']:hover,#casing input[type='reset']:hover,#casing input[type='button']:hover,#casing button:hover {background:#3498db;color:#fff;}  


Так и есть, нужный нам элемент находится в перечне других элементов и для них всех заданы одинаковые стили оформления. Можно оставить списки как есть, и изменить лишь их стили, но тогда мы изменим оформление всех элементов, которые перечислены в списке, а можно удалить наш элемент из общего списка и прописать для него стили оформления отдельно, используя
имеющийся заданный для него класс pollBut (и тогда мы зададим оформление лишь для одной кнопки опроса, а другие элементы input с атрибутом type="submit" останутся рыжими и плоскими бебебе).

Выберем второй вариант и пропишем в таблице стилей CSS отдельно наш элемент и варианты для его состояния при наведении мыши и при нажатии на кнопку, не забываем сохранить иерархию, наш элемент ведь еще и находится внутри блока с идентификатором "casing":

Код

#casing input[type='submit'].pollBut{...}  
#casing input[type='submit'].pollBut:hover {...}  
#casing input[type='submit'].pollBut:active {...}  


Всё, все приготовления сделаны. Блюдо готово, делаем приправы)
Собственно, можно переходить к цели нашего урока, менять дизайн оформления кнопки. И тут я вам на выбор предложу несколько цветовых схем.

Первый вариант оформления, кнопочка с серым градиентом и код для него:

Код

#casing input[type='submit'].pollBut{  
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;  

-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;  
   
box-shadow:inset 0px 1px 0px 0px #ffffff;  
   
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));  
   
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);  
   
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);  
   
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);  
   
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);  
   
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);  
   
background-color:#f9f9f9;  
   
-moz-border-radius:6px;  
   
-webkit-border-radius:6px;  
   
border-radius:6px;  
   
border:1px solid #dcdcdc;  
   
display:inline-block;  
   
cursor tongue ointer;  
   
color:#666666;  
   
font-family:Arial;  
   
font-size:15px;  

font-weight:bold;  
   
padding:6px 24px;  
   
text-decoration:none;  
   
text-shadow:0px 1px 0px #ffffff;  
}  

#casing input[type='submit'].pollBut:hover {  

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));  
   
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);  
   
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);  
   
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);  
   
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);  
   
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);  
   
background-color:#e9e9e9;  
}  

#casing input[type='submit'].pollBut:active {  
position:relative;  
top:1px;  
}  


Второй вариант оформления, рыжая да не плоская, бебебе)))

Код

#casing input[type='submit'].pollBut{  

-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;  
   
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;  
   
box-shadow:inset 0px 1px 0px 0px #fce2c1;  
   
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));  
   
background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);  
   
background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);  
   
background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);  
   
background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);  
   
background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);  
   
background-color:#ffc477;  
   
-moz-border-radius:6px;  
   
-webkit-border-radius:6px;  
   
border-radius:6px;  
   
border:1px solid #eeb44f;  
   
display:inline-block;  
   
cursor tongue ointer;  
   
color:#ffffff;  
   
font-family:Arial;  
   
font-size:15px;  
   
font-weight:bold;  
   
padding:6px 24px;  
   
text-decoration:none;  
   
text-shadow:0px 1px 0px #cc9f52;  
}  

#casing input[type='submit'].pollBut:hover {  

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));  
   
background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);  
   
background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);  
   
background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);  
   
background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);  
   
background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);  
   
background-color:#fb9e25;  
}  

#casing input[type='submit'].pollBut:active {  
position:relative;  
top:1px;  
}  


Ну и третий дизайн оформления кнопки будет белый вариант:

Код

#casing input[type='submit'].pollBut{  

-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;  
   
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;  
   
box-shadow:inset 0px 1px 0px 0px #ffffff;  
   
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));  
   
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);  
   
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);  
   
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);  
   
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);  
   
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);  
   
background-color:#ffffff;  
   
-moz-border-radius:6px;  
   
-webkit-border-radius:6px;  
   
border-radius:6px;  
   
border:1px solid #dcdcdc;  
   
display:inline-block;  
   
cursor tongue ointer;  
   
color:#666666;  
   
font-family:Arial;  
   
font-size:15px;  
   
font-weight:bold;  
   
padding:6px 24px;  
   
text-decoration:none;  
   
text-shadow:0px 1px 0px #ffffff;  
}  

#casing input[type='submit'].pollBut:hover {  
   
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));  
   
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);  
   
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);  
   
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);  
   
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);  
   
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);  
   
filter tongue rogid biggrin XImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);  
   
background-color:#f6f6f6;  
}  

#casing input[type='submit'].pollBut:active {  
position:relative;  
top:1px;  
}  


Вариантов цветовых схем можно придумать множество. Главное, теперь вы знаете, как меняется дизайн оформления кнопок в стандартных шаблонах системы uCoz.
Обсуждение материала:
Комментариев: 0
avatar

Новые пользователи

Хостинг от uCoz