Page 1 of 1

Tab menu in header

Posted: Mon Apr 20, 2009 1:58 pm
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.

Re: Tab menu in header

Posted: Tue May 12, 2009 8:24 pm
by njoob
Bump.

Any help, please?

Re: Tab menu in header

Posted: Tue May 12, 2009 8:33 pm
by Manhattan
njoob wrote:Bump.

Any help, please?
Try this MOD Buttons Menu

Re: Tab menu in header

Posted: Tue May 12, 2009 8:46 pm
by njoob
Thanks, I'm aware of that MOD, but I need tabs.

Re: Tab menu in header

Posted: Wed May 13, 2009 7:10 am
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

Re: Tab menu in header

Posted: Wed May 13, 2009 8:10 pm
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?

Re: Tab menu in header

Posted: Mon May 18, 2009 9:22 pm
by njoob
*Bumpy* Anybody have some ideas?

Re: Tab menu in header

Posted: Tue May 19, 2009 4:23 pm
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;
}

Re: Tab menu in header

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