Дефолтный стиль изменить меню под лого IPB 3.4.6

[Myabk 0]

Приветствую участников форума, подскажите как можно сделать примерно вот такое как на прикрепленной картинке?

 

Нужно перенести меню под лого на само поле где логотип

Заранее спасибо!

[Lesovsky 175]

Открыть globalTemplate, найти:

 

		<!-- ::: BRANDING STRIP: Logo and search box ::: -->
		<div id='branding'>
			<div class='main_width'>
				<div id='logo'>
					<if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
						{parse template="overwriteHeader" group="{current_app}_global" params=""}
					<else />
						{parse template="defaultHeader" group="global" params=""}
					</if>
				</div>
				<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
					{parse template="quickSearch" group="global" params=""}
				</if>
			</div>
		</div>
		<!-- ::: APPLICATION TABS ::: -->
		<div id='primary_nav' class='clearfix'>
			<div class='main_width'>
				<ul class='ipsList_inline' id='community_app_menu'>
					<if test="showQuickNav:|:! ( ! $this->memberData['member_id'] && $this->settings['force_login'] ) && !($this->settings['board_offline'] && !$this->memberData['g_access_offline']) && $this->memberData['g_view_board']">
						<li class='right'>
							<a href="{parse url="app=core&module=global&section=navigation&inapp={parse expression="IPS_APP_COMPONENT"}" base="public"}" rel="quickNavigation" accesskey='9' id='quickNavLaunch' title='{$this->lang->words['launch_quicknav']}'><span> </span></a>
						</li>
					</if>
					<li id='nav_explore' class='right'>
						<a href='{parse url="app=core&module=search&do=viewNewContent&search_app=<if test="viewnewcontentapp:|:$this->registry->getCurrentApplication() != 'core' AND IPSLib::appIsSearchable( $this->registry->getCurrentApplication() )">{$this->registry->getCurrentApplication()}<else />forums</if>" base="public"}' accesskey='2' title='{$this->lang->words['view_new_posts']}'>{$this->lang->words['view_new_posts']}</a>
					</li>
					<if test="showhomeurl:|:$this->settings['home_url'] AND $this->settings['home_name']">
						<li id='nav_home' class='left'><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">{$this->settings['home_name']}</a></li>
					</if>
					<if test="hasCustomPrimaryNavigation:|:!empty($header_items['primary_navigation_menu'])">
						{$header_items['primary_navigation_menu']}
					<else />
						<if test="applicationsloop:|:is_array($header_items['applications']) AND count($header_items['applications'])">
							<foreach loop="applications:$header_items['applications'] as $data">
								<if test="showingapp:|:$data['app_show']">
									{parse variable="appActive" default="" oncondition="$data['app_active']" value="active"}
									<li id='nav_app_{$data['app_dir']}' class="left {parse variable="appActive"}"><a href='{parse url="{$data['app_link']}" seotitle="{$data['app_seotitle']}" template="{$data['app_template']}" base="{$data['app_base']}"}' title='{parse expression="sprintf( $this->lang->words['go_to_prefix'], IPSLib::getAppTitle($data['app_dir']) )"}'>{IPSLib::getAppTitle($data['app_dir'])}</a></li>
								</if>
							</foreach>
						</if>
					</if>
					<li id='nav_other_apps' style='display: none'>
						<a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a>
					</li>
				</ul>
			</div>
		</div>

 

Заменить на:

 

		<!-- ::: BRANDING STRIP: Logo and search box ::: -->
		<div id='branding'>
			<div class='main_width'>
				<div id='logo' class='left'>
					<if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
						{parse template="overwriteHeader" group="{current_app}_global" params=""}
					<else />
						{parse template="defaultHeader" group="global" params=""}
					</if>
				</div>

				<ul class='ipsList_inline left' id='community_app_menu'>
					<if test="showhomeurl:|:$this->settings['home_url'] AND $this->settings['home_name']">
						<li id='nav_home' class='left'><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">{$this->settings['home_name']}</a></li>
					</if>
					<if test="hasCustomPrimaryNavigation:|:!empty($header_items['primary_navigation_menu'])">
						{$header_items['primary_navigation_menu']}
					<else />
						<if test="applicationsloop:|:is_array($header_items['applications']) AND count($header_items['applications'])">
							<foreach loop="applications:$header_items['applications'] as $data">
								<if test="showingapp:|:$data['app_show']">
									{parse variable="appActive" default="" oncondition="$data['app_active']" value="active"}
									<li id='nav_app_{$data['app_dir']}' class="left {parse variable="appActive"}"><a href='{parse url="{$data['app_link']}" seotitle="{$data['app_seotitle']}" template="{$data['app_template']}" base="{$data['app_base']}"}' title='{parse expression="sprintf( $this->lang->words['go_to_prefix'], IPSLib::getAppTitle($data['app_dir']) )"}'>{IPSLib::getAppTitle($data['app_dir'])}</a></li>
								</if>
							</foreach>
						</if>
					</if>
					<li id='nav_other_apps' style='display: none'>
						<a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a>
					</li>
				</ul>

				<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
					{parse template="quickSearch" group="global" params=""}
				</if>
			</div>
		</div>

 

Открыть ipb_styles.css, найти:

 

#primary_nav {
background: #204066;
font-size: 13px;
padding: 4px 0 0 0;
}

 

Ниже добавить:

 

	#community_app_menu { margin: 18px 0px 0 0; }

[Myabk 0]

от души;-)

 

И еще вопросик если не сложно!

 

с ПОМОЩЬЮ css можно так сделать ( или что то похожее)? без всяких картинок?

Изменено 1 ноября 2014 пользователем Myabk

[Lesovsky 175]

Назначайте стили для:

#community_app_menu > li > a {

 

Вам нужно добавить скругление:

 

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

 

Нижний бордер около 3рх

 

И поиграться с тенями, вот вам генератор:

 

http://www.cssmatic.com/box-shadow

 

Т.е. вам нужно добавить 3 тени, одну внутреннюю, и две внешних, код примерно такой будет, только параметры настройте:

 

/* Внутренняя */
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
/* Внешняя наклонная черная */
-webkit-box-shadow: 4px 4px 3px 0px rgba(0,0,0,1);
-moz-box-shadow: 4px 4px 3px 0px rgba(0,0,0,1);
box-shadow: 4px 4px 3px 0px rgba(0,0,0,1);
/* Внешняя салатовая вокруг */
-webkit-box-shadow: 0px 0px 3px 0px rgba(133,250,0,1);
-moz-box-shadow: 0px 0px 3px 0px rgba(133,250,0,1);
box-shadow: 0px 0px 3px 0px rgba(133,250,0,1);

 

Потом все три нужно перечислить через запятую:

 

-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1), 4px 4px 3px 0px rgba(0,0,0,1), 0px 0px 3px 0px rgba(133,250,0,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1), 4px 4px 3px 0px rgba(0,0,0,1), 0px 0px 3px 0px rgba(133,250,0,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1), 4px 4px 3px 0px rgba(0,0,0,1), 0px 0px 3px 0px rgba(133,250,0,1);

[Myabk 0]

От души)))!