How to create custom tabs for first and last tab?

  • I seem to have bitten off more than I can chew and so far I can’t find any examples of WordPress themes that do this.

    I have created a theme that has a highlighted tab when you are on an active page. Nothing special about that, there are themes like that everywhere. For example, you’re on the About page, and that tab is highlighted with a different graphic than the other tabs.

    The catch is that for this theme, I need a different tab graphic to show up on the first and last tab.

    I’m using a list, so all I really need it to do is assign a custom ID to the first and last page tab.

    Example < li id=”start” >Home< /li >

    Can anyone help?

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

  • You’ve just given an example of how to do it, so what’s the problem?

    Thread Starter ng-design

    (@ng-design)

    The problem is that I can’t find an automated way to do it.

    WordPress has the capability to auto-load the pages into individual < li > tags. (Home, About, Contact, etc…)

    And it also has the ability to assign the active < li > with its own design < li class=”active” >. But it has to use the same style across the board for every li.

    In my case, I want it to use a custom style, but only apply it to the first and last li in the sequence.

    It’s not going to work in older browsers but for newer browsers you could use first-child and last-child CSS….

    ul li.theclass:last-child {do some stuff}
    ul.li.theclass:first-child {do some stuff}

    The CSS will only be true when 2 conditions are met, firstly it must have theclass (the active tab class) and when the element is the first child or last child of the list…

    You do things as usual but add 2 extra lines, per the above example to change background image or whatever you want to do… (put your CSS stuff in place of “do some stuff”, obviously..)

    The last post, the code should be..

    ul li.theclass:last-child {do some stuff}
ul li.theclass:first-child {do some stuff}

    (incorrect extra dot in the second line)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to create custom tabs for first and last tab?’ is closed to new replies.