» »

Изменить кнопки BB-коды на сайте для uCoz

Изменить кнопки BB-коды на сайте для uCoz

Здесь разберем как можно изменить кнопки BB коды, когда происходит добавление материала. И поставить красивые по дизайн с тенями. У кого не установлен визуальные кнопки или обновленные, то вы можете стандартные кнопки убрать и поставить совершенно другой дизайн. Где также будет красивый эффект, который сопровождается сменой тенями, которые прописаны у каждого свои и это даже при клике они буду изменятся и визуально смотреться станут намного стильные, из ходя от которые были по умолчанию.

Само изменение произойдет по всему сайту а не только форме добавление, это на всех модулях, включая форум. Также измененные BB-коды будут стоять на комментариях. Просто некоторые стараются сразу перейти на визуальные, но здесь когда поставите и вы увидите большое изменение. Все что нужно, это только убрать стили которые за них отвечают и поставить уже готовые. Здесь будет представлены 2 гамму, что можете подобрать под свою стилистику.

Приступаем к установке:

Вам нужно в CSS убрать те стили, что выводят стандартный дизайн и чтоб кнопки остались светлые. И после этого выбираем какой вам вариант ближе подходит и на это место их устанавливаем.

1. Первый вариант:

Синее

Стильные синее кнопки bb кода на сайт

Код
#casing input[type='submit'],#casing input[type='reset'],#casing input[type='button'],#casing button {box-shadow: 0px 5px 20px 0px rgba(86, 190, 227, 1);font-size:11px!important;padding:9px 11px;margin:0 0 1px;border:none;font-weight:normal!important;cursor:pointer;background: #3586F2;border-radius: 3px;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 {box-shadow: 0px 5px 20px 0px rgba(44, 173, 41, 1);;background: #208B18;color:#fff;}


2. Вариант вариант:

Светло алые:

Красивые кнопки BBкоды с тенями на сайт uCoz

Код
#casing input[type='submit'],#casing input[type='reset'],#casing input[type='button'],#casing button {box-shadow: 0px 5px 20px 0px rgba(227, 161, 86, 1);font-size:11px!important;padding:9px 11px;margin:0 0 1px;border:none;font-weight:normal!important;cursor:pointer;background:#f27935;border-radius: 3px;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 {box-shadow:0px 5px 20px 0px rgba(247, 156, 156, 1);;background:#F44336;color:#fff;}

PS - здесь если не одна подборка не подходит. то вы ставите и потом сами настраиваете и подбираете, ту гамму цвета. что соответствует вашему дизайн сайту.
14.04.2017 Просмотров: 697 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Комментарий: 19
Scheme
Scheme 14.04.2017 05:151
0
За это спасибо, кнопочки явно красивые.
tsakonter
tsakonter 14.04.2017 05:212
0
Сейчас такие кнопки модные, но смотрятся ясно лучше, чем раньше были нарисованы.
Kosten
Kosten 14.04.2017 05:265
0
Думаю сейчас можно такие на системе сделать, если было можно раньше создать, то и они появились давно в сети.
Марковичь
Марковичь 14.04.2017 05:233
0
Вот понимаю как убрать старые и поставить новые, а другие что гадать будут, какой стиль убрать.
Kosten
Kosten 14.04.2017 05:254
0
Но раньше как то же ставили, можно посмотреть через браузер, точно не могу сказать какие, убирал через браузер и через него ставил, чтоб в админ панель не заходить.
Dagada
Dagada 14.04.2017 06:556
0
Код
<button class="btn">все для вас</button>


так можно их выводить на сайт (если конечно они вам нужны 11a )
Dagada
Dagada 14.04.2017 12:147
0
Играйте rgba под стиль сайта.
Kosten
Kosten 15.04.2017 03:0617
0
Ссылка битая и на что она вела.
-SAM-
-SAM- 15.04.2017 03:2318
0
Ссылка рабочая вообще-то, вот: Доступно только для пользователей (выбор цвета и конвертер цветов онлайн).
Dagada
Dagada 14.04.2017 16:498
0
Что не так я в дугу, извиняюсь.
1 2 »
avatar