Tab menu in header

[njoob]

Hello. Can somebody help me visually integrate tabbed menu like the one on this theme (top menu) into prosliver's header? I've tried easy menu for phpbb3 but it's not even close, I need something like this. Please tell me what I need to do.

Thank you.

[njoob]

Bump.

Any help, please?

[Manhattan]

Bump.

Any help, please?

Try this MOD Buttons Menu

[njoob]

Thanks, I'm aware of that MOD, but I need tabs.

[DoYouSpeakWak]

No problem

Go to overall_header.html in your prosilver theme and do the following.

find

Code: Select all

<div class="navbar">

Add-before on new line

Code: Select all

        <div id="tabs" style="margin-top: 0px;">
           <ul>
                <li<!-- IF SCRIPT_NAME eq 'portal' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'index' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}" title="{L_INDEX}"><span>{L_INDEX}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'portal_recent_topics' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL_RECENT_TOPICS}" title="{L_RECENT_TOPICS}"><span>{L_RECENT_TOPICS}</span></a></li>
                <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
                <li<!-- IF SCRIPT_NAME eq 'faq' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
				<li<!-- IF SCRIPT_NAME eq 'tracker' --> class="activetab"<!-- ENDIF -->><a href="{U_TRACKER}" title="{L_TRACKER}"><span>{L_TRACKER}</span></a></li>
           </ul>
        </div>

I just took the above code from my portal site. Just change what you need in the code. It should work. Simple fix.

DYSW

[njoob]

Yea thanks, but the problem is that this uses the same class as phpbb's tabs meaning if I edit them I will overwrite phpbb's default settings like user or mod cp nav etc.

I need something that I can edit and not overwrite default settings at the same time.

Can I, lets say, put css based tab menu in style sheets or something like that?

[njoob]

*Bumpy* Anybody have some ideas?

[prototech]

Simply change:

Code: Select all

<div id="tabs" style="margin-top: 0px;">

To:

Code: Select all

<div id="main-tabs" style="margin-top: 0px;">

Add to cp.css:

Code: Select all

#main-tabs {
	line-height: normal;
	margin: 20px 0 -1px 7px;
	min-width: 570px;
}

#main-tabs ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#main-tabs li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}

#main-tabs a {
	float: left;
	background: none no-repeat 0% -35px;
	margin: 0 1px 0 0;
	padding: 0 0 0 5px;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

#main-tabs a span {
	float: left;
	display: block;
	background: none no-repeat 100% -35px;
	padding: 6px 10px 6px 5px;
	color: #828282;
	white-space: nowrap;
}

#main-tabs a:hover span {
	color: #bcbcbc;
}

#main-tabs .activetab a {
	background-position: 0 0;
	border-bottom: 1px solid #ebebeb;
}

#main-tabs .activetab a span {
	background-position: 100% 0;
	padding-bottom: 7px;
	color: #333333;
}

#main-tabs a:hover {
	background-position: 0 -70px;
}

#main-tabs a:hover span {
	background-position:100% -70px;
}

#main-tabs .activetab a:hover {
	background-position: 0 0;
}

#main-tabs .activetab a:hover span {
	color: #000000;
	background-position: 100% 0;
}

Add to colours.css:

Code: Select all

#main-tabs a {
	background-image: url("{T_THEME_PATH}/images/bg_tabs1.gif");
}

#main-tabs a span {
	background-image: url("{T_THEME_PATH}/images/bg_tabs2.gif");
	color: #536482;
}

#main-tabs a:hover span {
	color: #BC2A4D;
}

#main-tabs .activetab a {
	border-bottom-color: #CADCEB;
}

#main-tabs .activetab a span {
	color: #333333;
}

#main-tabs .activetab a:hover span {
	color: #000000;
}

[RahaFoorum]

Anyone know how I could make the tabs highlight depending on what mode the script is in? For example if I check regular feedback, then it's:

Code: Select all

		<li<!-- IF SCRIPT_NAME eq 'feedback' --> class="activetab"<!-- ENDIF -->><a href="{U_FEEDBACK}" title="{L_FB_FEEDBACK_EXPLAIN}"><span>{L_FB_FEEDBACK}</span></a></li>

But what can I use to make another tab highlight if it's myfeedback, not feedback? They're both leading to the same file feedback.php, but in the latter case it's feedback.php?mode=myfeedback.
Is there a way to make the highlight depending on what mode the script is using?

I tried this one, but probably because they both are in the same file, it doesn't make any difference:

Code: Select all

		<li<!-- IF MY_FEEDBACK --> class="activetab"<!-- ENDIF -->><a href="{U_FEEDBACK}" title="{L_FB_FEEDBACK_EXPLAIN}"><span>{L_FB_FEEDBACK}</span></a></li>
			<li<!-- IF U_MY_FEEDBACK --> class="activetab"<!-- ENDIF -->><a href="{U_MY_FEEDBACK}"><span>{MY_FEEDBACK}</span></a></li>

Also, same thing with different tabs in ucp so that when I check PM tab in UCP, I only have the PM tab in my header highlighted (same way as the tabs work inside ucp itself).