current page-tab different layout?

[Legolas]

Of course it doesn't

Today it's a strange day, i loose myself in a glass of water (yes, water, despite my sign below ).

A variable is strongly recommended But i forgot to tell you, sorry.

So:

Code: Select all

<table id="pg">
            [[ pagelist
            chapterbegin="<tr>"
            pages="<td class="paging"><a href='%link%' title='%subtitle%' [b]%active%[/b]>%title%</a></td><td class="pg-r"></td>"
            chapterend="</tr>"
            onlychapter="name"  (If you have more chapters but want to display only one)
            isactive="class='activepage' " (this is the goal)
            ]]   
         </table>

Or, for example, it could be a thing like this (i don't know how your tabs work):

Code: Select all

<table id="pg">
            [[ pagelist
            chapterbegin="<tr>"
            pages="<td class="paging"><a href='%link%' title='%subtitle%'>%title%</a></td><td class="[b]%active%[/b]"></td>"
            chapterend="</tr>"
            onlychapter="name"  (If you have more chapters but want to display only one)
            isactive="class='[b]pg-r[/b]' " (this is the goal)
            ]]   
         </table>

It depends by what html and css elements are used to set the current status

I try on the site i'm realizing, and it works good.

[rabbeltje]

Code: Select all

<table id="menu">
            [[ pagelist
            chapterbegin="<tr>"
            pages="<td class="la"></td><td class="ma"><a href='%link%' title='%subtitle%' [b]%active%[/b]>%title%</a></td><td class="ra"></td>"
            chapterend="</tr>"
            isactive="class='activep' " (this is the goal)
            ]]   
         </table>

this is the code i used. this is the css-part i am using:

Code: Select all

table#menu {
   border-collapse: collapse;
   font: 16px "century gothic";
   clear: both;
   height: 30px;
   margin: 0px;
   position: absolute;
   top: 150px;
   right: 20px;
                border: 0;
   padding: 8px;
   }

.activep {
   color: blue;
   text-decoration: none;
   }

td.la {
   background: #7f7f11 url(images/la.gif) right no-repeat;
   width: 15px;
   }

td.ma {
   background: #e5e5cc;
   }

td.ma a {
   color: #7f007f;
   text-decoration: none;
   }

td.ra {
   background: #7f7f11 url(images/ra.gif) left no-repeat;
   width: 15px;
   }



so basically, if the page is active, that tab should have a blue link (i just chose blue to have a color that stands out, need to change that as soon as i get it to work). but... it doesn't work

i can't seem to think of what i am doing wrong

[rabbeltje]

now for the weird part: this the sourcecode of the html-output:

Code: Select all

<TABLE id=menu>
  <TBODY>
  <TR>
    <TD class=la></TD>
    <TD class=ma><A title=""
      href="http://www.rabbeltje.nl/?p=autumn">autumn</A></TD>
    <TD class=ra></TD>
    <TD class=la></TD>
    <TD class=ma><A title=""
      href="http://www.rabbeltje.nl/?p=winter">winter</A></TD>
    <TD class=ra></TD>
    <TD class=la></TD>
    <TD class=ma><A title=""
href="http://www.rabbeltje.nl/?p=arya">arya</A></TD>
    <TD class=ra></TD>
    <TD class=la></TD>
    <TD class=ma><A class=activep title=""
      href="http://www.rabbeltje.nl/?p=about">about</A></TD>
    <TD class=ra></TD></TR></TBODY></TABLE>

so you can see that it DOES see the page as the active page... it just doesn't take the css-line

[hansfn]

You really should start using a tool like Firebug so you see what CSS rules apply. In this case the td.ma a (and simialr) is more specific than a.activep. I guess the simple solution is use id in stead of class for the active tab.

[rabbeltje]

i did try that, but it got me really confused! the css-file it showed me had totally different styling than what i wrote myself. maybe it has something to do with the difference between firefox and internet explorer?

anyway, i'll re-install it, because it does show which css-rule goes for that element, right? even though the layuot described might be different than what i wrote, i'll still know what element to change.

[Legolas]

Hi, try this way:

Code: Select all

td.ma a.activep {
   color: blue;
   text-decoration: none;
   }

And

Code: Select all

 pages="<td class="la"></td><td class="ma"><a href='%link%' title='%subtitle%' %active%>%title%</a></td><td class="ra"></td>"
            chapterend="</tr>"
            isactive="class='activep' "

I've seen %active% between BBCode bold tags... I think you removed this tags when you have written the code the template, but if not, this is a mistake 'cause, as i realize now, BBCode simply doesn't allow to write tags like those inside the Code tags.

[rabbeltje]

i got it to work i'm still thinking if it will be the way to go for me... the problem is basically that to get the layout i have by using the html and css, i would need, when using pivot, at least 2 cells that get an 'active'-state and i don't think THAT is possible, is it...?

[Legolas]

It's possible instead

Simply change your approach.

That's what i mean:

the css

Code: Select all

a {
   font-family:Verdana;
   font-size:12px;
} 
div.link {
  float:left;
  display:block;
  width:444px;
  height:45px;
}
div.link a:link, div.link a:visited {
  float:left;
  text-decoration:none;
  background:rgb(204,0,0) url(sample/right.gif) no-repeat right top;
  color:#fff;
  width:auto;
  height:25px;
  text-align:center;
  margin:0;
  padding:0 15px 0 0;
  border:none;
}
div.link a:hover, div.link a:active {
  float:left;
  text-decoration:none;
  background:rgb(255,0,0) url(sample/right_over.gif) no-repeat right top;
  color:#fff;
  width:auto;
  height:25px;
  text-align:center;
  padding:0 15px 0 0;
  margin:0;
  border:none;
}
div.link a:link span, div.link a:visited span {
  display:table;
  float:left;
  text-decoration:none;
  background:rgb(255,255,255) url(sample/left.gif) no-repeat left top;
  width:15px;
  height:25px;
  line-height:25px;
  margin:0;
  padding:0;
  border:none;
} 

div.link a:hover span, div.link a:active span {
  display:table;
  float:left;
  text-decoration:none;
  background:rgb(255,255,255) url(sample/left_over.gif) no-repeat left top;
  width:15px;
  height:25px;
  line-height:25px;
  margin:0;
  padding:0;
  border:none;
} 
/* Current link */

div.link a.current:link, div.link a.current:visited{
  float:left;
  text-decoration:none;
  background:rgb(106,181,255) url(sample/right_current.gif) no-repeat right top;
  color:#fff;
  width:auto;
  height:25px;
  text-align:center;
  margin:0;
  padding:0 15px 0 0;
  border:none;
}

div.link a.current:link span, div.link a.current:visited span {
  display:table;
  float:left;
  text-decoration:none;
  background:rgb(106,181,255) url(sample/left_current.gif) no-repeat left top;
  width:15px;
  height:25px;
  line-height:25px;
  margin:0;
  padding:0;
  border:none;
} 


The html:

Code: Select all


      [[ pagelist chapterbegin="<div class='link'>"

            pages="<a href='%link%' title='%subtitle%' %active%><span></span>%title%</a>"
            chapterend="</div>"
            onlychapter="Appunti"
            isactive="class='current'"
         ]]
     



And a sample (http://www.bountydesigner.com/sample.htm) that works on IE and Firefox. I didnt try it, but i think it works even using tables.

Basically, using css you can apply the same rules to two or more elements. In this way you don't need two cells with a current status, but you define this look for two cells.

[rabbeltje]

thanks for helping me so much i'm going to try that as soon as i have a bit more time to look into it!

[Legolas]

You're welcome. That's what a forum means