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 to add a " | " in between a horizonal category listing?  (Read 2432 times)

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
How to add a " | " in between a horizonal category listing?
« on: October 17, 2007, 01:53:23 am »

Hello,

     In my new style, I now list the categories horizontally.  I would like to list them with a " | " in between each one.  Its probably really easy, I just am not a CSS expert.

Good Day,
Zack
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How to add a " | " in between a horizonal category listing?
« Reply #1 on: October 17, 2007, 02:45:44 am »

Mr. General Witty, sir. Why not take the easy road and simply, in your list style, add border-right: 3px solid [insert favorite color--methinks Army Green or similar] (test with different widths and colors to get the desired effect). Any other road is intricate. You'd have to either hack the category function in snews.php to include the vertical pipe after each menu item, or create a vertical pipe graphic and use the :before or :after pseudo-class in your css to bring that graphic in before or after each li. Seems a bit over the top to me, but hey- it's your call.
Personally I'd go with a thick enough vertical border.
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How to add a " | " in between a horizonal category listing?
« Reply #2 on: October 17, 2007, 02:14:05 pm »

Salutations and Accreditations,

     So, what happened to your so helpful (truthfully) code samples?  Well, what do I need to add the verticle border.  I think you are on the right track.  I remember millenia ago, that when I used to work with Word (the most useless, wannabe WYSIWIG editor EVER!), I had the option of showing a border on one side.  So how do I do that?  What code is required.  I can't really use word to find the answer since it doesn't use CSS (its a microsoft product, remember?).

[General, Whitty Remarks, not General Whitty (with huge emphasis on the comma to show separation of adjectives(its ENORMOUS!))]
Zack
« Last Edit: October 17, 2007, 02:15:50 pm by Buhmanator »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Re: How to add a " | " in between a horizonal category listing?
« Reply #3 on: October 17, 2007, 04:39:45 pm »

@ Buhmanator... Please try to understand that those of us who volunteer a little time to help out on these Forums now and then... are here to help new members get sNews installed and running. As a general 'rule of thumb', we are not here to provide a whole variety of general answers on general programming matters... as you can learn about a host of topics from thousands of other websites. Please also keep in mind that sNews is a Developer's Tool... and it is expected that you have some programming (developer) skills of your own if you are going to use sNews.

So... let's figure this out by using some good old 'reasoning' powers.

1. You want to make a simple modification to display "Categories" differently. The "Categories" get displayed through the template file (index.php) by this small PHP function-call string - <?php categories(); ?>. This actually contains the name of the categories function... which is located within the snews.php (engine functions) file. So... it stands to reason that we should start by looking in that function.

2. I will assume you are working with the default (un-modded) sNews 1.6 package. Open your snews.php file in your 'good' code editor and search the file for function categories(). This should lead you to the actual categories function... and it looks like this:

Quote
function categories() {
   $categorySEF = get_id('category');
   $class = $category_title == $categorySEF ? ' class="current"' : '';
   echo '<li><a'.$class.' href="'.db('website').'" title="'.l('home').'">'.l('home').'</a></li>';
   $query = "SELECT * FROM ".db('prefix')."categories WHERE published = 'YES' ORDER BY catorder ASC";
   $result = mysql_query($query);
   while ($r = mysql_fetch_array($result)) {
      $calc_num_query = "SELECT * FROM ".db('prefix')."articles WHERE position = 1 AND category = $r[id] AND published = 1";
      $cm_result = mysql_query($calc_num_query);
      $num_rows = mysql_num_rows($cm_result);
      $category_title = $r['seftitle'];
      $class = $category_title == $categorySEF ? ' class="current"' : '';
      echo '<li><a'.$class.' href="'.db('website').$category_title.'/" title="'.$r['description'].'">'.$r['name'];
      echo (s('num_categories') == 'on' ? ' ('.$num_rows.')' : '').'</a></li>';
}}

The blue colored strings are what create the text-links in the categories menu. They start with echo... which, in PHP, tells the server to display what follows within the single quote-marks. The first string displays the "home" text-link, and the 2nd one displays the names of the categories you have published... and they come from within the categories table in your database.

3. We only want the "vertical border" to come after the "home" link and be inserted before each category-name text link. Adding that "vertical border" you refer to is quite simple. On your keyboard... you get it by holding down the SHIFT key and pressing the backslash key... the 3rd key to-the-right after the ZERO key. You will also want some space on either side of it... and we insert the "HTML Entity" for a space - &nbsp; on either side of the vertical line. Here is where you insert this in the second string... as shown in red:

Quote

echo '<li>&nbsp;|&nbsp;<a'.$class.' href="'.db('website').$category_title.'/" title="'.$r['description'].'">'.$r['name'];

