Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

editing the stylesheet file


The Butcher

Recommended Posts

Hello,

 

I am trying to customize my oscommerce store version 2.2 rc2.

 

Now do I want to use different link style's in the store for example:

 

I want a different colour link in the menu, product info and footer

 

I tried to do it like this for example the footer I edited the .css to:

 

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #80cdd4;
}
A.footer {
 color: #09a0ae;
}
A.footer:hover {
 color: #80cdd4;
}

 

And made in the footer all class to footer like this:

<tr class="footer">
<td class="footer">

 

but some how he always uses the body code:

 

BODY {
 background-image: url(images/background.png);
 background-repeat: repeat-x;
 color: #000000;
 margin: 0px;
}
A {
 color: #969696;
 text-decoration: none;
}
A:hover {
 color: #11b6c6;
 text-decoration: none;
 font-weight : bold;
}

 

I don't understand it because the breadcrumb trail does have different link style''s and isn't affected by the body settings can anyone tell me what I am doing wrong.

 

Thanks

Link to comment
Share on other sites

a.footer means a link with a class named footer

footer a means a link within an element that has a class named footer

 

Instead of adding class footer everywhere you can add it to the most parent element that wrap your footer, anything inside can be then referenced in the css by using the class .footer

Link to comment
Share on other sites

Al right thank for the answer still don't get It totally I think but the footer is working fine now I used this code on al my links in the footer:

 

<a class="footer" href="./index.php">Start</a>

 

But I don't think that it is what you mean but it worked. However how do I do this for the catagories because I looked in the includes/boxes/categories.php but there isn't really much there that I understand.

 

Could you please tell me what kind of code I have to put in here I just want a link colour and a hover colour.

 

And if possible I would like that if I ad a category he ads a image between the category more or less like a spacer line but then a image so I can adjust the height the are apart with the height of the image like this:

 

category 1

 

------------------

 

category 2

 

-----------------

 

etc

 

this is my code for the categories.php

 

<?php
/*
 $Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2003 osCommerce
 Released under the GNU General Public License
*/
 function tep_show_category($counter) {
   global $tree, $categories_string, $cPath_array;
   for ($i=0; $i<$tree[$counter]['level']; $i++) {
  $categories_string .= "  ";
   }
   $categories_string .= '<a href="';
   if ($tree[$counter]['parent'] == 0) {
  $cPath_new = 'cPath=' . $counter;
   } else {
  $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }
   $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';
   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
  $categories_string .= '<b>';
   }
// display category name
   $categories_string .= $tree[$counter]['name'];
   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
  $categories_string .= '</b>';
   }
   if (tep_has_category_subcategories($counter)) {
  $categories_string .= '->';
   }
   $categories_string .= '</a>';
   if (SHOW_COUNTS == 'true') {
  $products_in_category = tep_count_products_in_category($counter);
  if ($products_in_category > 0) {
    $categories_string .= ' (' . $products_in_category . ')';
  }
   }
   $categories_string .= '<br>';
   if ($tree[$counter]['next_id'] != false) {
  tep_show_category($tree[$counter]['next_id']);
   }
 }
?>
<!-- categories //-->
	  <tr>
	    <td>
<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
 new infoBoxHeading($info_box_contents, true, true);
 $categories_string = '';
 $tree = array();
 $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
 while ($categories = tep_db_fetch_array($categories_query))  {
   $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
										    'parent' => $categories['parent_id'],
										    'level' => 0,
										    'path' => $categories['categories_id'],
										    'next_id' => false);
   if (isset($parent_id)) {
  $tree[$parent_id]['next_id'] = $categories['categories_id'];
   }
   $parent_id = $categories['categories_id'];
   if (!isset($first_element)) {
  $first_element = $categories['categories_id'];
   }
 }
 //------------------------
 if (tep_not_null($cPath)) {
   $new_path = '';
   reset($cPath_array);
   while (list($key, $value) = each($cPath_array)) {
  unset($parent_id);
  unset($first_id);
  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
  if (tep_db_num_rows($categories_query)) {
    $new_path .= $value;
    while ($row = tep_db_fetch_array($categories_query)) {
	  $tree[$row['categories_id']] = array('name' => $row['categories_name'],
										   'parent' => $row['parent_id'],
										   'level' => $key+1,
										   'path' => $new_path . '_' . $row['categories_id'],
										   'next_id' => false);
	  if (isset($parent_id)) {
	    $tree[$parent_id]['next_id'] = $row['categories_id'];
	  }
	  $parent_id = $row['categories_id'];
	  if (!isset($first_id)) {
	    $first_id = $row['categories_id'];
	  }
	  $last_id = $row['categories_id'];
    }
    $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
    $tree[$value]['next_id'] = $first_id;
    $new_path .= '_';
  } else {
    break;
  }
   }
 }
 tep_show_category($first_element);
 $info_box_contents = array();
 $info_box_contents[] = array('text' => $categories_string);
 new infoBox($info_box_contents);
?>
	    </td>
	  </tr>
<!-- categories_eof //-->

 

hope anyone can help me with this.

Link to comment
Share on other sites

  • 10 months later...

a.footer means a link with a class named footer

footer a means a link within an element that has a class named footer

 

Instead of adding class footer everywhere you can add it to the most parent element that wrap your footer, anything inside can be then referenced in the css by using the class .footer

 

Hi George,

 

How are you, glad to find this thread.

 

I have similar question which I like to learn.

 

For example, in footer.php, I have make a <div id="footer>

stylesheet.css

#footer{

}

 

how can I make the A and hover effect that only related to #footer,

I had tried A.footer and A.footer:hover as well, and it doesn't work.

 

Thanks in advance.

 

Lyn

Link to comment
Share on other sites

@@ce7

 

Hi Lyn

 

Since all footer is wrapped into a div id=footer, you can reference all elements within this wrapper by "prefixing" the css selectors with #footer

 

For example

 

#footer a{} = all links within the footer

#footer a :hover{} = all links within the footer in hover state

#footer div{} = all divs within the footer (not the div id=footer itself)

#footer div.kuku{} = all divs with class "kuku" within the footer. In case you use this class (kuku) elsewhere, in that way you can be specific that you want to alter only if in the footer

 

What you had (a.footer) is wrong, because it would apply to a link with class footer, like <a class="footer" href=" ...">my link</a>

Link to comment
Share on other sites

@@ce7

 

Hi Lyn

 

Since all footer is wrapped into a div id=footer, you can reference all elements within this wrapper by "prefixing" the css selectors with #footer

 

For example

 

#footer a{} = all links within the footer

#footer a :hover{} = all links within the footer in hover state

#footer div{} = all divs within the footer (not the div id=footer itself)

#footer div.kuku{} = all divs with class "kuku" within the footer. In case you use this class (kuku) elsewhere, in that way you can be specific that you want to alter only if in the footer

 

What you had (a.footer) is wrong, because it would apply to a link with class footer, like <a class="footer" href=" ...">my link</a>

 

Hi George,

 

Thank you very much for your explaination!

 

Merry Xmas and Happy New Year!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...