Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Форум для новичков » замена всех ссылок на свои кнопки


замена всех ссылок на свои кнопки

Сообщений 1 страница 20 из 20

1

здравствуйте! скажите как можно поменять все стандартные ссылки(кнопки) на свои кнопки к ссылкам которых применены классы с разными цветами
т.е. у каждой кнопке будет свой цвет

это как сейчас
http://s1.uploads.ru/t/4ZEs0.png

а это  примерно как хотелось бы (в фш начеркал для наглядности)
http://s5.uploads.ru/t/Gjzk6.png

ссылки кнопок с классами цветов

<a href="#" class="pcv_button">Детали</a>
<a href="#" class="pcv_button yellow">текст на кнопке</a>
<a href="#" class="pcv_button orange">текст на кнопке</a>
<a href="#" class="pcv_button blue">текст на кнопке</a>
<a href="#" class="pcv_button lightblue">текст на кнопке</a>
<a href="#" class="pcv_button darkblue">текст на кнопке</a>
<a href="#" class="pcv_button green">текст на кнопке</a>
<a href="#" class="pcv_button limegreen">текст на кнопке</a>
<a href="#" class="pcv_button saddlebrown">текст на кнопке</a>
<a href="#" class="pcv_button pink">текст на кнопке</a>
<a href="#" class="pcv_button black">текст на кнопке</a>
<a href="#" class="pcv_button purple">текст на кнопке</a>
<a href="#" class="pcv_button gray">текст на кнопке</a>
<a href="#" class="pcv_button darkgray">текст на кнопке</a>
<a href="#" class="pcv_button silver">текст на кнопке</a>

Отредактировано бродяга62 (Сб, 22 Окт 2016 01:08:28)

0

2

бродяга62
В HTML низ  (Классы проставьте сами для нужных элементов

<script><!--Добавка классов к ссылкам-->
var linkArray=new Array (

  ".pl-email a[href*='profile']","class1",  //Профиль
  ".pl-email a[href*='messages']","class2",  //ЛС
  ".pl-email a[href*='mailto'],.pl-email a[href*='misc.']","class3",  //E-mail
  ".pl-website a","class4",  //Вебсайт
  ".pl-delete a","class5",  //Удалить
  ".pl-edit a","class6",  //Редактировать
  ".pl-quote a","class7",  //Цитировать
  ".postlink a[href*='post.php?tid']","class8",  //Ответить
  ".postlink a[href*='post.php?fid']","class9",  //Новая тема
  ".postlink a[href*='poll']","class10",  //Новый опрос

  "End"//!последний элемент без запятой


)
for(var i=0;i<linkArray.length-1;i+=2 ){var L0=linkArray[i];var L1=linkArray[i+1];
$(".punbb").find(L0).addClass(L1);};
</script>

Можете добавлять в список и свои селекторы

+3

3

Спасибо!!!  дальше я доделаю..

+1

4

скрипт работает отлично!  но не могу добавить селекторы ссылок отправить, посмотреть, отписаться, поделиться
абсолютный помощник по дизайну выдает другое что то, у вас прописаны селекторы как то по другому
скажите как вы это делаете?  %-)

0

5

бродяга62

  ".formsubmit .button[name='submit']","class11", //отправить
  ".formsubmit .button[name='preview']","class12",  //посмотреть
  ".subscribelink > a[href*='?subscribe']","class13", //подписаться
  ".subscribelink > a[href*='?unsubscribe']","class14",// отписаться,
  ".post h3 .sharelink","class15", //поделиться


  "End"//!последний элемент без запятой

)

