Tab menu in header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
njoob
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Tab menu in header

Post by 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
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Re: Tab menu in header

Post by njoob »

Bump.

Any help, please?
User avatar
Manhattan
Registered User
Posts: 211
Joined: Fri Nov 28, 2008 7:55 pm

Re: Tab menu in header

Post by Manhattan »

njoob wrote:Bump.

Any help, please?
Try this MOD Buttons Menu
njoob
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Re: Tab menu in header

Post by njoob »

Thanks, I'm aware of that MOD, but I need tabs.
User avatar
DoYouSpeakWak
Registered User
Posts: 2311
Joined: Fri Jul 25, 2008 1:32 pm
Location: Island of Wak-Wak
Contact:

Re: Tab menu in header

Post by 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
Whatever you share comes back. Support the phpBB Communities
Offering paid services. 15+ years of experience with phpBB3 and server management.
njoob
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Re: Tab menu in header

Post by 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
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Re: Tab menu in header

Post by njoob »

*Bumpy* Anybody have some ideas?
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: Tab menu in header

Post by 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;
}
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
RahaFoorum
Registered User
Posts: 17
Joined: Tue May 19, 2009 6:23 pm

Re: Tab menu in header

Post by 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).
Locked

Return to “[3.0.x] Styles Support & Discussion”