| Kosten | Пятница, 28 Июня 2019 | Сообщение 1 |
| Здесь будем изменять стандартные кнопки, которые все идут изображением, так как конструктор предлагает свой набор. А заменим на скрипт, где выведем оригинальный стиль с эффектами на каждую кнопку с каждым функционалом.
Чтоб понимать, как пример стандартные кнопки для форума:
Этот оригинальный дизайн, где по вверх кнопок идет значение, которое будет имеет собственный эффект, то его станем выводить скриптом. Так как под него еще написаны стили, то безусловно самостоятельно можно изменить полностью стилистику под свой дизайн.
Давайте изначально поделим установочный процесс скрипта на 3 части, где желательно третью часть сделать обязательно, чтобы в дальнейшем избежать проблем.
Установка
1. Заходим в Панель управления » Управление дизайном » Форум (Общий вид страниц форума) и перед тегом body вставляем следующий JavaScript:]
Код <script type="text/javascript">
(function() {
function checkQS(obj, callback) {
if (obj)
callback(obj);
return;
}
if ('$PAGE_ID$' == 'threadpage' || '$PAGE_ID$' == 'forum') {
checkQS(document.querySelector('a[href$="-0-0-1-1"]'), function(obj) {
obj.classList.add('postbtn1');
obj.innerHTML = '<span></span> Новая тема';
});
checkQS(document.querySelector('a[href$="-0-0-1-2"]'), function(obj) {
obj.classList.add('postbtn2');
obj.innerHTML = '<span></span> Новый опрос';
});
if ('$PAGE_ID$' == 'threadpage') {
checkQS(document.querySelector('a[href="#post"]'), function(obj) {
obj.classList.add('postbtn3');
obj.innerHTML = '<span></span> Ответить';
});
checkQS(document.querySelector('img[src*="t_closed"]'), function(obj) {
var e = document.createElement('span');
e.classList.add('postbtn4');
e.innerHTML = '<span></span> Закрыто';
obj.parentNode.insertBefore(e, obj);
obj.remove();
});
}
checkQS(document.getElementById('frmButns83').querySelectorAll('a[onclick*="_uWnd"]'), function(objs) {
for (var i = objs.length; i-- > 0;)
objs[i].remove();
});
}
})();
</script>
Остается придать им оригинальный вид, так, чтоб можно было наблюдать уже реальные кнопки а не просто непонятный дизайн, который далее будут соответствует нашей задумки. Вот как раз для этого предоставляется стилистика CSS стилей которую нужно установить по месту.
2. В CSS выставляем стили.
Код a.postbtn1,
a.postbtn2,
a.postbtn3,
span.postbtn4 {
width:auto;
height:16px;
padding:5px 14px;
color:#4e4b4b;
background: #ececec;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f5f1f1', endColorstr = '#ded8d8');
background: -webkit-linear-gradient(top, #f5f1f1, #ded8d8);
background: -moz-linear-gradient(top, #f5f1f1, #ded8d8);
background: -o-linear-gradient(top, #f5f1f1, #ded8d8);
background: -ms-linear-gradient(top, #f5f1f1, #ded8d8);
border: 1px solid #bfbcbc;
border-radius: 5px;
}
3. Заключительное действие, где загружаем изображение /CSS-ZORNET/Abvan/numerdigsa/35658276.png себе на сайт. Это делается для того, чтоб в дальнейшем оно всегда актуальным было, так как ссылка возможно со временем бттой станет, а здесь явно не затеряется на сайте, а значит кнопки с иконками не исчезнут.
Источник: yraaa.ru
| | Страна: (RU) |
| |
