Call Now: 702.453.3332

  • Development
    • Emergency Website Services
    • eCommerce
      • eCommerce Support & Development
        • Support Request
    • Magento eCommerce Development
    • Mobile Applications
      • Las Vegas iPhone App Developer
      • Las Vegas Android Development
    • Content Management
      • Custom WordPress Themes
    • Software
      • Custom Software
      • PHP Development
      • Mobile Applications
  • Design
    • Las Vegas Website Design & Development
    • Custom eCommerce Design
    • Web Design
  • Marketing
    • Drone Video and Photography Services
    • Las Vegas SEO Company- SEO Las Vegas
    • Page Speed Optimization Services
    • SEO
    • Pay Per Click
    • Photography Services – Product and Head Shots
    • Internet Marketing
    • Brand Development
    • Google Ads
  • Portfolio
  • System Security iOT
  • News and Events
  • Contact
Menu
  • Development
    • Emergency Website Services
    • eCommerce
      • eCommerce Support & Development
        • Support Request
    • Magento eCommerce Development
    • Mobile Applications
      • Las Vegas iPhone App Developer
      • Las Vegas Android Development
    • Content Management
      • Custom WordPress Themes
    • Software
      • Custom Software
      • PHP Development
      • Mobile Applications
  • Design
    • Las Vegas Website Design & Development
    • Custom eCommerce Design
    • Web Design
  • Marketing
    • Drone Video and Photography Services
    • Las Vegas SEO Company- SEO Las Vegas
    • Page Speed Optimization Services
    • SEO
    • Pay Per Click
    • Photography Services – Product and Head Shots
    • Internet Marketing
    • Brand Development
    • Google Ads
  • Portfolio
  • System Security iOT
  • News and Events
  • Contact
Atwoodz website design logo

Add Images To Box Headings in osCommerce

Add Images To Box Headings in osCommerce

  • Introduction
  • Solution
    • Heading Text Replacement
    • Use Of Cascading Style Sheets

Introduction

Images can be added to each box displayed in the left and right side columns, where the same image is used for all boxes or where different images are used for different boxes.

Solution

  • Heading Text Replacement
  • Use Of Cascading Style Sheets

Heading Text Replacement

The simple method of having images in the box heading is to replace the heading text value with an image.

This can be done by editing the main language file in the includes/languages/ directory, for example includes/languages/english.php.

To replace the Categories box heading with an image, the heading title definition of BOX_HEADING_CATEGORIES will need to be changed from:

To:

define('BOX_HEADING_CATEGORIES', '<img src="images/a_graphic_image.gif">');

Use Of Cascading Style Sheets

The advanced method of having images in the box heading is to create CSS definitions for each box where an image is to be shown.

The following example concentrates on the Categories box and needs the following three files to be modified:

includes/classes/boxes.php
includes/boxes/categories.php
stylesheet.css

The following code should be added to includes/classes/boxes.php at the very bottom of the page right before the ending ?> tag:


class infoBoxHeadingCategories extends tableBox {
function infoBoxHeadingCategories($contents) {
$this->table_cellpadding = '0';

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'width="100%" class="infoBoxHeadingCategories"',
'text' => $contents[0]['text']));

$this->tableBox($info_box_contents, true);
}
}


The code above creates a new class called infoBoxHeadingCategories which will be used in the Categories box.

The following code in includes/boxes/categories.php:


new infoBoxHeading($info_box_contents, true, false);

should be replaced with:


new infoBoxHeadingCategories($info_box_contents, true, false);

As the new infoBoxHeadingCategories class uses a new stylesheet definition just for the Categories box, the following needs to be added to the stylesheet.css file:


TD.infoBoxHeadingCategories {
background: #33c3d3;
background-image: url('images/some_graphic.gif');
background-repeat: no-repeat;
}

This new class in the stylesheet can have the font, size, spacing, etc. set according to css styles.

Customer Testimonial Videos: The Key to Gaining More Business in Las Vegas

Read More »

Elite Firearms WordPress Woocommerce Multi-Vendor Store

Read More »

Covid-19 Open for Business Safety Message

Read More »

Essential and Non-Essential Business Coronavirus Web and Digital Tips

Read More »

GoDaddy Hosting Sucks!

Read More »

Total Eclipse Website SEO and Conversion Revamp

Read More »
PrevPreviousSEO to Optimize Your Social Media Profiles
NextHosting Your Web Site – Where not to go.Next

Important Links

  • Make A Payment
  • Employment Opportunities & Internships
  • eCommerce Cart Solutions
  • Atwoodz Hosting
  • Green Commitment
  • Terms & Conditions

Recent News

Customer Testimonial Videos: The Key to Gaining More Business in Las Vegas
Read More »
Elite Firearms WordPress Woocommerce Multi-Vendor Store
Read More »
Covid-19 Open for Business Safety Message
Read More »
Essential and Non-Essential Business Coronavirus Web and Digital Tips
Read More »