current page-tab different layout?

Discuss PivotX 2.0.x themes here, and view themes that are available for download.

Re: current page-tab different layout?

Postby Legolas » Tue Sep 09, 2008 4:55 pm

Of course it doesn't :oops:

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

A variable is strongly recommended :D 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.
Reality is an illusion caused by lack of alchool.
Legolas
 
Posts: 27
Joined: Mon Dec 17, 2007 11:13 am
Location: Italy

Re: current page-tab different layout?

Postby rabbeltje » Wed Sep 10, 2008 6:54 am

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 :(
Last edited by rabbeltje on Thu Mar 31, 2011 10:16 am, edited 1 time in total.
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: current page-tab different layout?

Postby rabbeltje » Wed Sep 10, 2008 7:04 am

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 :?:
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: current page-tab different layout?

Postby hansfn » Wed Sep 10, 2008 7:39 am

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.
hansfn
Developer
 
Posts: 3282
Joined: Sun Nov 25, 2007 7:48 pm
Location: Molde, Norway

Re: current page-tab different layout?

Postby rabbeltje » Wed Sep 10, 2008 8:16 am

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.
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: current page-tab different layout?

Postby Legolas » Wed Sep 10, 2008 10:14 am

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.
Reality is an illusion caused by lack of alchool.
Legolas
 
Posts: 27
Joined: Mon Dec 17, 2007 11:13 am
Location: Italy

Re: current page-tab different layout?

Postby rabbeltje » Wed Sep 10, 2008 10:21 am

i got it to work :D 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...?
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: current page-tab different layout?

Postby Legolas » Fri Sep 12, 2008 12:28 pm

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. :D

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.
Reality is an illusion caused by lack of alchool.
Legolas
 
Posts: 27
Joined: Mon Dec 17, 2007 11:13 am
Location: Italy

Re: current page-tab different layout?

Postby rabbeltje » Fri Sep 12, 2008 12:43 pm

thanks for helping me so much :D i'm going to try that as soon as i have a bit more time to look into it!
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: current page-tab different layout?

Postby Legolas » Fri Sep 12, 2008 12:53 pm

You're welcome. That's what a forum means :D
Reality is an illusion caused by lack of alchool.
Legolas
 
Posts: 27
Joined: Mon Dec 17, 2007 11:13 am
Location: Italy

Previous

Return to 2.x Themes

Who is online

Users browsing this forum: No registered users and 4 guests

cron