Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: How do you make the current page "active" on the category listing?  (Read 2394 times)

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52

Hello,

     I have an engine/style related issue.  The category links are displayed as a <li> in a <ul> list.  I have a style definition that includes a <li class="active"> for the current page.  I think that this might be a mod, and if it is a mod, could somebody direct me to it?

Thanks,
Zack
« Last Edit: October 21, 2007, 09:08:28 pm by Buhmanator »
Logged

Joost

  • Guest
Re: How do you make the current page "active" on the category listing?
« Reply #1 on: October 21, 2007, 08:46:58 pm »

In sNews "current" is used instead of "active". So change .active to .current in the css code. It is easier to port a template to sNews, than porting sNews to a template.

Tip: An easy way to find out which classes, ids and elements are produced by sNews, look at the (xhtml) source-code of a page generated by sNews and compare it with the (minimal) template. As you can see, in most cases ul is/should be hardcoded in the index.php.
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you make the current page "active" on the category listing?
« Reply #2 on: October 21, 2007, 09:21:55 pm »

Hello,

     Sorry, Joost, that didn't work.  Here is my code for the menu:

Code: [Select]
<div id="menu">
<ul>
<?php categories(); ?>
</ul>
</div>

     Here is the css:

Code: [Select]
#menu {
width: 700px;
height: 27px;
margin: 0 auto;
}

#menu ul {
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 25px;
margin: 0 5px 0 0;
padding: 2px 25px 0 25px;
background: url(images/img03.gif) repeat-x;
border: 1px solid #222222;
text-align: center;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
background-image: url(images/img04.gif);
text-decoration: none;
}

#menu .current a {
background-image: url(images/img05.gif);
}
Logged

Joost

  • Guest
Re: How do you make the current page "active" on the category listing?
« Reply #3 on: October 21, 2007, 10:10:32 pm »

I see, I should have rad your post more carefully.
Not li is the class 'current'. That would show <li class="current"><a></a></li>

We need: 'a' is class 'current'. This is shown in the output: <li><a class="current"></a></li>
This might be sufficient:

menu a.current

or without naming 'a':

menu .current

Possibly some (hopefully minor) problems will show when displaying. Then you will have to tweak css.
« Last Edit: October 21, 2007, 10:12:45 pm by Joost »
Logged

jlhaslip

  • Sr. Member
  • ****
  • Karma: 16
  • Posts: 374
    • My snews with AEF Forum site
Re: How do you make the current page "active" on the category listing?
« Reply #4 on: October 22, 2007, 07:16:59 am »

Code: [Select]
#menu li a.current, #menu li a:hover.current,
#sidebar ul li a.current, #sidebar ul li a:hover.current {
font-weight:700;
background-color: #438eb8;
color: #c6c6c6;
}

This is what I used . 

http://jlhaslip.com/snews/snewsmu/

The left hand Category listing is in a div #sidebar, the horizontal menu is #menu.
As noted above, the class=current is added inside the sNews function that writes the li elements and the id is from your template.
« Last Edit: October 22, 2007, 08:10:01 am by jlhaslip »
Logged
Yes! I have no siggy.

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you make the current page "active" on the category listing?
« Reply #5 on: October 23, 2007, 12:55:03 am »

Hello,

     Hey thanks.  I found the answer in an sNews_ME template originally and your solution looks the same.

Wow, I ask a lot of questions (and I'm learning fast too),
Zack
Logged