Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Класс для кнопки

art-button
Захожу иногда
Dave
Сообщений: 49
745 дней назад
Привет всем :)

Как сделать кнопки разных цветов, то есть задать им разные классы. По умолчанию класс у кнопок Artisteer - art-button, но мне хотелось бы иметь две такие же кнопки, но с разными классами, например одна имеет класс art-button а другая, к примеру art-button2.

Помогите, уже не знаю что и делать smile Вот css код кнопки:


/* begin Button */
span.art-button-wrapper>a.art-button,
span.art-button-wrapper>a.art-button:link,
span.art-button-wrapper>input.art-button,
span.art-button-wrapper>button.art-button
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, Serif;
font-style: italic;
font-weight: bold;
font-size: 13px;
position:relative;
top:0;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #FFFFFF !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 26px;
height: 26px;
margin: 0 !important;
padding: 0 10px !important;
overflow: visible;
cursor: pointer;
text-indent: 0;
}

.art-button img, span.art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}

span.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 26px;
overflow: hidden;
white-space: nowrap;
text-indent: 0;
width: auto;
max-width:1920px;
margin: 0;
padding: 0;
z-index: 0;
}

.firefox2 span.art-button-wrapper
{
display: block;
float: left;
}

input, select, textarea
{
vertical-align: middle;
font-family: Georgia, "Times New Roman", Times, Serif;
font-style: italic;
font-weight: bold;
font-size: 13px;
}

div.art-block select
{
width:96%;
}

span.art-button-wrapper.hover>.art-button, span.art-button-wrapper.hover>a.art-button:link
{
color: #FFFFFF !important;
text-decoration: none !important;
}

span.art-button-wrapper.active>.art-button, span.art-button-wrapper.active>a.art-button:link
{
color: #FFFFFF !important;
}

span.art-button-wrapper>span.art-button-l, span.art-button-wrapper>span.art-button-r
{
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
background-image: url('images/button.png');
background-repeat: no-repeat;
}

span.art-button-wrapper>span.art-button-l
{
left: 0;
right: 4px;
background-position: top left;
}

span.art-button-wrapper>span.art-button-r
{
width: 4px;
right: 0;
background-position: top right;
}

span.art-button-wrapper.hover>span.art-button-l
{
background-position: center left;
}

span.art-button-wrapper.hover>span.art-button-r
{
background-position: center right;
}

span.art-button-wrapper.active>span.art-button-l
{
background-position: bottom left;
}

span.art-button-wrapper.active>span.art-button-r
{
background-position: bottom right;
}

span.art-button-wrapper input
{
float: none !important;
}
/* end Button */
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 943
6 дней назад
Со стилями все просто надо сделать еще один экспорт шаблона, изменив как Вам надо кнопки, но не с суффиксом art- , а например с dva- и в стилях взять такой же фрагмент для кнопок как и приведенный вами, скопировать его и вставить в Ваш файл.

А вот дальше надо прицепить новые стили к кнопкам. И здесь два пути если Вам нужно только к одной конкретной кнопке другой стиль сделать то надо у неё и прописать новый класс dva-button, правда надо искать в коде где она находится.
Второй вариант можно приравнять кнопки по типу к стилям например если вам нужно сделать, что бы все кнопки сброса
, а это тип "reset", были другого вида то перед стилями надо сделать приравнение примерно так

Код PHP:
  1.  
  2. input[type=reset],.dva-button
  3. {
  4. здесь новые стили
  5. }
  6.  
Теперь все кнопки типа "reset" будут другого стиля, можно сделать для других input[type=button]или input[type=submit]

Забыл сказать, только проверьте что бы у пред идущего стиля, который по умолчанию с art- уже не было приравнивания к этому типу, если есть то просто удалить в нем строку с приравниванием input[type=reset], или другую нужную Вам.
Редактировалось: 2 раза (Последний: 17 ноября 2012 в 12:29)
Захожу иногда
Dave
Сообщений: 49
745 дней назад
Спасибо большое, что откликнулись.
Сегодня-завтра попробую сделать, обязательно отпишусь, если получится. :)
Захожу иногда
Dave
Сообщений: 49
745 дней назад
Действительно, оказалось всё так просто. dance v
Спасибо большое, очень помогли. smile
|
Перейти на форум: