Zikula Community

• g.c.
  
  

  • Rank: Registered User
  • Registered: Dec 23, 2009
  • Last visit: Mar 09, 2010
  • Posts: 41

  Posted: Mar 07, 2010 - 01:49 AM

  Hello,
  
  In a theme there are some tabs. Browsing the code, it's obvious why one (active) tab has a distinct colour:
  
  Example from the theme: the tab called "Home" has the following code (this bit of code is in a file called "master.html"):
  
  

  Code

  <li id="current"><a href="<!--[pngetbaseurl]-->"><span>Home</span></a></li>

  
  
  So I guess the colour is controlled by the id="current" statement.
  
  Now a visitor clicks a different Tab, and it should become "current". It should change the state to "current" thus changing the colour of the Tab.
  
  The current state doesn't seem to change from one tab to another for me.
  How is this handled?
  
  Thanks,
  G.C.
  
  
  
  edited by: g.c., datetimebrief

  • 
  •  
• craigh
  
  

  • Rank: Developer
  • Registered: Jun 16, 2003
  • Posts: 1915

  Posted: Mar 07, 2010 - 02:15 AM

  lots of resources online for this. it isn't a zikula specific thing.
  
  http://unraveled.com/publications/css_tabs/
  
  http://css.maxdesign.com.au/listamatic/
  
  http://www.htmldog.com/articles/tabs/
  
  from the first eight listings in google search for "CSS tabs"

  • 
  •  
• Teb
  
  

  • Rank: Team Member
  • Registered: Feb 27, 2005
  • Last visit: Apr 12, 2010
  • Posts: 664

  Posted: Mar 07, 2010 - 03:02 AM

  I think g.c. asks how in zikula-templating it could be achieved to have another tab marked as highlighted.
  
  In your case, your theme probably has the id="current" hardcoded in the theme. Logically, the same tab is always shown as highlighted, no matter what page you're on. This should be converted to some clever dynamic system, where the current module name is retrieved from the system, and you can set the class="activetab" (yes, using the id="current" is just screaming for DOM-conflicts in unique id's.....) to the appropriate list item.
  
  For some inspiration on this issue, you might want to look at some themes from www.postnuke-themes.de or www.blanktheme.org. Just browse the themes, see if one of them has the solution to your problem, and kindly "learn from the expertise" ;)
  
  --
  -- Teb
  -- Dutch Zikula Community
  
  Support questions in a Personal Message will be ignored. Use the forums at all times!

  • 
  •  
• **unknown user**
  
  

  • Rank: Helper
  • Registered: Mar 16, 2002
  • Last visit: May 18, 2010
  • Posts: 985

  Posted: Mar 07, 2010 - 03:48 AM

  eg.
  

  Code

  <!--[if $module == "Pages"]--><li class="current"><!--[/if]-->

  
  to retrieve the id/pid ... use the pnvarcleanfrominput
  

  Code

  <!--[pnvarcleanfrominput name=id assign=cid]-->
  <!--[if $module == "Pages" && $cid == "4"]--><li class="current"><!--[/if]-->

  
  etc... mix and match
  
  - Igor

  • 
  •  
• g.c.
  
  

  • Rank: Registered User
  • Registered: Dec 23, 2009
  • Last visit: Mar 09, 2010
  • Posts: 41

  Posted: Mar 08, 2010 - 01:25 AM

  Thank you all,
  
  Teb was right, it was hardcoded in the theme.
  I now understand the concept is to use a conditional PHP statement (by looking at the different CSS websites and BlankTheme and Videokids' code example).
  
  
  I also tried Videokids' code example wich worked out pretty well as far as the first tab is concerned:
  
  

  Code

  <!--[if $module == "Pages"]--><li class="current"><!--[/if]-->

  
  It would highlight, but it didn't seem quite finished yet, so I added :
  
  

  Code

  <!--[if $module <> "News"]--><li><!--[/if]-->

  
  
  So now the first Tab works, it highlights when the News module is detected.
  
  The next tab however, will not highlight. Using videokids' code example:
  

  Code

  <!--[if $module == "Content"]--><li id="current"><!--[/if]--><!--[if $module <> "Content"]--><li><!--[/if]-->

  
  
  What happens is, that when the page is visited, the Tab doesn't highlight.
  
  If I use:
  
  

  Code

  <!--[pnvarcleanfrominput name=id assign=pid]-->
  <!--[if $module == "Content" && $pid == "2"]--><li class="current"><!--[/if]--><!--[if $module <> "Content" or cid <> "2"]--><li><!--[/if]--><a href="module-Content-view-pid-3.htm"><span>^{voor de} Ouders<!--$module--></span></a></li>

  
  
  The second Tab doesn't highlight...
  
  Apprarently when the adress bar has
  

  Code

  http://www.pleiaden.nl/index.php?module=Content&func=view&pid=2

  
  
  The condition $module="Content" is not met?
  Neither the condition $pid="2" is met....
  
  Is pnvarcleanfrominput not working as it should?
  (running Zikula 1.22)
  
  I appreciate your help,
  
  G.C.
  
  
  
  edited by: g.c., datetimebrief

  • 
  •  
• **unknown user**
  
  

  • Rank: Helper
  • Registered: Mar 16, 2002
  • Last visit: May 18, 2010
  • Posts: 985

  Posted: Mar 08, 2010 - 12:07 PM

  Let's take your case
  http://www.pleiaden.nl/index.php?module=Content&func=view&pid=2
  So we need the module [in this case Content] and the id [in your case actually pid]
  

  Code

  <!--[pnvarcleanfrominput name=pid assign=pid]-->
  <ul>
  <li <!--[if $module == "Content" && $pid == "2"]--> class="current"><!--[/if]-->>Voor de leerling</li>
  <li <!--[if $module == "Content" && $pid == "3"]--> class="current"><!--[/if]-->>Voor de ouders</li>
  <li <!--[if $module == "Content" && $pid == "4"]--> class="current"><!--[/if]-->>Voor het team</li>
  </ul>

  
  That should do it.... I use it all the time..... with success
  
  

  Dutch

  Veel succes met de site voor jouw basisschool

  
  
  - Igor

  • 
  •  
• g.c.
  
  

  • Rank: Registered User
  • Registered: Dec 23, 2009
  • Last visit: Mar 09, 2010
  • Posts: 41

  Posted: Mar 09, 2010 - 09:14 AM

  Hello,
  
  Thanks Videokid, your code got me on the right track! The code did produce a minor glitch in the page source (

  Code

  <li

  without closing

  Code

  >

  ), so I ended up using this (maybe someone here will need it for reference):
  
  

  Code

  <li<!--[if $module == "News"]--> id="current"<!--[/if]-->><a href="<!--[pngetbaseurl]-->"><span>Home</span></a></li>

  
  
  When my tabs still didn't highlight I realised the code wasn't the culprit, it was something else. I needed to output the actual value of

  Code

  $module

  to my webpage, so I put this code in:
  

  Code

  <!--[$module]-->

  , to have the value rendered in the webpage and sure enough there was the culprit.... the condition still wasn't met because.... the value of

  Code

  $module

  was "content" not "Content"....I wouldn't have guessed...
  
  So thanks again, I really learned from you all, and it's working now!
  
  
  
  edited by: g.c., datetimebrief

  • 
  •  
•  
•  

Users on-line

• Guite,
• craigh,
• mdee

This list is based on users active over the last 60 minutes.