Переделка стандартного меню IPS4

Posted 26 мая, 20177 yr

Итак, всем привет, боролся сам несколько дней, но полный провал. Переделываю стандартную тему IPS, вся загвоздка в меню осталась. Проблема в корректном изменение типа подменю, чтобы они выпадали, а не были ниже основного меню.

Спойлер

Это я почти добился, переделав основной код меню, убрав "лишнее" типа поиска и поставив класс dropdown или что-то в этом роде, уже не помню. Однако появилась другая проблема - меню стало странно себя вести (не отображать некоторых пунктов, которые добавлялись через меню менеджер), плюс на странице профилей и др. внутренних страницах меню преобразовывается в большую кнопку "Моre" т.е. больше - этот тот код, что прячет слишком много пунктов под неё. Проверить: http://witcher.fanpub.su/index.php?/profile/13-рогаст/ логин: тест пароль: тест

Сколько я не бился, не могу убрать этот функционал, или заставить его действовать правильно

Я также пытался брать коды с других дизайнов, например (мне нравится реализация прилипающего меню) в теме http://ipsmake.com/demos/theme.php?theme=Envision-Dark - однако у них дофига своих местных кодов, завязанных на стиле, все просто не утащишь. Либо может кто подсказать тему, где реализация подобного меню попроще и можно попроще укратсть? Прилипание я сделаю. Возможно, есть у кого-то на примете тема, где в меню сосредоточены выпадающие вниз пункты меню, личная панель пользователя + поиск (например, прячущийся за кнопкой)? Спасибо заранее за предложения, буде таковые Всем пис

Цитата

Silence
1

26 мая, 20177 yr

Author

comment_129325

p.s. похоже, создал тему не в том форуме, нужно было в http://ipbmafia.ru/forum/103-temy-i-dizayn-ips-community-suite-4/

Цитата

26 мая, 20177 yr

comment_129360

Привет ...... замени:

core > front > global > navBar все содержание с етим:

<ol id="menu">
{template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
</ol>

core > front > global > navBarltems все содержание с етим:

{{foreach $roots as $id => $item}}
	{{if $preview or $item->canView()}}
		{{$active = $item->activeOrChildActive();}}
		{{if $active}}
			{{\IPS\core\FrontNavigation::i()->activePrimaryNavBar = $item->id;}}
		{{endif}}
		<li {{if $active}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">

			{{$children = $item->children();}}
			{{if $children}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" id="elNavigation_{$id}" data-ipsMenu data-ipsMenu-appendTo='#{{if $parent}}elNavSecondary_{$parent}{{else}}elNavSecondary_{$id}{{endif}}' data-ipsMenu-activeClass='ipsNavActive_menu' data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()} <i class="fa fa-caret-down"></i>
				</a>
				<ul id="elNavigation_{$id}_menu" class="ipsMenu ipsMenu_auto ipsHide">
					{template="navBarChildren" app="core" group="global" location="front" params="$children, $preview"}
				</ul>
			{{else}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" {{if method_exists( $item, 'target' ) AND $item->target()}}target='{$item->target()}'{{endif}} data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()}
				</a>
			{{endif}}
			{{if $subBars && isset( $subBars[ $id ] ) && count( $subBars[ $id ] )}}
				<ul class='pion' data-role='secondaryNavBar'>
					{template="navBarItems" app="core" group="global" location="front" params="$subBars[ $id ], NULL, $item->id, $preview"}
					<li class='ipsHide' id='elNavigationMore_{$id}' data-role='navMore'>
						<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_{$id}' id='elNavigationMore_{$id}_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
						<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_{$id}_dropdown_menu' data-role='moreDropdown'></ul>
					</li>
				</ul>
			{{endif}}
		</li>
	{{endif}}
{{endforeach}}

в custom.css поставите ето код:

#menu {
    float: right;
    list-style-type: none;
    line-height: 1;
    position: relative;
    height: 100%;
    font-size: 14px;
    font-weight: bold;
    margin-top: 25px;
}

#menu:after {
content:'';
display:block;
clear:both;
}

#menu > li {
float:left;
padding: 0 2px;
}

#menu > li.right {
float:right;
}
    
#menu > li > a {
text-decoration: none;
    text-align: center;
    color: #fff;
    display: block;
    position: relative;
    padding: 0 25px;
    line-height: 32px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#menu > li.active > a{
    background-color: #ff7361;
    font-weight: bold;
    margin-top: 0;
}
#menu > li.active:hover > a{
   background-color: #ff7361;
}
#menu > li:hover > a {
  background-color: #ff7361;
}

