Изменяем внешний вид элементов управления("Редактировать", "Удалить", "IP" и т.д. )

ogbiwap

Проверенные
Сообщения
187
Реакции
131
Баллы
11,070
Добавляем в шаблон EXTRA.css данный код
Код:
.message .messageMeta .control.edit {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#33bdef;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.edit:hover  {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#019ad2;
  }
.message .messageMeta .control.edit:active {
  position:relative;
  top:1px;
  }
.message .messageMeta .control.history {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#33bdef;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.history:hover  {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#019ad2;
  }
.message .messageMeta .control.history:active {
  position:relative;
  top:1px;
  }
.message .messageMeta .control.ip  {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#42FFA1;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.ip  {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#42FFA1;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.ip:hover  {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#14FF8A;
  }
.message .messageMeta .control.ip:active {
  position:relative;
  top:1px;
  }
.message .messageMeta .control.report  {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#42FFA1;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.report:hover  {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#14FF8A;
  }
.message .messageMeta .control.report:active {
  position:relative;
  top:1px;
  }
.message .messageMeta .control.warn, .message .messageMeta .control.delete  {

  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#42FFA1;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;

  }
.message .messageMeta .control.warn, .message .messageMeta .control.delete:hover  {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#14FF8A;
  }
.message .messageMeta .control.warn, .message .messageMeta .control.delete:active {
  position:relative;
  top:1px;
  }
.message .publicControls .item {
 
  -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;
 
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
 
  background-color:#33bdef;
 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
 
  border:1px solid #057fd0;
 
  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 15px;
  text-decoration:none;
 
  text-shadow:0px -1px 0px #5b6178;
 
  }
  .message .publicControls .item:hover {
 
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
 
  background-color:#019ad2;
  }
  .message .publicControls .item:active {
  position:relative;
  top:1px;
  }
Без имени20130831001958.jpg
Только для стиля default,с остальными стилями не проверялось!
(Сделано на основе кода от администратора Hope,за что ему большое спасибо!)
 
Последнее редактирование:
А кнопка Редатировать не поменялась.
 
Я ничего не прописывал - тупо скопипастил и фсе. Я уже откатил - у меня в админ-заходе они вооще друг на друге валяются. У меня там просто стоит долбанный аддон, который кроме лайков еще массу эмоций дает выразить - вот с ним он не дружит. видимо. Воощем, всеравно спс.
 
Я ничего не прописывал - тупо скопипастил и фсе. Я уже откатил - у меня в админ-заходе они вооще друг на друге валяются. У меня там просто стоит долбанный аддон, который кроме лайков еще массу эмоций дает выразить - вот с ним он не дружит. видимо. Воощем, всеравно спс.
А по русски можно?Что валяется?
 
Да я вроде по-русски. У меня немного уменьшена ширина страницы. И некоторые кнопки сидят друг на друге - не фатает им места кароче.
 
Да я вроде по-русски. У меня немного уменьшена ширина страницы. И некоторые кнопки сидят друг на друге - не фатает им места кароче.
Теперь ясно,если хотите я посмотрю может ширину кнопок уменьшу.
 
Правильно понимаю, что можно все кнопки разного цвета сделать?
Всяки там :
#019ad2
Поменять на свои .
Слишком ярко...где изменить цвет на свой?
В какой строке.
Спасибо!
 
#019ad2 - меняйте цвет на свой.
 
Я использую стиль Baisik и хотелось бы знать, как я могу изменить вид этих кнопок? Некоторые я бы просто сократил до пиктограммы, а для некоторых настроил стили. Куда копать?

22-05-00.gif
 
Что? А при чём тут эта тема вообще? Вопрос задавайте в тему своего стиля.
 
Я использую стиль Baisik и хотелось бы знать, как я могу изменить вид этих кнопок? Некоторые я бы просто сократил до пиктограммы, а для некоторых настроил стили. Куда копать?

Посмотреть вложение 10654
http://xenforo.info/threads/Замена-ссылок-на-кликабельные-кнопки-работы-с-сообщением.1835/

работа вся проходит во фразах
 
Оптимизировал код, сделал более гибким при добавлении не стандартных кнопок.
К примеру как на скрине, кнопка "Добавить репутацию".
mod_buttons2.png
Код:
/* public_control ===================================================== */
.message .publicControls .item {
    -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#33bdef;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 8px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;
}

.message .publicControls .item:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#019ad2;
}

.message .publicControls .item:active {
  position:relative;
  top:1px;
}

/* private_control ==================================================== */
.message .privateControls .item {
    -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
  -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
  box-shadow: 0px 1px 0px 0px #f0f7fa;

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
  background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

  background-color:#33bdef;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;

  border:1px solid #057fd0;

  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:10px;
  font-weight:bold;
  padding:4px 8px;
  text-decoration:none;

  text-shadow:0px -1px 0px #5b6178;
}

.message .privateControls .item:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
  background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

  background-color:#019ad2;
}

.message .privateControls .item:active {
  position:relative;
  top:1px;
}

/* private_control_muted:none ==================================================== */
.message .privateControls .muted {
  background:none;
  background-color:none;
  border-radius:none;
  border:none;

  display:inline-block;
  color:#969696;
  font-family:Trebuchet MS;
  font-size:11px;
  font-weight:none;

  text-shadow:none;
}
.message .privateControls .muted:hover {
  background:none;
  background-color:none;
}
 
Ребят, а как этим кодом изменить кнопки на иконки ? Можно ?

ЗЫ - про другую тему я знаю, но там код на сторонний ресурс меня смущает.
 
Тоже хочу знать. :-)

madbatman, разобрался, нужно править шаблон post , ищете кнопу и правите ссылку на картинку.[DOUBLEPOST=1390829708,1390386018][/DOUBLEPOST]Выглядит это примерно так :

27.01.png

Иконки 16х16 , думаю можно\нужно уменьшить, ну и каждый рисует под свой шаблон, это просто пример.
 
Красивенько так. :-)

Привет Миш, у меня просто ширина форума фиксированная, в одну строчку эти элементы не влазили, было не красиво, вот и решил сделать иконки. А если размер форума резиновый, то лучше оставить как есть, а то место пустое будет, по мне так.
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу