Информация

  • FastVps - Хостинг для форума
  • RegPartner - Домены по правильным ценам

"4admins.ru" Рекомендует

Нужны кнопки, выполненные в CSS.

Стили, ббкоды, смайлы и прочее для украшения форума
  • Автор 
    Сообщение
Аватара пользователя
антивирус
антивирус
Сообщения: 605
Зарегистрирован: 25 дек 2011, 03:00
Благодарил (а): 83
Поблагодарили: 119 раз в 98 сообщениях
Город: Царицын
Пол: Мужской
Адрес форума: http://forum.sdmon.ru/
Баллы репутации: 23

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 22 июл 2013, 20:40

Уже сделал и разобрался. Как всё закончу, выложу готовый результат.

Автор не может молчать 5 часов 48 минут 49 секунд и добавляет ...

Методом околонаучного тыка удалось сделать задуманное.
В тему стиля добавлено:
Код: Выделить всё
/* Profile Button
---------------------------------------- */
.profile-button {
background: #fdf9ed; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #fdf9ed 0%, #e4c054 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fdf9ed), color-stop(100%,#e4c054)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #fdf9ed 0%,#e4c054 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf9ed', endColorstr='#e4c054',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

   border: 1px solid #aaa;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;   
   font: bold 11px "helvetica neue", helvetica, arial, sans-serif; 
   padding: 5px 10px;
   text-align: center;
   vertical-align: middle;
   opacity: 0.6;
}

.profile-button:hover {
   background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top,  #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f6e6b4 0%,#ed9017 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */

   cursor: pointer;
   text-decoration: none;
   border: 1px solid #444444;
   
   opacity: 1;
}

.profile-button:active {
   background: #b30300;
   background: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
   background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
   -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
   -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
   box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
}

В шаблон viewtopic_body.html вместо удаленного:
Код: Выделить всё
  <div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
добавлено:

Код: Выделить всё
<div class="back2top">
<ul class=" rightside">

<div class="profile-icons">

<!-- IF postrow.U_QUOTE --><a class="profile-button" href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}"><span>Цитата</span></a><!-- ENDIF -->

<!-- IF postrow.S_GIVE_THANKS --><a class="profile-button" href="{postrow.U_THANKS}" title="{L_THANKS_REMOVE}"><span>Убрать благодарность</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.S_FIRST_POST and not postrow.S_GIVE_THANKS and not postrow.S_IS_OWN_POST --><a class="profile-button" href="{postrow.U_THANKS}"><span>Благодарю</span></a>&#160;<!-- ENDIF -->


<!-- IF postrow.U_EDIT --><a class="profile-button" href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>Правка</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.U_DELETE --><a class="profile-button" href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>Х</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.U_REPORT --><a class="profile-button" href="{postrow.U_REPORT}" title="{L_REPORT_POST}"><span>!</span></a>&#160;<!-- ENDIF -->
   
   <!-- IF postrow.U_INFO --><a class="profile-button" href="{postrow.U_INFO}" title="{L_INFORMATION}"><span>?</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.U_WARN --><a class="profile-button" href="{postrow.U_WARN}" title="{L_WARN_USER}"><span><b>&Oslash;</b></span></a>&#160;<!-- ENDIF -->
   
<!-- IF QUICK_REPLY --><a class="profile-button" href=="#postform" onclick="if((window.getSelection && window.getSelection().toString() == '') || (document.getSelection && document.getSelection() == '') || (document.selection && document.selection.createRange().text == '')){ alert('Для вставки цитаты выделите нужную часть текста и нажмите на кнопку.'); }else{ addquote({postrow.POST_ID},'{postrow.POSTER_QUOTE}'); insert_text('\r\n'); return false; }" title="{L_QUOTE_TEXT}"><span>"Цитата"</span></a>&#160;<!-- ENDIF -->

<a class="profile-button" href="#wrap" title="{L_BACK_TO_TOP}"><span><b>&uArr;</b></span></a>     
</div>
</ul>

<ul class=" leftside">
<div class="profile-icons">
<a class="profile-button" href="#wrap" title="{L_BACK_TO_TOP}"><span><b>&uArr;</b></span></a>
<!-- IF postrow.U_PM --><a class="profile-button" href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>ЛС</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.U_EMAIL --><a class="profile-button" href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>@</span></a>&#160;<!-- ENDIF -->

<!-- IF postrow.U_WWW --><a class="profile-button" href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>WWW</span></a>&#160;<!-- ENDIF -->

</div>
</ul>
</div>


Кроме рекомендованного ранее, за ненадобностью, удалил кусок кода с кнопками ЛС, E-mail, WWW и т.д.