@media screen and (max-width: 979px) {
 #menu {display:none; }
}

#menu > li:hover > ul.pion {
 display:block;
}
#menu > li > ul.pion {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 2000;
    width: 200px;
    background-color: #FFF;
    -moz-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

#menu > li > ul.pion > li {
position:relative;
}

#menu > li > ul.pion > li > a {
height: inherit;
    float: inherit;
    text-align: left;
    line-height: 35px;
    display: block;
    margin: 0!important;
    padding: 0 15px;
    z-index: 993;
    color: #2f3239;
    font-size: 13px;
    font-weight: normal;
}

#menu > li > ul.pion > li:hover {
background-color: #ff7361;
}

измените css background и цвет текста с вашем

Цитата

Axeland
1

26 мая, 20177 yr

Author

comment_129391

@Silence, спасибо, попробую и отпишусь. Спасибо!

Цитата

Silence
1

27 мая, 20177 yr

Author

comment_129464

@Silence Благодарю, всё получилось! Ты мой спаситель в очередной раз Еще вопросик небольшой - как сдвинуть меню, чтобы было по середине, т.е. как в стандартном меню? Спасибо заранее:)

Спойлер

Я так понимаю, там это скриптом реализовано, т.к. код добавляется прямо в тег под style=''

Цитата

Silence
1

27 мая, 20177 yr

comment_129465

Axeland, не наблюдаю данный стиль на вашем форуме

Цитата

27 мая, 20177 yr

Author

comment_129468

50 минут назад, WOLF сказал:

Axeland, не наблюдаю данный стиль на вашем форуме

Хмм, он выбран основным для всех групп, в т.ч. и для гостей. Внизу переключатель, тема "Ведьмак".

p.s. Форум witcher.fanpub.su а не http://pub.fanpub.su/ - в начале темы сказано об этом...

Цитата

27 мая, 20177 yr

comment_129469

Только что, Axeland сказал:

Хмм, он выбран основным для всех групп, в т.ч. и для гостей. Внизу переключатель, тема "Ведьмак".

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

Цитата

27 мая, 20177 yr

Author

comment_129479

Я занимаюсь несколькими проектами, ув. товарищ @WOLF, на основе своего основного, соррян, что не указываю в профиле каждый раз, когда создаю тему. В описании всё указано. Здесь и моя вина, признаю, еще раз извините) Вы написали только для того, чтобы указать на это?

Цитата

aLEX49566
1

27 мая, 20177 yr

comment_129480

1 минуту назад, Axeland сказал:

Вы написали только для того, чтобы указать на это?

нет, но теперь да.

удачи

Цитата

Donjuan
1

27 мая, 20177 yr

Author

comment_129481

1 час назад, WOLF сказал:

нет, но теперь да.

удачи

И Вам, я Вас и не ждал))

Цитата

Donjuan
1

27 мая, 20177 yr

comment_129482

6 часов назад, Axeland сказал:

@Silence Благодарю, всё получилось! Ты мой спаситель в очередной раз Еще вопросик небольшой - как сдвинуть меню, чтобы было по середине, т.е. как в стандартном меню? Спасибо заранее:)

Скрыть контент

Я так понимаю, там это скриптом реализовано, т.к. код добавляется прямо в тег под style=''

в custom.css изменит данни

#menu > li > ul.pion

Цитата

27 мая, 20177 yr

comment_129484

1 час назад, Silence сказал:
в custom.css изменит данни
#menu > li > ul.pion

@Axeland Замените на это.

#menu > li > ul.pion {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2000;
    width: 200px;
    background-color: #141516;
    -moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

Результат

Снимок экрана 2017-05-28 в 2.37.45.png

Цитата

Silence
1

24 января, 20213 yr

comment_167213

Думаю эта тема сойдёт для вопроса.

Поскольку стиль с боковой навигацией и там прописано только то что хотел автор стиля, у меня нет навигационного меню вверху форума. там только название, кликая на которое переходишь на главную.

Может кто подскажет что и где нужно прописать что бы к примеру появились кнопки "файлы" галерея" вот в этом месте:

