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

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

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

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

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

Страница: 1

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

1

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

это как сейчас
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

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

бродяга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

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

+1

4

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

0

5

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

бродяга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

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

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

<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

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

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

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

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


)

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

+1

8

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

0

9

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

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

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

+1

10

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

0

11

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

примерно так

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

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

0

12

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

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

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

0

13

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

0

14

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

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

0

15

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

скрин

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

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

0

16

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

бродяга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

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

0

18

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

скрин

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

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

0

19

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10712
  • Уважение: +7199
  • Позитив: +5266
  • Пол: Мужской
  • Последний визит:
    Сегодня 10:19:41

бродяга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

  • Автор: бродяга62
  • Заслуженный
  • бродяга62
  • Зарегистрирован: Вт, 30 Авг 2016
  • Сообщений: 75
  • Уважение: +11
  • Позитив: +12
  • Последний визит:
    Пн, 21 Авг 2017 10:35:54

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

+1

Страница: 1

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