Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

background Меню

Опубликовано:

Ув. пользователи форума ipbskins

Сегодня установил форум и решил сделать модификацию в стандартном шаблоне.

 

Но не могу убрать по бокам вот это

post-57823-0-38232600-1425240629_thumb.png

 

Подскажите пожалуйста каким кодом это можно изменить

Рекомендованные сообщения

Опубликовано:

Потому что слой #primary_nav растянут на всю ширину окна.

 

Попробуйте так:

 

В ipb_styles.css найдите строки:

/* LAYOUT */
#content, .main_width {
margin: 0 auto;
/* Uncomment for fixed */
/*width: 980px;*/
/* Fluid */
width: 87% !important;
  	min-width: 960px;
}

#branding, #header_bar, #primary_nav { min-width: 980px; }
/*#header_bar .main_width, #branding .main_width, #primary_nav .main_width { padding: 0 10px; }*/

 

ниже допишите:

 

/* новая ширина навигационного меню */
#primary_nav {
margin: 0 auto;
width: 87% !important;
  	min-width: 960px;
padding: 4px 10px 0px 10px !important;
border-radius: 5px 5px 0 0; /* верхние уголки закругляем :) */
}
#primary_nav .main_width { width: 100% !important; }

 

Вот эту строчку можно не писать, а можно и оставить, если хотите закругленные уголки (размер их можно поставить свой)

border-radius: 5px 5px 0 0; /* верхние уголки закругляем :) */

 

Вот результат:

post-57438-0-47644500-1425246016_thumb.jpg

 

Конечно, это вариант "в лоб". Можно и по-другому и более изящно, можно было бы в GlobalTemplate изменить порядок и вложенность слоев, можно было сделать прозрачным фон но задать фон вложенному <ul> и т.д. Но в принципе, просто и работает - у меня на чистом стиле, а Вы смотрите, как у Вас будет (просто не знаю, какие изменения Вы уже внесли, но судя по скриншоту, все должно получиться)

Изменено пользователем Viktar83

Опубликовано:
  • Автор

Спасибо.

Только вот что то с ссылками не то

Отступ.

post-57823-0-42609300-1425283621_thumb.png

Опубликовано:

Спасибо.

Только вот что то с ссылками не то

Отступ.

post-57823-0-42609300-1425283621_thumb.png

Хм, а вот эту строку дописали?

#primary_nav .main_width { width: 100% !important; }

Т.е. в слое #primary_nav присутствует вложенный .main_width и именно ему вот этой строкой мы задаем ширину 100% от #primary_nav. А иначе будет такая картинка как у Вас на скриншоте, так как у .main_width изначально прописана ширина 87% - отсюда и отступы. Поэтому именно для того единственного слоя .main_width (только того, который внутри #primary_nav) надо изменить ширину.

 

И вставляли ПОД тем, что я указал выше?

 

А вообще, конечно, не видя своими глазами и не имея возможности посмотреть код и какие изменения внесены, мало что можно сказать.

Как вариант, если не получиться и если делаете не на хостинге, а на локальном сервере - можете сбросить код Globaltemplate и ipbstyles.css, посмотрим...

Опубликовано:
  • Автор

Сайт на VPS

Ссылка на сайт у меня в профиле

Опубликовано:
  • Автор

Я что то туплю

Опубликовано:

Я не администратор/модератор и не могу видеть ссылку. Можете в ЛС.

Опубликовано:
  • Автор

Кинул

Опубликовано:

Похоже так и есть

 

Вот обратите внимание на ширину #primary_nav (1 скрин) и .main_width (2 скрин, там справа еще видно, что свойство width осталось без изменения)

post-57438-0-23469400-1425286473_thumb.jpg post-57438-0-19422900-1425286478_thumb.jpg

 

 

Вы вписали:

#primary_nav {
   margin: 0 auto;
   width: 87% !important;
   min-width: 960px;
   padding: 4px 10px 0px 10px !important;
   border-radius: 5px 5px 0 0; /* верхние уголки закругляем :) */
}

А под этим еще надо:

#primary_nav .main_width { width: 100% !important; }

Смотрите второе сообщение.

Опубликовано:
  • Автор

А все понял))

Спасибо большое.

Опубликовано:

Нет проблем.

Но у Вас еще одна неувязка наблюдается: если изменить окно браузера на минимум (т.е. возьмите и поизменяйте размер окна), то в положении, когда сайт имеет минимальную ширину, строка поиска съезжает вниз, так как ей не хватает места из-за широкого логотипа.

post-57438-0-95236500-1425288079_thumb.jpg

Изменено пользователем Viktar83

Опубликовано:
  • Автор

ну с этим я сам разберусь

Опубликовано:

Ок.

 

Но не удержусь и предложу :) :

 

1) Самое простое - уменьшить размер картинки физически

2) или прописать картинке определенную ширину (680px)

post-57438-0-72344700-1425288945_thumb.jpg

Опубликовано:

3) заморочиться и по-другому спозиционировать окно поиска (через position:absolute например)

post-57438-0-63511800-1425289193_thumb.jpg

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.