P.s :glasses: А лучше бы вытащить из этого скрипта селекторы, что я прописал, и  задать стиль конкретно для них (К примеру: .pl-quote a {color:red;}  - по идее скрипт и не нужен

0

6

здравствуйте! скажите а как поставить кнопки с классами вместо основного меню навигации (форум, участники, поиск и т.д.)

классы цветных кнопок

<a href="#" class="pcv_button">кнопка</a>
<a href="#" class="pcv_button yellow">кнопка</a>
<a href="#" class="pcv_button orange">кнопка</a>
<a href="#" class="pcv_button blue">кнопка</a>
<a href="#" class="pcv_button lightblue">кнопка</a>
<a href="#" class="pcv_button darkblue">кнопка</a>
<a href="#" class="pcv_button green">кнопка</a>
<a href="#" class="pcv_button limegreen">кнопка</a>
<a href="#" class="pcv_button saddlebrown">кнопка</a>
<a href="#" class="pcv_button pink">кнопка</a>
<a href="#" class="pcv_button black">кнопка</a>
<a href="#" class="pcv_button purple">кнопка</a>
<a href="#" class="pcv_button gray">кнопка</a>
<a href="#" class="pcv_button darkgray">кнопка</a>
<a href="#" class="pcv_button silver">кнопка</a>

скрин пример

http://se.uploads.ru/t/wu5NR.png

0

7

бродяга62
Ну по тому же принципу добавить в скрипт

  "#navindex a","class16", //Форум
  "#navuserlist a","class17",  //Участники
  "#navsearch a","class18", //Поиск
  "#navprofile a","class19",// Профиль
  // ... по такому принципу добавляем и для остальных  - пользуемся Инспектором в браузере


  "End"//!последний элемент без запятой


)

Как пользовацо инспектором > Инструменты для поиска и редактирования стиля (скриптов).

+1

8

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

9

бродяга62
Уберите кусок кода красным(Первое Окно стилей)

#pun-navlinks li a:hover, #pun-navlinks li a:focus {
  font-size: 1.4em;
  font-family: tahoma; font-weight: bold;
  }

+1

10

Спасибо! Теперь все норм

0

11

скажите пожалуйста как можно разбить меню на две части? или раздвинуть его

примерно так

http://s2.uploads.ru/t/6B28G.png

и хотелось бы из этого меню вытащить "администрирование", и сунуть допустим в шапку в нижний правый угол

0

12

бродяга62
Поставьте куда-нибудь в стили

#pun-navlinks {
  position:relative;
}
#navadmin {
  position:absolute;
  right:10px;top:-66px;
}

0

13

С админкой норм, спасибо!
А на две части меню поделить или раздвинуть его можно?

0

14

бродяга62
Можно, - поясните, какие пункты куда раздвинуть.. :glasses:

0

15

в фш изобразил как хотелось бы

скрин

http://se.uploads.ru/t/i4OLX.png

а это расстояние возможно будет как то регулирывать?

0

16

бродяга62
В Конец Первого Окна стилей

#pun-navlinks .container {padding:0 5px 0 0}
#navindex,#navuserlist,#navsearch,#navprofile {float:left;margin-top:-5px;margin-left:2px;}
#navextra1,#navpm,#navlogin,#navlogout,#navregister {float:right;margin-top:-5px;margin-right:2px;}

0

17

чего то не хочет работать, без изменений

0

18

извиняюсь, теперь все работает! только вот с правой стороны кнопки расположены наоборот
меняю расположение в коде, не помогает

скрин

http://se.uploads.ru/t/8Lpkv.png

Отредактировано бродяга62 (Сб, 31 Дек 2016 09:56:50)

0

19

бродяга62
Тады со скриптом придется... => В HTML верх

<script>$().pun_mainReady(function(){$("#navextra1,#navpm,#navlogout,#navlogin,#navregister").wrapAll("<div id=navLnkExtra></div>");})</script>

А в Первом Окне стилей - красное убрать, синее добавить

/* разделение главного меню на две части*/
#pun-navlinks .container {padding:0 5px 0 0}
#navindex,#navuserlist,#navsearch,#navprofile {float:left;margin-top:-5px;margin-left:2px;}
#navextra1,#navpm,#navlogout,#navlogin,#navregister {float:right;margin-top:-5px;margin-right:2px;}
#navLnkExtra {float:right}

0

20

Все работает как надо!  Спасибо!

+1


Вы здесь » Единый форум поддержки » Форум для новичков » замена всех ссылок на свои кнопки