Автор не может молчать 6 часов 1 минуту 31 секунду и добавляет ...

Осталось поменять кнопки "ответить" и "новая тема". Подскажите, пожалуйста, где их найти?
И есть у меня кнопочка в виде такого кода:
Код: Выделить всё
<div>
<br/><div class="topicinfo"><img src="http://sdmon.4adm.ru/storage/sdmon_4adm_ru/images/PROFIL3.png" alt="Показать/скрыть" value="Show" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" />

</div><div><div style="display: none;">

Она прячет под спойлер минипрофиль под аватаркой. Буду признателен, если переделаете этот код и вместо картинки можно будет вставить такую же кнопку в CSS.
Изображение
Изображение

Аватара пользователя
Сообщения: 619
Зарегистрирован: 18 июл 2012, 17:51
Благодарил (а): 13
Поблагодарили: 237 раз в 212 сообщениях
Пол: Мужской
Адрес форума: http://cabinetadmina.ru
Баллы репутации: 53

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 23 июл 2013, 16:12

"Ариан" писал(а):
В тему стиля добавлено:

После тега <ul class=" rightside"> должен быть <li>, тоже самое с закрывающими тегами....

"Ариан" писал(а):
где их найти?

В шаблоне viewforum_body.html:
Код: Выделить всё
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></div>

Заменить на:
Код: Выделить всё
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><span class="topic-button"><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></span></a></div>


В шаблоне viewtopic_body.html:
Код: Выделить всё
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>

Заменить на:
Код: Выделить всё
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span class="topic-button"><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></span></a></div>


