Дефолтный стиль изменить меню под лого IPB 3.4.6 - Дизайн и модификация Invision Power Board

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

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

Открыть 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&amp;module=global&amp;section=navigation&amp;inapp={parse expression="IPS_APP_COMPONENT"}" base="public"}" rel="quickNavigation" accesskey='9' id='quickNavLaunch' title='{$this->lang->words['launch_quicknav']}'><span>&nbsp;</span></a>
							</li>
						</if>
						<li id='nav_explore' class='right'>
							<a href='{parse url="app=core&amp;module=search&amp;do=viewNewContent&amp;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; }

от души;-)

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

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

Сообщение изменено: Myabk (01 Ноябрь 2014 - 10:32)

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

#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);

От души)))!