And... if you want more space on either side of the vertical line... double up on the &nbsp; entity on both sides..
« Last Edit: October 17, 2007, 05:02:40 pm by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How to add a " | " in between a horizonal category listing?
« Reply #4 on: October 17, 2007, 05:36:17 pm »

um, Key... Zack was expressing himself in a way that is best explained as 'humouros' (ref. Python, Monty). In other words, he wasn't serious. But I know what he meant...

General, (pardon this fool for misplacing his commas), Key's explanation is excellent. If you want to hack snews.php.
If you prefer the pure CSS solution, here it is:

In your style.css file, we'll give your ul (unordered list) the id "topmenu" just to be safe:
Quote
#topmenu {
margin: 0 auto;
padding: 2px 0;
font-size: 10px;
}

#topmenu li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
text-align: center;
border-right: 3px solid #DDDDDD;
background: #FFFFFF;
}

#topmenu li a {
padding: 6px 10px;
background: inherit;
color: #000000;
}

#topmenu li a:hover, #topmenu li a:active, #topmenu li a:focus {
background: #000000;
color: #FF9912;
}

Explanation: First we give the unordered list an ID, to make sure the styles are as protected as possible.
Second, we declare that the ul should have margin 0, and a top and bottom padding of 2px.
Third, we set the font- size for the list (example: 10px). Find the size that suits you.

Moving on then to the meat of the ul: the list items and their anchors (a navigation list without anchors is like an army without a ...wait for it ... mess tent.)

First, declare that the list items don't have any style type. This stops bullets etc from appearing.
Second, set the list to be displayed inline. This will put each list item on one and the same line (asssuming there's enough horizontal space to hold the list on one line), i.e make it 'horizontal'.
Conversely, if you want it to be displayed vertically, you can either omit "display" altogether, or use "display: block".
The rest of the list item (li) styles are more or less spices. Though, by setting margin and padding to 0 (zero), we clear the default margin and padding values, thus giving us more control over the styling. The spices are all optional, try different settings to see what makes sense in your setup. Except the border-right value: that must be exactly as I've entered it. :P

Next, anchors. In a horizontal list you can achieve amazing results with proper styling.
Set the overbearing styles on the "li a" selector. Then it's easier to change a few details for the individual anchor styles. Remember that, if you don't use the global "a", you will have to write up all link styles separately, in the right order (link, visited, hover, active, focus).

By giving the "a" style a good amount of padding, we make sure that the clickable area is larger than just the text, which in this context is a good thing. And it's a simple way of simulating tabs.

In summary: Give your ul an ID. Declare list-style-type: none; and display: inline; on the li (list item) style, as well as a right border of good size and color. Then use the a (anchor) styles to set padding, colors etc.

Does that help?
« Last Edit: October 17, 2007, 05:40:47 pm by Fred K (agentsmith) »
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How to add a " | " in between a horizonal category listing?
« Reply #5 on: October 17, 2007, 11:11:49 pm »

Hello,

     Keyrocks: Thank you, my man!  Exactly what I wanted!  BTW: Keyrocks, you do know that if you go to general forums they usually shun you away and say that you should go the to specific forum that relates to your product.  And since my question related directly to the php engine itself, it was a legitimate question for this forum.  Also, since this forum gets relatively low traffic (this section at least, haven't checked out the others), and you guys are great, I don't see whats wrong with questions.

     Mr. Agent Smith:  Lol, dude, I mean general as in "in general" meaning generally or a broad topic, however you want to think of it.  Not general like army general.  Its hilarious anyway, its the first thing I see when I get home, great laugh.

[General (as in generally), usual, whitty (not whitey) remarks (as in things that you say as a response) relating to (having to do with) departure (relating to leaving) and/or salutations (greetings(roughly)],
Zack
« Last Edit: October 17, 2007, 11:15:04 pm by Buhmanator »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Re: How to add a " | " in between a horizonal category listing?
« Reply #6 on: October 18, 2007, 02:35:07 pm »

Hello,
     Keyrocks: Thank you, my man!  Exactly what I wanted!  BTW: Keyrocks, you do know that if you go to general forums they usually shun you away and say that you should go the to specific forum that relates to your product.  And since my question related directly to the php engine itself, it was a legitimate question for this forum.  Also, since this forum gets relatively low traffic (this section at least, haven't checked out the others), and you guys are great, I don't see whats wrong with questions.

[General (as in generally), usual, whitty (not whitey) remarks (as in things that you say as a response) relating to (having to do with) departure (relating to leaving) and/or salutations (greetings(roughly)],
Zack
Well Zack... (with the generally witty remarks)... I'm glad to see that you have it sorted out now. BTW... I hope you don't think I was 'ragging' on you for asking the questions. You can pretty much find answers to such questions yourself with any PHP code (not just sNews) by reasoning them out in the same way I did above.  8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU