By scarins on

Hi All

Something simple for a css pro but unfortunately im stuck.

I would like to edit the Newsportal theme to include rounded corners on the headers, primary links, menu and footer but im unable to figure out the html and css to allow multiple background images.

I know that they can not simply be written one after the other so how could I write something like 

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border-bottom: none;
  background: #2153AA url('tab_bg.gif') bottom left repeat-x;
background: #2153AA url(tl.png) no-repeat top left;
background: #2153AA url(tr.png) no-repeat top right;
background: #2153AA url(bl.png) no-repeat bottom left;
background: #2153AA url(br.png) no-repeat bottom right;
  text-decoration: none;
}

So that all the background statements work.

Any help appreciated, also any links for css beginners very welcome.

Thx

⋅ Categories: Drupal 4.7.x

Comments

advosuzi’s picture

advosuzi commented

If you view source on this page and load the css files you can analyze #primary-links and how they are built. These are the rounded tabs you see above. Same goes for the sidebar and comment containers. This method should get you started. Essentially you will need to attach backgrounds to more than one element to get the look you want. example, one bg applied to the li, one to the href, and you may need to add spans or divs as well.

The other option is to do it with CSS and javascript: http://www.html.it/articoli/nifty/index.html

Or with the module that does the same:
http://drupal.org/project/niftycorners-module
(haven't tested this)

scarins’s picture

scarins commented

Thanks for the quick response, your post helped me heaps and i now feel like im close to a solution

I looked at my pages source and found

 <div id="navcontainer">
      <ul id="navlist">
      <li><a href="LINK1" title="">Search</a></li>
      <li><a href="LINK2" title="">WWW</a></li>
      <li><a href="LINK3" title="">login</a></li>
      </ul>    
 </div>

I understand that i need to change it to something like

 <div id="navcontainer">
      <ul id="navlist">
      <li><a href="LINK1" title=""><span><span>Search</span></span></a></li>
      <li><a href="LINK2" title=""><span><span>WWW</span></span></a></li>
      <li><a href="LINK3" title=""><span><span>login</span></span></a></li>
      </ul>    
 </div>

and add some css, but i look at page.tpl.php and i find

    <div id="navcontainer">
      <?php if (isset($primary_links)) { ?><?php print newsportal_primary_links() ?><?php } ?>
    </div>

in template.php i find

function newsportal_primary_links() {
  $links = menu_primary_links();
  if ($links) {
    $output .= '<ul id="navlist">';
    foreach ($links as $link) {

      $output .= '<li>' . $link . '</li>';
    };
    $output .= '</ul>';
  }
  return $output;
}

How would one go about making the changes needed to use multiple images?