|
.frmButns83 кнопки
|
|
|
|
| Хочу сделать себе такие же кнопки которые находять в класе .frmButns83 как
на этом форуме "Ответить", "Новая тема", "Новый Опрос". Я не хочу
загружать их как картинку. Тут посмотрел на код так тут просто ссылка
идет без картинок! Как мне так же сделать?
|
| [Сообщение # 1]
|
| |
|
|
| Сама кнопка ответить:
Код <a href="#post" class="postbtn5"><span></span> Ответить</a>
в css:
Код a.postbtn5 {width:auto;height:16px;padding:5px 14px;color:#595959;background:
#ececec;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr
= '#f8f8f8', endColorstr = '#e0e0e0');background:
-webkit-linear-gradient(top, #f8f8f8, #e0e0e0);background:
-moz-linear-gradient(top, #f8f8f8, #e0e0e0);background:
-o-linear-gradient(top, #f8f8f8, #e0e0e0);background:
-ms-linear-gradient(top, #f8f8f8, #e0e0e0);border: 1px solid
#c4c4c4;border-radius: 5px;}
|
| [Сообщение # 2]
|
| |
|
|
|
| Здесь в core.js есть часть кода:
Код if (page_id=='threadpage' || page_id=='forum') {
var fid =
location.href.substr(strpos(location.href,'forum/')+6,strpos(location.href.substr(strpos(location.href,'forum/')+6),'-'));
if (!strpos(location.href.substr(strpos(location.href,'forum/')+6),'-'))
{fid = location.href.substr(strpos(location.href,'forum/')+6);}
$('a[href*="/forum/'+fid+'-0-0-1-1"]').addClass('postbtn3').html('<span></span> Новая тема');
$('a[href*="/forum/'+fid+'-0-0-1-2"]').addClass('postbtn4').html('<span></span> Новый опрос');
if (page_id=='threadpage') $('a[href="#post"]').addClass('postbtn5').html('<span></span> Ответить');
if (page_id=='threadpage')
$('img[src*="t_closed"]').wrap('<span></span>');$('img[src*="t_closed"]').parents('span').addClass('postbtn6').html('<span></span>
Закрыто');
$('#frmButns83 a[onclick*="_uWnd"]').remove();
}
Из этого видно, что с помощью скрипта происходит подмена дефолтных картинок на слили postbtn3, postbtn4, postbtn5 и postbtn6.
|
| [Сообщение # 3]
|
| |
|
|
|
| Вариантов здесь много, извращаться можно как угодно, хоть через стили CSS, хоть через jQuery.
Приведу небольшие примеры:
Код $('div[id^="frmButns"]').html('здесь код, который будем выводить');
Данный код позволит заменить содержимое дива у которого значение идентификатора начинается с frmButns
Можно добавить класс для кнопок, чтобы использовать его...
Код $('div[id^="frmButns').addClass('tadam');1
и т.п...
С CSS в принципе все также. По начальному значению идентификатора
прописываем какое нужно оформление: скрываем картинки, добавляем через
background другие изображения и т.п.
Код div[id^="frmButns"] img{
display: none;
}
div[id^="frmButns"] a{
background: #f00;
padding: 10px;
}
div[id^="frmButns"] a+a{
background: #ff0;
padding: 10px;
}
|
| [Сообщение # 4]
|
| |
|
|
|
| Я немного продвинулся в этом вопросе. Понял как в скрипте сделать замену. Например для кнопки "Новый ответ", просто:
Код $('div[id^="frmButns83"] a[href^="#post"]').addClass('sk_but').html('Новый ответ');
А вот для кнопки "Новая тема", надо указывать id форума, $FID$ в скрипте не катит.
|
| [Сообщение # 5]
|
| |
|
|
|
| Один из простых примеров реализации данной задумки. Думаю, что объяснять что и как происходит в данном варианте не нужно.
Код <script>
$(document).ready(function(){
$('div[id^="frmButns"] a[href$="0-0-1-1"]').html('Новая тема');
$('div[id^="frmButns"] a[href$="0-0-1-2"]').html('Новый опрос');
$('div[id^="frmButns"] a[href^="#post"]').html('Ответить');
$('div[id^="frmButns"] img[src*="t_closed.gif"]').wrap('<span></span>');
$('div[id^="frmButns"] img[src*="t_closed.gif"]').parents('span').html('Тема закрыта');
});
</script>
Вариантов, как я уже писал, предостаточно. Замену можно делать как по начальным значениям атрибутов, так и по конечным.
|
| [Сообщение # 6]
|
| |
|
|
|
| Код <button class="button button_red button_fullwidth">Создать тему</button>
Код <button class="button button_mark-read">Создать опрос</button>
у меня так
|
| [Сообщение # 7]
|
| |
|
|
|
| Общими усилиями пришли к решению этой задачи  . В общем у меня получилось так. Я применил этот скрипт, установив его в
"Общий вид страниц форума" перед </body>. Предварительно добавив к
нему стили:
Код <script>
$(document).ready(function(){
$('div[id^="frmButns"] a[href$="0-0-1-1"]').addClass('sk_but').html('Новая тема');
$('div[id^="frmButns"] a[href$="0-0-1-2"]').addClass('sk_but').html('Новый опрос');
$('div[id^="frmButns"] a[href^="#post"]').addClass('sk_but').html('Ответить');
$('div[id^="frmButns"] img[src*="t_closed.gif"]').wrap('<span></span>');
$('div[id^="frmButns"] img[src*="t_closed.gif"]').parents('span').addClass('t_closed').html('Тема закрыта');
};);
</script>
с этим стилем (.sk_but) у меня уже сделаны $USER_DETAILS_ICON_BAR$ - это
кнопки "Профиль", "Личка", "Сайт" и т.д., $ENTRY_MANAGE_ICON_BAR$ -
кнопки "Цитата", "Правка", "Удалить", также меню навигации форума.
В css, добавил:
Код div[id^="frmButns"] img{
display: none;
}
div[id^="frmButns"] {
margin-top: 7px;
margin-bottom: 20px;
clear: both;
}
Что бы отключить показ картинок совсем и увеличил отступ для кнопок. В
настройках форума надо выбирать картинки, которые даются по дефолту,
любые, все равно отключаем, нам нужна ссылка именно к стандартным
иконкам.
Теперь про закрытые темы. Так как, после применения скрипта, картинка отключилась, а "Тема закрыта" стала отображаться
простым текстом. Стиль, применяемый для кнопок не пойдет (он у меня
применен к ссылкам a.sk_but), указываем для них свой стиль .t_closed. Я
просто взял стиль кнопок с их hover эффектом, только текст сделал
красным.
|
| [Сообщение # 8]
|
| |
Пятница 29.11.2024, 18:29:19 