В тему стиля добавить:
Код: Выделить всё
.reply-icon span.topic-button,
.locked-icon span.topic-button {
   background: #fdf9ed; /* Old browsers */
   background: -moz-radial-gradient(center, ellipse cover,  #fdf9ed 0%, #e4c054 100%); /* FF3.6+ */
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fdf9ed), color-stop(100%,#e4c054)); /* Chrome,Safari4+ */
   background: -webkit-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Chrome10+,Safari5.1+ */
   background: -o-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Opera 12+ */
   background: -ms-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* IE10+ */
   background: radial-gradient(ellipse at center,  #fdf9ed 0%,#e4c054 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf9ed', endColorstr='#e4c054',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   border: 1px solid #aaa;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;   
   font: bold 11px "helvetica neue", helvetica, arial, sans-serif; 
   padding: 0 5px;
   line-height: 25px;
}
.buttons div a:hover span.topic-button {
   background: #f6e6b4; /* Old browsers */
   background: -moz-linear-gradient(top,  #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #f6e6b4 0%,#ed9017 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
   border: 1px solid #444444;
}


Найти:
Код: Выделить всё
/* Rolloff state */
.buttons div a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
   position: relative;
   overflow: hidden;
}


Удалить или закомментировать overflow: hidden; (закомментировать, значит обернуть в /* ... */)



По кнопке под аватаром.
Можно найти в коде:
Код: Выделить всё
<img src="http://sdmon.4adm.ru/storage/sdmon_4adm_ru/images/PROFIL3.png" alt="Показать/скрыть" value="Show" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" />

И заменить на:
Код: Выделить всё
<span class="topicinfo-button" alt="Показать/скрыть" value="Show" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show'; }">Профиль</span>

Ну и в тему добавить:
Код: Выделить всё
.topicinfo-button {
   background: #fdf9ed; /* Old browsers */
   background: -moz-radial-gradient(center, ellipse cover,  #fdf9ed 0%, #e4c054 100%); /* FF3.6+ */
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fdf9ed), color-stop(100%,#e4c054)); /* Chrome,Safari4+ */
   background: -webkit-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Chrome10+,Safari5.1+ */
   background: -o-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* Opera 12+ */
   background: -ms-radial-gradient(center, ellipse cover,  #fdf9ed 0%,#e4c054 100%); /* IE10+ */
   background: radial-gradient(ellipse at center,  #fdf9ed 0%,#e4c054 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf9ed', endColorstr='#e4c054',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   border: 1px solid #aaa;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;   
   font: bold 11px "helvetica neue", helvetica, arial, sans-serif; 
   padding: 3px 10px;
   cursor: pointer;
}


Оформление кнопок конечно на свой вкус, я просто взял код из предыдущего сообщения.
http://cabinetadmina.ru/ - Сервис по оптимизации, модернизации и раскрутке ваших форумов.

Аватара пользователя
антивирус
антивирус
Сообщения: 605
Зарегистрирован: 25 дек 2011, 03:00
Благодарил (а): 83
Поблагодарили: 119 раз в 98 сообщениях
Город: Царицын
Пол: Мужской
Адрес форума: http://forum.sdmon.ru/
Баллы репутации: 23

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 23 июл 2013, 17:06

Ура! Оно работает! Только кнопка "Профиль" не меняется при наведении курсора и при нажатии и не заработала кнопка "Новая тема". Т.е наложение произошло. Что ещё надо удалить?

Автор не может молчать 55 минут 18 секунд и добавляет ...

С профилем разобрался. Осталось настроить "новая тема" Тут моих познаний не хватает.
Изображение
Изображение

Сообщения: 77
Зарегистрирован: 27 июл 2012, 21:40
Благодарил (а): 7
Поблагодарили: 0 раз в 0 сообщении
Город: Киренск
Пол: Женский
Адрес форума: http://akvaforumes.greatforum.ru
Баллы репутации: 0

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 11:27

"CornerAdmin" писал(а):
В тему стиля:

А в шаблоне сохранять уже изменения? И куда в теме стиля это вставлять? :scratch:

Аватара пользователя
Сообщения: 619
Зарегистрирован: 18 июл 2012, 17:51
Благодарил (а): 13
Поблагодарили: 237 раз в 212 сообщениях
Пол: Мужской
Адрес форума: http://cabinetadmina.ru
Баллы репутации: 53

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 14:38

Ксения.
Можно просто в самый конец темы вашего стиля.

"Ариан" писал(а):
Осталось настроить "новая тема"

Чего-то я пропустил этот момент.
Замены делали из предыдущего поста? Не заработало?
http://cabinetadmina.ru/ - Сервис по оптимизации, модернизации и раскрутке ваших форумов.

Аватара пользователя
антивирус
антивирус
Сообщения: 605
Зарегистрирован: 25 дек 2011, 03:00
Благодарил (а): 83
Поблагодарили: 119 раз в 98 сообщениях
Город: Царицын
Пол: Мужской
Адрес форума: http://forum.sdmon.ru/
Баллы репутации: 23

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 15:22

Толком не заработало. Кнопка "ответить" получилась выше и длиннее. Кнопка "Новая тема" Осталась старая, но при этом наложилась надпись новой.
Но подумав, я решил, что эти изменения лишние, ибо таких кнопок ещё много. Пусть живут.
Изображение
Изображение

Сообщения: 77
Зарегистрирован: 27 июл 2012, 21:40
Благодарил (а): 7
Поблагодарили: 0 раз в 0 сообщении
Город: Киренск
Пол: Женский
Адрес форума: http://akvaforumes.greatforum.ru
Баллы репутации: 0

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 15:58

"Ариан" писал(а):
Это не то место. У меня сейчас кнопка "вернуться к началу" в правом нижнем углу сообщений, а все остальные, справа вверху. Надо, чтобы все оказались справа внизу.

А у меня внизу, все, в строчку.

Аватара пользователя
антивирус
антивирус
Сообщения: 605
Зарегистрирован: 25 дек 2011, 03:00
Благодарил (а): 83
Поблагодарили: 119 раз в 98 сообщениях
Город: Царицын
Пол: Мужской
Адрес форума: http://forum.sdmon.ru/
Баллы репутации: 23

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 16:04

Ксения., это уже давно не так. Я же писал, что разобрался с этой проблемой методом научного тыка. :)
Кстати, не увидел у вас кнопки "Цитата части текста". И лучше использовать значки, вместо длинных слов. При наведении на кнопку всё-равно подсказка всплывает. Посмотрите у меня на форуме. Красный цвет кнопки при наведении на неё, не очень гармонирует с цветом форума.
Изображение
Изображение

Сообщения: 77
Зарегистрирован: 27 июл 2012, 21:40
Благодарил (а): 7
Поблагодарили: 0 раз в 0 сообщении
Город: Киренск
Пол: Женский
Адрес форума: http://akvaforumes.greatforum.ru
Баллы репутации: 0

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 16:18

"Ариан" писал(а):
Я же писал, что разобрался с этой проблемой методом научного тыка

Ага, еще бы понять это.) Куда что девать, чтоб оно пере ставилось.

Аватара пользователя
антивирус
антивирус
Сообщения: 605
Зарегистрирован: 25 дек 2011, 03:00
Благодарил (а): 83
Поблагодарили: 119 раз в 98 сообщениях
Город: Царицын
Пол: Мужской
Адрес форума: http://forum.sdmon.ru/
Баллы репутации: 23

Re: Нужны кнопки, выполненные в CSS.

Сообщение Добавлено: 04 авг 2013, 16:19

Что и куда вы хотите переставить?
Изображение
Изображение


Вернуться в Оформление форумов

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 9