Изменить навигацию ipb 3.3.1 - Страница 2 - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы оформления форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 2.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

  • 2 Страниц +
  • 1
  • 2
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

Изменить навигацию ipb 3.3.1

#16 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 27 Март 2015 - 11:50

Просмотреть сообщениеОдмин 27 Март 2015 - 10:03 сказал(а):

Ребят, нет решения для 3.4? Перекопал весь основной CSS и понял куда вставлять, но что вставить для растягивания меню по всей ширине...?

Такое возможно только в table.
Т.е. пункты меню переписать не в виде списка:
<ul>
  <li>пункт меню</li>
  <li>пункт меню</li>
  <li>пункт меню</li>
</ul>

а в виде таблицы
<table>
  <tr>
    <td>пункт</td>
    <td>пункт</td>
    <td>пункт</td>
  </tr>
</table>

Или представить список в виде таблицы, используя свойства css:
display: table;
display: table-row;
display: table-cell;


А конкретно, в ipb_styles.css в конце дописать (для стандартного стиля):

/********************************************************/
/**************** nav menu like table *******************/

#primary_nav .main_width {
  display: table;
  table-layout: fixed;
}
#community_app_menu {
  display: table-row;
}
#community_app_menu>li { 
  display: table-cell;
  float: none !important;
  text-align: center;
}

Примерный результат:
Вложение  0.jpg (15,65К)
Количество загрузок: 9
И дальше работать с элементами <li> как с ячейками таблицы. В GlobalTemplate поменять их местами, чтобы изменить порядок, и т.д.

---
ПС: Если не заморачиваться с таблицей, то можно просто указать ширину <li> в процентах (но тогда должно быть строго неизменное число пунктов меню).

Сообщение изменено: Viktar83 (27 Март 2015 - 12:02)

1

#17 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 27 Март 2015 - 12:43

Viktar83, я выбрал вариант с <li>, но получилось так, что кнопки поровну разделили ширину, а надо чтобы каждая кнопка принимала ширину согласно своему содержанию, т.е. одна кнопка больше, другая меньше (судя по их содержанию), а все вместе они занимают пространство 100% ширины страницы. Как-то так можно поправить? :)
0

#18 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 27 Март 2015 - 12:53

А, понял!
table-layout: auto;

Но остался один вопрос! При таком раскладе все ячейки внешне сливаются, а надо чтобы между ними был пробел. Как это сделать через CSS?

Сообщение изменено: Одмин (27 Март 2015 - 12:54)

0

#19 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 27 Март 2015 - 13:04

Просмотреть сообщениеОдмин 27 Март 2015 - 12:53 сказал(а):

Но остался один вопрос! При таком раскладе все ячейки внешне сливаются, а надо чтобы между ними был пробел. Как это сделать через CSS?


http://htmlbook.ru/css/border-spacing
например:
#primary_nav .main_width {
  display: table;
  table-layout: auto;
  border-spacing: 5px 0;
}


Или задать <li> бордер под цвет фона :lol:

Сообщение изменено: Viktar83 (27 Март 2015 - 13:06)

1

#20 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 27 Март 2015 - 13:11

Viktar83, благодарю!

Просмотреть сообщениеViktar83 сказал(а):

Или задать <li> бордер под цвет фона :lol:

Не, лучше через css, в общем спасибо! :D
0

#21 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 06 Апрель 2015 - 21:06

Viktar83, Вы не могли бы еще подсказать по теме, каким образом можно начать еще одну полосу ниже имеющейся? То есть, я добавляю кнопки в верхнее меню, но когда кнопок становится много, они начинают сжиматься и становятся некрасивыми (внутренний текст кнопок начинает сжиматься в высоту), а надо чтобы под полосой кнопок начиналась новая полоска. Как такое можно сообразить? Тут дело такое, что надо чтобы текст в кнопках был в одну строку (и при сжатии кнопок не вылезал на вторую строчку ниже), а сами кнопки при критическом их кол-ве вылезали на строку ниже...

P.S. Напомню, мы используем <li> вместо <td> :)
0

#22 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 06 Апрель 2015 - 22:27

Просмотреть сообщениеОдмин 06 Апрель 2015 - 21:06 сказал(а):

Viktar83, Вы не могли бы еще подсказать по теме, каким образом можно начать еще одну полосу ниже имеющейся? То есть, я добавляю кнопки в верхнее меню, но когда кнопок становится много, они начинают сжиматься и становятся некрасивыми (внутренний текст кнопок начинает сжиматься в высоту), а надо чтобы под полосой кнопок начиналась новая полоска. Как такое можно сообразить? Тут дело такое, что надо чтобы текст в кнопках был в одну строку (и при сжатии кнопок не вылезал на вторую строчку ниже), а сами кнопки при критическом их кол-ве вылезали на строку ниже...

P.S. Напомню, мы используем <li> вместо <td> :)

Impossible :unsure:

Одновременно чтобы ячейки растягивались и при этом переносились на другую строку... Не знаю, не получается. Тут нужен другой подход <_<

запретить перенос слов можно:
  word-wrap: normal;
  white-space: nowrap;
  overflow-wrap: normal;

Сообщение изменено: Viktar83 (06 Апрель 2015 - 22:28)

0

#23 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 06 Апрель 2015 - 23:10

Ну если что-то интересное придумаете, сообщите, поэкспериментируем.
0

#24 Пользователь не на сайте   Одмин ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 574
  • Регистрация: 21-Апрель 13
  • Репутация: 41
  • IPB version:3.4.x
 

Отправлено 18 Апрель 2015 - 14:19

В общем, я сам все решил.

В globalTemplate в <ul class='ipsList_inline' id='community_app_menu'> после </ul> просто добавить еще один <ul class='ipsList_inline' id='community_app_menu'>. Вот и все дела))

Сообщение изменено: Одмин (18 Апрель 2015 - 14:36)

1

#25 Пользователь не на сайте   mrx69 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 03-Декабрь 15
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 04 Декабрь 2015 - 05:20

Здраствуйте! Помогите пожалуйста по навигации... я нашел где менять цвет текста кнопок навигации но не нашел...как поменять цвет самой кнопки...#community_app_menu а где там прячится цвет??? Зарание Спасибо! мой форум пока офлайн не в сети.
0

#26 Пользователь не на сайте   mrx69 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 03-Декабрь 15
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 21 Декабрь 2015 - 06:54

up
0

#27 Пользователь не на сайте   newbie ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 2 166
  • Регистрация: 26-Октябрь 11
  • Репутация: 814
  • IPB version:I have no IPB
 

Отправлено 21 Декабрь 2015 - 14:24

Просмотреть сообщениеmrx69 сказал(а):

как поменять цвет самой кнопки

#community_app_menu > li > a

Свойство background
0

Сообщить об этой теме:


  • 2 Страниц +
  • 1
  • 2
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

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

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна