By Mateo on

A lot of the themes for phptemplate only have one set of links (usually the primary links). I know that the SpreadFireFox theme as well as the Marvin_2k theme only allow for one set of links.

I spent a little time today and figured a way to combine primary and secondary links in a fun way. I wanted my primary and secondary links to be on the same row, but simply aligned to different edges of the screen.

I first opened page.tpl.php and found where primary links were rendered. This is what I found.

 <?php if (is_array($primary_links)): ?>
    <ul id="main-nav">
      <?php foreach ($primary_links as $link): ?>
         <li><?php print $link?></li>
      <?php endforeach; ?>
    </ul>
  <?php endif; ?>

I changed it to this:

  <?php if (is_array($primary_links)): ?>
    <ul id="main-nav">
      <?php foreach ($primary_links as $link): ?>
         <li><?php print $link?></li>
      <?php endforeach; ?>
      <?php if (is_array($secondary_links)): ?>
          <?php foreach ($secondary_links as $link): ?>
	     <li2><?php print $link?></li2>
          <?php endforeach; ?>
      <?php endif; ?>
    </ul>
  <?php endif; ?>

By making this change I added a condition that checked for secondary links, and if they existed, they were printed under the div tag "
," which is a new tag I created.

The
tag is exactly the same as the

  • tag except it says, "float: right;" instead of "float: left;"

    the result can be seen here: http://72.9.242.6 (don't judge the site, it's still under heavy development).

    I hope this can help someone else in the future.

    Mateo

    • Comments

    Mateo’s picture

    Mateo commented

    sorry for confusion, but the site erased my div tags. It should read:
    ---
    By making this change I added a condition that checked for secondary links, and if they existed, they were printed under the div tag "li2," which is a new tag I created.

    The "li2" tag is exactly the same as the "li" tag except it says, "float: right;" instead of "float: left;"
    ---

    There should be a way to edit posts I made.

    Mateo

    hpk’s picture

    hpk commented

    Thanks man. It sure helped me!

    hpk a.k.a. vikram
    [De-centralizing the central issues]
    National Institute of Design, India

    Mateo’s picture

    Mateo commented

    I may have spoken too quickly on this one. While it looks awesome in Firefox, it has serious problems in IE. Unfortunately 95% of all browsers are IE.

    Does anyone have an idea how to fix it? To see what I mean, view http://72.9.242.6 with Firefox and with IE.

    Mateo

    Mateo’s picture

    Mateo commented

    To make it work correctly in IE and Firefox, you need to make the links a table. Here is my code:

    from style.css:

    #main-nav li {
  float: left;
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: inline;
   }

    and in my page.tpl.php file:

      <?php if (is_array($primary_links)): ?>
    <ul id="main-nav">
      <table height = "1" width="100%"  border="0"><tr><td align = "left">
      <?php foreach ($primary_links as $link): ?>
         <li style="border-right: 1px solid #000"><?php print $link?></li>
      <?php endforeach; ?>
        </td>
   <?php if (is_array($secondary_links)): ?>
   <td>
   <?php foreach ($secondary_links as $link2): ?>
    <li style="float:right; border-left: 1px solid #000"><?php print $link2 ?></li>
   <?php endforeach; ?></td>
      <?php endif; ?>
    </tr></table></ul>
  <?php endif; ?>

    I personally wouldn't care if IE didn't work, but the fact remains that 95% of the web surfers still use it.

    Mateo

    jeko’s picture

    jeko commented

    Though what you wrote may work, I'm pretty sure standards don't allow a list to contain a table that contains the list's items. A much cleaner element structure would be to have each table cell (td) containing it's own list and list items.

    To make main-nav styles apply to both lists, you can use the main-nav id on the table tag, or wrap the table in a div with that id (either way, all ul and li elements inside the table will be descendents of #main-nav).

    The only css caveat is if you have styles defined as ul#main-nav rather than just #main-nav, which is very unlikely since an id selector doesn't need the additional specificity.