Tab menu in header

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

Tab menu in header

Post by njoob » Mon Apr 20, 2009 1:58 pm

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 » Tue May 12, 2009 8:24 pm

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 » Tue May 12, 2009 8:33 pm

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 » Tue May 12, 2009 8:46 pm

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

User avatar
DoYouSpeakWak
Registered User
Posts: 2307
Joined: Fri Jul 25, 2008 1:32 pm
Location: Island of Wak-Wak
Name: Hans Lassen
Contact:

Re: Tab menu in header

Post by DoYouSpeakWak » Wed May 13, 2009 7:10 am

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
My Validated and Released Modifications
Offering paid phpBB help and System administrator services.

njoob
Registered User
Posts: 56
Joined: Sat Aug 04, 2007 12:59 pm

Re: Tab menu in header

Post by njoob » Wed May 13, 2009 8:10 pm

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 » Mon May 18, 2009 9:22 pm

*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 » Tue May 19, 2009 4:23 pm

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 » Sat May 30, 2009 5:59 pm

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”