Сам код вертикального меню выгляди так:

 <div class="forum-menu">
                     <a href="index.php?/"><ion-icon name="qr-scanner" class="usericodel"></ion-icon> Форумы </a>
                     <a href="index.php?/files"><ion-icon name="people" class="usericodel"></ion-icon> Файлы </a>
                     <a href="index.php?/leaderboard"><ion-icon name="trophy" class="usericodel"></ion-icon> Таблица лидеров </a>
                     <a href="index.php?/online"><ion-icon name="power" class="usericodel"></ion-icon> Онлайн </a>
 <a class="dropdown-btn"><ion-icon name="more" class="usericodel"></ion-icon> Больше
  </a>
  <div class="dropdown-container">
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #1 Here Link</a>
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #2 Here Link</a>
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #3 Here Link</a>
  </div>
                     <a href="index.php?/discover"><ion-icon name="pulse" class="usericodel"></ion-icon> Активность </a>
                   </div>

И как в нём видно я туда прописал файлы, заменив ссылку "администрация онлайн". Это не правильно и не удобно и не видно..... К тому же фиг его знает где и как поменять бейдж....

В общем нужно с верху как то воплотить.

Цитата

24 января, 20213 yr

comment_167214

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle.

Edited 24 января, 20213 yr by Zero108

Цитата

24 января, 20213 yr

comment_167215

4 минуты назад, Zero108 сказал:

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle

В css нашлось вот это, но с этим далеко не уедешь.

/* HEADER & MAIN NAV */
#elSiteTitle {
	color: #fff;
	font-size: 18px;
	line-height: 58px;
    margin-left:2em;
	text-decoration: none;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;

Цитата

24 января, 20213 yr

comment_167216

Не знаю, как там на 4.5 дела обстоят. Вот скрин из 4.4.10:

Цитата

Z7ian
1

24 января, 20213 yr

comment_167217

7 минут назад, Zero108 сказал:

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle

Ну вот ещё в шаблоне logo:

{{if \IPS\Theme::i()->logo['front']['url'] !== null }}
{{$logo = \IPS\File::get( 'core_Theme', \IPS\Theme::i()->logo['front']['url'] )->url;}}
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>
{{else}}
<a href='{setting="base_url"}' id='elSiteTitle' accesskey='1'>{setting="board_name"}</a>
{{endif}}

Только что, Zero108 сказал:

Не знаю, как там на 4.5 дела обстоят. Вот скрин из 4.4.10:

Да это я нашёл. Но что мне с этим делать?)))

Цитата

24 января, 20213 yr

comment_167218

Вот сюда пробуйте прописать пункты в <div></div> и красоту навести с помощью классов, добавленных в custom.css

Если для вас это сложно, то лучше найдите другой темный стиль для вашего сайта, где меню наверху.

Edited 24 января, 20213 yr by Zero108

Цитата

24 января, 20213 yr

comment_167219

9 минут назад, Zero108 сказал:

Вот сюда пробуйте прописать пункты в <div></div> и красоту навести с помощью классов, добавленных в custom.css

Если для вас это сложно, то лучше найдите другой темный стиль для вашего сайта, где меню наверху.

Нет не сложно

Сама строчка выглядит так:

<a href="ССЫЛКА НА СТРАНИЦУ" id="elSiteTitle" accesskey="2">ВАШЕ НАЗВАНИЕ</a>

Добавляем ещё по пути: шаблоны - logo

Поиск нужного усуществляем как написал выше Zero108 по слову elSiteTitle

Цитата

24 января, 20213 yr

comment_167221

Только правильным было бы указывать вместо текста код языковой строки. И заключать ссылку в <div></div>

В целом, смотрю на всё это как на лишний труд. Кому нужно верхнее меню, найдет другой тёмный стиль.

Цитата

24 января, 20213 yr

comment_167223

1 минуту назад, Zero108 сказал:

Только правильным было бы указывать вместо текста код языковой строки. И заключать ссылку в <div></div>

В целом, смотрю на всё это как на лишний труд. Кому нужно верхнее меню, найдет другой тёмный стиль.

"код языковой строки" - для меня это звучит как Китайский язык. Если знаете как это прописать правильней, то дайте тогда уж пожалуйста правильную строку целиком, а не пытайтесь меня направить в дремучий лес на поиски. 😋

P.S Мне сейчас нужен именно этот стиль. Дело не в тёмном стиле.
P.P.S и да, тут есть верхнее меню, но для этого нужно отключить боковое. А я этого не хочу.

Цитата

24 января, 20213 yr

comment_167236

Вместо текста названия пункта меню вставляете код:

<a href="ССЫЛКА НА СТРАНИЦУ" id="elSiteTitle" accesskey="2">{lang="__app_forums"}</a>

Сами коды языковых строк можно найти поиском в разделе Языки:

Цитата

Z7ian
1

Sign In

Переделка стандартного меню IPS4

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search