Posted 2 июля, 201311 yr comment_35878 Просмотр файла ProMenu Plus 3.2.1 ProMenu Plus 3.2.1 - профессиональный компонент для создания и гибкого редактирования меню на форуме. Добавил Respected Добавлено 02.07.2013 Категория Компоненты, Приложения для IP.Board Название по-русски {value} Версия IP.Board
6 августа, 201311 yr comment_38528 Как сделать отступы где красные квадраты, как после кнопки "Главная"? Как поменять оформление выпадающего меню обведённого синим, чтобы, например, края закруглить? Как сделать чтобы длина выпадающего меню была по самой длинной строчке? Зелёным обозначил где лишнее пространство. Самое главное с первым вопросом разобраться..
6 августа, 201311 yr Author comment_38538 , У пунктов с красными квадратами у тебя прописано padding-right:15px; Нужно убрать из исходного кода в шаблонах Открыть promenu_plus.css и у #more_apps_menucontentul li>a:hover прописать: border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; Как сделать чтобы длина выпадающего меню была по самой длинной строчке? Зелёным обозначил где лишнее пространство. Попробуй задать этому боксу width: auto !important.
6 августа, 201311 yr comment_38679 Respected, в "promenu_plus.css" /** icons **/ .non_sprite { display: inline-block; } .non_sprite img { vertical-align: bottom; } /** load the sprite **/ .sprites { margin-bottom: -2px; display: inline-block; background-image: url({style_images_url}/promenu/icons/promenu_default_icons.png) !important; background-repeat: no-repeat !important; width: 14px; height: 14px; } .Arcade_icon { background-position: 0px 0px; } .Blog_icon { background-position: 0px -28px; } .Calendar_icon { background-position: 0px -56px; } .Cart_icon { background-position: 0px -84px; } .Chat_icon { background-position: 0px -112px; } .Download_icon { background-position: 0px -140px; } .Forums_icon { background-position: 0px -168px; } .Gallery_icon { background-position: 0px -196px; } .Help_icon { background-position: 0px -224px; } .Home_icon { background-position: 0px -252px; } .Info_icon { background-position: 0px -280px; } .Media_icon { background-position: 0px -308px; } .Members_icon { background-position: 0px -336px; } .More_icon { background-position: 0px -364px; } .News_icon { background-position: 0px -392px; } .Shoutbox_icon { background-position: 0px -420px; } .ipsList_vertical > li { margin: 3px 0px; } /** primary menu **/ /** Hover styling **/ #community_app_menu div li:hover > a, #community_app_menu li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul li > a:hover{ background-color: #173455; color: #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } /** active styling **/ #community_app_menu .active > a, #more_apps_menucontentul .active > a, #community_app_menu .active:hover > a { background-color: #FFF ; color: #0b5794 ; } /** no active/hover background color, for menus, blocks, mega, etc **/ #community_app_menu li > div > ul > li > a, #community_app_menu .blocks, #community_app_menu .mega, #more_apps_menucontentul li > a { background-color: #1C3B5F; } #community_app_menu li > div > ul > li > a, #community_app_menu .mega td.col > a, #community_app_menu .mega div.col > a { display: block !important; white-space: nowrap !important; color: #FFF; } #community_app_menu li > div > ul > li > a { padding: 6px 15px 8px; } #community_app_menu li, #more_apps_menucontentul li { cursor: pointer; position: relative; top: 0; } #community_app_menu .custom_icon { display: inline-block; position: relative; } #community_app_menu .custom_icon, #community_app_menu li > div > ul > li > a, #community_app_menu .mega .col { min-width: 150px; } #community_app_menu .mega { padding: 10px; } #community_app_menu .downarrow, #community_app_menu li.click.click_active > a.downarrow { background-image: url({style_images_url}/promenu/arrows/primary/down_arrow.png) !important; background-repeat: no-repeat !important; background-position: right center !important; background-origin: content-box !important; } #community_app_menu .otherarrow { background-image: url({style_images_url}/promenu/arrows/primary/other_arrow.png) !important; background-repeat: no-repeat !important; background-position: right center !important; background-origin: content-box !important; } #community_app_menu li.active > .downarrow{ background-image: url({style_images_url}/promenu/arrows/primary/down_arrow_active.png) !important; } #community_app_menu li.active > .otherarrow{ background-image: url({style_images_url}/promenu/arrows/primary/other_arrow_active.png) !important; } #community_app_menu a.mainParent { text-decoration: underline; font-weight: bold; padding: 5px 0px 5px 0px; } #community_app_menu .blocks { color:#FFF; } /***header menu****/ #header_menu { top: 0; left:0; width: 100%; position: absolute; text-align: left; font-size: 13px; } #header_app_menu > li { margin: 0px 3px 0 0; } #header_app_menu > li > a, #header_app_menu li > div > ul > li > a, #header_app_menu .mega td.col > a, #header_app_menu .mega div.col > a { color: #8A8A8A; white-space: nowrap !important; display: block !important; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); } #header_app_menu .mega { padding: 10px; } #header_app_menu > li > a, #header_app_menu li > div > ul > li > a { padding: 6px 15px 8px; } /** active styling **/ #header_app_menu .active > a, #header_app_menu .active:hover > a { background-color: #292929 ; color: #FC6D32; } /** hover styling **/ #header_app_menu li:hover > a, #header_app_menu li > ul > li > a:hover, #header_app_menu li.click_active > a { background-color: #292929; color: #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } /** standard background coloring for menus, blocks, etc **/ #header_menu, #header_app_menu li > div > ul > li > a, #header_app_menu .blocks, #header_app_menu .mega { background-color: #181818 ; } #header_app_menu li { cursor: pointer; position: relative; top: 0; } #header_app_menu .custom_icon { display: inline-block; position: relative; } #header_app_menu .custom_icon, #header_app_menu li > div > ul > li > a { min-width: 150px; } #header_app_menu .downarrow { background-image: url({style_images_url}/promenu/arrows/header/down_arrow.png) !important; background-repeat: no-repeat !important; background-position: right center !important; background-origin: content-box !important; } #header_app_menu .otherarrow { background-image: url({style_images_url}/promenu/arrows/header/other_arrow.png) !important; background-repeat: no-repeat !important; background-position: right center !important; background-origin: content-box !important; } #header_app_menu li.active > .otherarrow, #header_app_menu li:hover > a.otherarrow, #header_app_menu li.click_active .otherarrow { background-image: url({style_images_url}/promenu/arrows/header/other_arrow_active.png) !important; } #header_app_menu li.active > .downarrow, #header_app_menu li:hover .downarrow, #header_app_menu li.click_active .downarrow { background-image: url({style_images_url}/promenu/arrows/header/down_arrow_active.png) !important; } #header_app_menu .mega .col { min-width: 150px; } #header_app_menu a.mainParent { text-decoration: underline; font-weight: bold; margin-top: 5px; margin-bottom: 5px; } #header_app_menu .blocks { color:#FFF; } /***Footer menu****/ #footer_menu { text-align: left; margin-top: 20px; vertical-align: top; width: 100%; z-index: 15000; } #footer_menu .main_widths { min-width: 940px; margin-left: 10px; } #footer_menu .category { display: inline-block; vertical-align: top; margin: 10px; } #footer_menu .category > a { width: 0 !important; min-width: 100px; /* change this to adjust your category minimum width */ cursor: pointer; display: block; word-wrap: break-word; } #footer_menu .mainParent { text-decoration: underline; font-weight: bold; padding-top: 5px; padding-bottom: 5px; display: block; } #footer_menu .blocks { margin-top: 5px; word-wrap: break-word; } /***Site menu***/ #site_menu { background-color: #fff; text-align: left; vertical-align: top; width: 100%; font-size: 13px; min-height: 200px; left: 0; z-index: 15000; } #site_menu .main_widths { min-width: 980px; margin-left: 30px; margin-right: 30px; } #site_menu .category { display: inline-block; vertical-align: top; margin: 10px; } #site_menu .category > a { width: 0 !important; min-width: 100px; /* change this to adjust your category minimum width */ cursor: pointer; display: block; word-wrap: break-word; } #site_menu .mainParent { text-decoration: underline; font-weight: bold; padding-top: 5px; padding-bottom: 5px; display: block; } #site_menu .blocks { margin-top: 5px; } Нету вроде "padding-right:15px;", подскажи что убрать..
6 августа, 201311 yr Author comment_38687 , эту инструкцию нужно искать в шаблонах компонента, сказать где не могу - не установлено.
8 августа, 201311 yr comment_38867 Respected, в шаблонах компонента ничего не вижу нужного proJS <if test="$this->settings['promenu_menus_remote_jquery']"> <script> iIsHere = false; if (!window.jQuery) { document.write("<" + "script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></" + "script>"); iIsHere = true; } </script> <else /> <script> iIsHere = false; if (!window.jQuery) { document.write("<" + "script type='text/javascript' src='{parse url="js/3rd_party/jquery-1.8.3.min.js" base="public_dir"}'></" + "script>"); iIsHere = true; } </script> </if> <script> if(iIsHere){ projQ = jQuery.noConflict(); } else{ projQ = jQuery; } </script> <if test="$this->registry->profunctions->CanItouch() && !$this->settings['promenu_disable_tab_pop']"> <if test="$this->settings['promenu_jquery_ui_css']"> <link rel="stylesheet" type="text/css" href="{$this->settings['promenu_jquery_ui_css']}" /> </if> <if test="$this->settings['promenu_menus_remote_jquery']"> <script> if (!jQuery.ui) { document.write("<" + "script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></" + "script>"); } </script> <else /> <script> if (!jQuery.ui) { document.write("<" + "script type='text/javascript' src='{parse url="js/3rd_party/jquery-ui-1.9.2.custom.min.js" base="public_dir"}'></" + "script>"); } </script> </if> </if> proMain <li id="nav_app_{$data['promenu_menus_nav_app']}" class="{$data['promenu_menus_click']} <if test="$data['promenu_menus_parent_id'] || $data['promenu_menus_has_sub'] || $data['promenu_menus_block']">skip_moremenu</if>"> <a id="cpromenu_{$data['promenu_menus_id']}" class="{$data['promenu_menus_hovernoclick']} <if test="!$data['promenu_menus_icon_check']">{$data['promenu_menus_arrow']}</if> {$data['promenu_menus_attr']['class']}" style="{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} > <if test="$data['promenu_menus_icon_check']"> <span class="non_sprite"> <img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px"/> </span> <else /> <if test="$data['promenu_menus_icon']"> <span class="sprites {$data['promenu_menus_icon_class']}_icon"></span> </if> </if> <span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if> {$data['promenu_menus_arrow']}"</if> <if test="$data['promenu_menus_arrow']">style="padding-right:15px;background-origin: padding-box !important;"</if>> <if test="$data['promenu_menus_img_as_title_check']"> <img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;"/> <else /> {$data['promenu_menus_name']} </if> </span> </a> <if test="!$data['promenu_menus_is_mega']"> <if test="$data['promenu_menus_has_sub']"> <div class="boxShadow <if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display: none; position: absolute;"> <ul> <if test="$data['promenu_menus_block']"> <li class="{$data['promenu_menus_click']}" style="position:relative;"> <div class="blocks"> {$data['promenu_menus_block']} </div> </li> </if> <foreach loop="$menu[$data['promenu_menus_id']] as $k => $c"> {parse template="proMain" group="promenu_plus" params="$c, $menu, $group,0"} </foreach> </ul> </div> </if> <if test="$data['promenu_menus_block']"> <div class="boxShadow blocks <if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display: none; position: absolute;"> {$data['promenu_menus_block']} </div> </if> <else /> <if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']"> <div class="boxShadow mega<if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display:none;position:absolute;"> <table> <if test="$data['promenu_menus_block']"> <tr> <td class="blocks" colspan="{$data['promenu_menus_mega_column_count']}"> {$data['promenu_menus_block']} </td> </tr> </if> <tr> <if test="count($menu[$data['promenu_menus_id']]) && is_array($menu[$data['promenu_menus_id']])"> <foreach loop="$menu[$data['promenu_menus_id']] as $k => $c"> <php> if($i >= $data['promenu_menus_mega_column_count']) { $i = 0; } </php> {parse template="proMega" group="promenu_plus" params="$c, $menu, $group, 1, $data['promenu_menus_mega_column_count'], $i"} <php> $i++; </php> </foreach> </if> <if test="$i != $data['promenu_menus_mega_column_count']"> </tr> </if> </table> </div> </if> </if> </li> <if test="$data['promenu_menus_by_url']"> <script> projQ("#nav_app_{$data['promenu_menus_nav_app']}").ProActivationByUrl({ByUrlGroup: {$group['promenu_groups_by_url']}, ByUrlMenu: {$data['promenu_menus_by_url']} }); </script> </if> proMega <if test="$isMega"> <td class="col" class="{$data['promenu_menus_click']}" style="vertical-align:top;"> <else /> <div class="col" class="{$data['promenu_menus_click']}" style="vertical-align:top;"> </if> <a class="<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">mainParent</if> {$data['promenu_menus_attr']['class']}" style="cursor:pointer;{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} > <if test="$data['promenu_menus_icon_check']"> <div class="non_sprite"> <img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px" style="vertical-align: bottom;"/> </div> <else /> <if test="$data['promenu_menus_icon']"> <div class="sprites {$data['promenu_menus_icon_class']}_icon"></div> </if> </if> <span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if>"</if>> <if test="$data['promenu_menus_img_as_title_check']"> <img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;" /> <else /> {$data['promenu_menus_name']} </if> </span> </a> <if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']"> <if test="$data['promenu_menus_block']"> <div class="blocks"> {$data['promenu_menus_block']} </div> </if> <if test="$data['promenu_menus_has_sub']"> <foreach loop="$menu[$data['promenu_menus_id']] as $k => $c"> {parse template="proMega" group="promenu_plus" params="$c, $menu, $group"} </foreach> </if> </if> <if test="$isMega"> </td> <php> $html=''; if($i == $shift){ $html = '</tr><tr>'; $i =0; } </php> {$html} <else /> </div> </if> proOther <div <if test="!$data['promenu_menus_parent_id']">class="category"</if>> <a class="<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">mainParent</if> {$data['promenu_menus_attr']['class']}" style="{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} > <if test="$data['promenu_menus_icon_check']"> <div class="non_sprite"> <img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px"/> </div> <else /> <if test="$data['promenu_menus_icon']"> <div class="sprites {$data['promenu_menus_icon_class']}_icon"></div> </if> </if> <if test="$data['promenu_menus_img_as_title_check']"> <img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" /> <else /> {$data['promenu_menus_name']} </if> </a> <if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']"> <if test="$data['promenu_menus_block']"> <div class="blocks othersubs"> {$data['promenu_menus_block']} </div> </if> <if test="$data['promenu_menus_has_sub']"> <foreach loop="$menu[$data['promenu_menus_id']] as $k => $c"> <div class="othersubs"> {parse template="proOther" group="promenu_plus" params="$c, $menu, $group, 0"} </div> </foreach> </if> </if> </div> Кстати на стандартном стиле вообще какие-то стрелочки вниз вместо пропусков, может так проще будет сделать?
8 августа, 201311 yr comment_38998 Respected, да, я слепой Отсюда: <span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if> {$data['promenu_menus_arrow']}"</if> <if test="$data['promenu_menus_arrow']">style="padding-right:15px;background-origin: padding-box !important;"</if>> <if test="$data['promenu_menus_img_as_title_check']"> <img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;"/> <else /> {$data['promenu_menus_name']} </if> </span> Удалил padding-right:15px
9 августа, 201311 yr comment_39039 Respected, ровное меню результат Результат ДО выше на 7 сообщений, а после вот:
22 октября, 201311 yr comment_47043 Залил на хост - но в АЦ не предлагает установить преклад. Сейчас стоит ProMenu v2.1.5 Думал обновится не удаляя версию 2.1.5 это возможно ?
22 октября, 201311 yr comment_47048 не правильно ты оказался прав, видимо промахнулся с директорией заливки файлов в первый раз
22 октября, 201311 yr comment_47052 Подскажите как сменить фон выделенной вкладки. а то белый не в кассу
22 октября, 201311 yr comment_47056 в css файле компонента псевдокласс :active нашел только это /** Hover styling **/ #community_app_menu div li:hover > a, #community_app_menu li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul li > a:hover{ background-color: #173455; color: #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } /** active styling **/ #community_app_menu .active > a, #more_apps_menucontentul .active > a, #community_app_menu .active:hover > a { background-color: #FFF ; color: #0b5794 ; } /** no active/hover background color, for menus, blocks, mega, etc **/ #community_app_menu li > div > ul > li > a, #community_app_menu .blocks, #community_app_menu .mega, #more_apps_menucontentul li > a { background-color: #1C3B5F; }
22 октября, 201311 yr comment_47058 Видно же, не? background-color: #FFF ; менял на #0b5794 ни чего не изменилось
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.