• Страница 1 из 1
  • 1
Форум » ...iT заметки [общие компьютерные темы] » Выбор CMS » ucoz » .frmButns83 кнопки
.frmButns83 кнопки
avatar
Местный | Оффлайн
Хочу сделать себе такие же кнопки которые находять в класе .frmButns83 как
на этом форуме "Ответить", "Новая тема", "Новый Опрос". Я не хочу
загружать их как картинку. Тут посмотрел на код так тут просто ссылка
идет без картинок! Как мне так же сделать?
[Сообщение # 1]  
avatar
Админ | Оффлайн
Сама кнопка ответить:
Код
<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]  
avatar
Местный | Оффлайн
Здесь в 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]  
avatar
Админ | Оффлайн
Вариантов здесь много, извращаться можно как угодно, хоть через стили 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]  
avatar
Админ | Оффлайн
Я немного продвинулся в этом вопросе. Понял как в скрипте сделать замену. Например для кнопки "Новый ответ", просто:


Код
$('div[id^="frmButns83"] a[href^="#post"]').addClass('sk_but').html('Новый ответ');

А вот для кнопки "Новая тема", надо указывать id форума, $FID$ в скрипте не катит.


[Сообщение # 5]  
avatar
Местный | Оффлайн
Один из простых примеров реализации данной задумки. Думаю, что объяснять что и как происходит в данном варианте не нужно. 


Код
<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]  
avatar
Админ | Оффлайн

Код
<button class="button button_red button_fullwidth">Создать тему</button>
и


Код
<button class="button button_mark-read">Создать опрос</button>

у меня так


[Сообщение # 7]  
avatar
Местный | Оффлайн
Общими усилиями пришли к решению этой задачи . В общем у меня получилось так. Я применил этот скрипт, установив его в
"Общий вид страниц форума" перед </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]  
Форум » ...iT заметки [общие компьютерные темы] » Выбор CMS » ucoz » .frmButns83 кнопки
  • Страница 1 из 1
  • 1
Поиск:

close