Features / Usability

Features / Usability

Navigation bar using Custom Site Header

posts: 54 Germany


I've running TikiWiki 2.1 with default2.css as theme and I'm trying to create a navigation bar similar to the pages of Tikiwiki Documentation, but instead of using the Top Bar, the navigation buttons should be (for reasons of space economising) on the same level as my site-logo.

I imagine a configuration like this :

  • first button is linking to artikels (tiki-view_articles.php)
  • second button linking to wiki (tiki-view.php)
  • and so on for the different sections / features acitvated.

Clicking on a navigation-button should then let appear a different collection of user menus - all included in separate modules and maybe with group-associated permissions for special registered-only modules.

For the navigation-buttons I thought (perhaps there is a better solution ?) to create a little menu for each one,

like this :

  • Menu id=70
  • Name : Articles
  • url : tiki-view_articles.php
  • Sections : feature_articles
  • Permission : tiki_p_read_article
  • Group : Anonymous
  • Type : Option

and then integrating the menus one after another - at best menus floating right while my site-logo is shown centered - in the custom site header.

I tried several codes (html tables or span's centered for the logo and floating right for the buttons) including the menus with {phplayers id=X}, but I failed since yet.

Any suggestions, how to implement my ideas ?

Thanks in advance for help !


posts: 289 United States

It can be done, I use a custom header with a logo and a phplayers menu. Make sure the PHPLayers feature is turned on (which I think it is by default).

~60~DIV class="custom_hdr">
  ~60~A href="http://www.mywebsite.com">~60~IMG src="img/wiki_up/logo.gif" class="custom_hdr_img" alt="My Logo" title="Welcome to my website">~60~/A>
{if $user neq ''}
  ~60~DIV style="margin-left: 200px">
    {phplayers id=45 type=horiz}

The margin-left: 200px is there simply because my menu appears to the right of my logo which is approximately 200 pixels wide. The if $user neq is optional. That simply means that the menu will only display if a username is set i.e. the person is logged in, so anonymous users don't get to see the menu. Finally, I created a custom CSS class custom_hdr, so that I could control more precisely aspects of the custom header, but again I don't think this is necessary. That custom CSS class sits in the CSS file for the theme I'm using.

posts: 54 Germany

Hello Darren,

thanks a lot for your answer smile!

May I add your code as an example on the Site Identity page, certainly calling you as author and linking to this thread ? I think, it would be the right place to save this good information ...

Best greetings, Rontu

posts: 289 United States

If you think it helps, go ahead by all means. I have no problem sharing it with everybody. I know that Tiki developers are more than happy to have as many people contribute as possible. I'm not sure that it is the best example, but it is what I did and it works.

I assume it worked for you then?

posts: 54 Germany

For me it's generally and regarding your answer, too very helpful to see / read examples for solutions which are running in praxis. First of all I know, that I did something else wrong, if it's not working on my site wink. And then I have the chance to either modify them or get inspiration for new configuration of my own site. Maybe it helps others in the same way, that's why I thought about "saving" it in the documentation.

Your code gives me an idea, how I can combine this smarty and html tags. It's running on my TikiWiki (modified with my menu and logo), but I still have the problem of linebreaking between logo and menu, even if I cancel the internal div tag and write it all in one line. Because of this problem I tried yesterday to create a table ... rolleyes.

The only solution I found now to integrate the image and menu buttons in the same line I tried to describe in Top Bar - instead of the custom header using the top bar again and putting all "items" (logo and links) in one menu.

posts: 289 United States

You have to use CSS to "float" the logo, which I think is one of the reasons why I created a custom CSS class. (I don't remember without looking). You can just include the CSS in the customer header code if you want it all in one place.

~60~IMG src="img/path/logo.gif" style="float: left;">

As for seeing examples, I agree 100%. Often it's easier to see a working example and modify it as you need to. Please feel free to update the documentation.

posts: 54 Germany

Great, now it's all in the same line biggrin.

Writing only the float style for the image in the custom header code it works fine, for more styling like margin or padding the separate CSS file seems to be needed like you described.

Thanks a lot for your support exclaim

p.s. I'll try to integrate the example in the documentation.

posts: 54 Germany

Once again redface

I cancled the html tags, didn't know, how to insert the code like Darkbee above. I tried to use the CODE-Quicktag

This code works fine, the menu appears right next to the image :

DIV align="left" style="background-color: #B5A58C"
  IMG src="img/Logo.png" style="float: left"
    {phplayers id=43 type=horiz}

But trying to let a menu been followed by an image, there is the linebreak again (between menu id=44 and the image). Even giving a margin big enough to let space for the menu (in the example I used for testing only one option).

DIV align="left" style="background-color: #B5A58C"
  {phplayers id=44 type=horiz}IMG src="img/Logo.png" style="float: left; margin-left: 250px"
  DIV align="right">{phplayers id=43 type=horiz}/DIV

Also trying to let one menu follow the other, I'm failing again.

DIV align="left" style="background-color: #B5A58C"
  {phplayers id=44 type=horiz}
  DIV style="margin-left: 250px">
    {phplayers id=43 type=horiz}

I think there surely would be a solution, to align an image after the menu ... I feel a bit puzzled again.

By the way another question :

Driving over one in the menu defined option, a text-link, which e.g. is linking to my wiki homepage, there appears a little grey square below the linking text, that I would like to deactivate.

Any ideas, how to do this ?

I created a CSS class with explicit description for elements of this class for example to define a color change for mouseover like I used on my other site, like this :

DIV#Menu a:hover, #Menu a:active, #Menu a:focus
    background-color: #CCC7FF;
    text-decoration: none;

The CSS class was detected correctly how I could notice using the background-color defintion for the whole DIV ... but nothing changed the square-appearance.

I hope I'll soon finished with the header rolleyes

posts: 54 Germany

For those of you, who perhaps have similar questions I want to add the following information:

  • Cause now I'm struggling with the broken theme in my forum (using default2) I read trough different pages with theme descriptions and found somewhere - sorry, I don't remember the exact page, where I found it redface - mentioned, that actually (in the 2.1 version) it's "only" possible to use one menu in the custom code of the site header or the top bar. This should explain, why my experiments listet above weren't successfully mrgreen.

  • And second: The good tip from Darkbee, to float the image and let a menu follow, seems to work pretty well in some, but not with all themes - maybe not the older ones, but I don't dare to make a definitively statement about it here wink.

So thanks again for your help, Darkbee!

posts: 9

I'm trying to find a way to "reset" my site header.

I tried adding a search module to the same field as the logo and now my site is broken — I can't access ANY pages. (tryingnottopanic!)

Is there a way to just remove the offending header entirely (through the back end) and then reinstate it from the admin Look & Feel section?

posts: 9

If it helps, I added the code for the search module to the "Custom HTML content" box on the Look & Feel page and that's when everything broke.

I wish I could just find how to go into this box from the back end and just remove the line of code for the module... I just don't know where to go.

I've already tried deleting the offending module (as per instructions here) but that didn't work. Still nothing loading, no error messages, anything.

Thanks in advance for your help.

posts: 9

I tried following the instructions here, but I don't see any offending code to remove:

{if $tiki_p_admin == "y"}
{tr}Quick Admin{/tr}:
{if $prefs.lang_use_db eq "y"}Edit{/if}


Where the heck did I paste in that Search Module code?!

posts: 9

Ok. I followed these instructions and it worked. PHEW.

I am truly very sorry for the multiple postings.

"If you do not care about clearing and resetting that textarea completely, you can just use the following trick. In your browser's address bar instead of the tiki-admin.php?page=look put this there:
Then hit Enter key on your keyboard and your Tiki should be back!"