Styling archive with CSS and functions.php

Hoping someone with a little more php experience can help me out as I’m learning as I go! I have a site with custom styling for the blog archive pages. Each has a custom header image and ‘Read More’ button. This is controlled, as far as I can tell, by custom CSS and the theme’s functions.php file.

Here’s the functions.php code:

if ( !function_exists( 'aspire_get_catid_from_single' ) ) { // Added in 2.9
  function aspire_get_catid_from_single() {
    static $catID;
    if (!isset($catID)) {
      $catIds = array();
      $cats = get_the_category();

      foreach ($cats as $cat) {
        if ($cat->cat_ID >= 29 && $cat->cat_ID <= 115) {
          $catIds[$cat->cat_ID] =  $cat->cat_ID;
        }
      }
      if (count($catIds) > 1) {
        unset($catIds[29]);
      }

      $catID = array_shift($catIds);
    }
    return $catID;
  }
}

Here is the CSS:

/*############## PAGE TITLE ##############*/
body.page-category #page .title h2.title {
  background: transparent none no-repeat scroll 0 0;
  display: block;
  text-indent: -9999px;
  margin: 0;
  height: 80px;
  width: 100%;
  padding: 0;
}
body.category-29 #page .title h2.title {
  background-image: url(images/category/category_header_allrecipes.gif);
}
body.category-30 #page .title h2.title {
  background-image: url(images/category/category_header_ancho.gif);
}
body.category-31 #page .title h2.title {
  background-image: url(images/category/category_header_salmon.gif);
}
body.category-32 #page .title h2.title {
  background-image: url(images/category/category_header_curry.gif);
}
body.category-33 #page .title h2.title {
  background-image: url(images/category/category_header_steak.gif);
}
body.category-34 #page .title h2.title {
  background-image: url(images/category/category_header_coffee.gif);
}
body.category-35 #page .title h2.title {
  background-image: url(images/category/category_header_anyday.gif);
}
body.category-110 #page .title h2.title {
  background-image: url(images/category/category_header_taconight.gif!important);
}

/*############## READ MORE ##############*/
body.page-category #page .entry a.more {
  background: transparent none no-repeat scroll 0 0;
  display: block;
  text-indent: -9999px;
  margin: 0;
  height: 45px;
  width: 140px;
  padding: 0;
}
body.category-29 #page .entry a.more {
  background-image: url(images/category/category_button_allrecipes.gif);
}
body.category-30 #page .entry a.more {
  background-image: url(images/category/category_button_ancho.gif);
}
body.category-31 #page .entry a.more {
  background-image: url(images/category/category_button_salmon.gif);
}
body.category-32 #page .entry a.more {
  background-image: url(images/category/category_button_curry.gif);
}
body.category-33 #page .entry a.more {
  background-image: url(images/category/category_button_steak.gif);
}
body.category-34 #page .entry a.more {
  background-image: url(images/category/category_button_coffee.gif);
}
body.category-35 #page .entry a.more {
  background-image: url(images/category/category_button_anyday.gif);
}
body.category-taco-night #page .entry a.more {
  background-image: url(images/category/category_button_taconight.gif);
}

These are controlling this page, which should look similar to this one.

The category id’s I need styled are 29-35 and now 110 (the new category.) I changed the parameter in functions.php above to include categories up to category-115 (it used to be up to 35), but the new category isn’t displaying properly.

I found that the body class tag on the category page isn’t complete, which is the first problem – it should include ‘page-category category-slug’. But even when I override that with the slug in Chrome’s inspect feature, the custom styling still doesn’t display.

At this point I’m stuck, and the developers who wrote this code aren’t answering my emails! Can anyone help?