Box Header images are repeating.

Mark1 · July 28, 2003

I am trying to add a graphic as my box header. I have the graphic showing up, but the header pic is repeating, and is not the right size.

Take a look for yourself. www.circuitrysolutions.com .

Here is the change I made to the stylesheet.css file. The following was added:

TD.infoBoxHeading {

background-image: url('images/boxes/information.gif');

background-repeat: no-repeat

}

information.gif is the name of the graphic I used.

Can someone tell me what else I need to do please?

Thank you!

Mark

Rumble · July 28, 2003

Try changing

TD.infoBoxHeading

to

TR.infoBoxHeading

td applies the css to each column, tr should apply it to the whole row.

Headers are made up of one row with 3 columns thats why yours is repeating 3 times.

Mark1 · July 28, 2003

Changing the TD to TR does not seem to fix the problem. In fact, it does not load the graphic with the TR. Is there supposed to be some other change in code as well? This has me really puzzled! :P

Mark

July 28, 2003

not sure why the TR thing didn't work for you

but if you go into catalog/includes/classes/boxes.php

and find this line

      $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',

                                        'text' => $left_corner),

                                  array('params' => 'width="100%" height="14" class="infoBoxHeading"',

                                        'text' => $contents[0]['text']),

                                  array('params' => 'height="14" class="infoBoxHeading" nowrap',

                                        'text' => $right_corner));

and replace it with

      $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',

                                        'text' => $left_corner),

                                  array('params' => 'width="100%" height="14" class="infoBoxHeading"',

                                        'text' => $contents[0]['text']),

                                  array('params' => 'height="14" class="infoBoxHeading" background="images/boxes/information.gif" nowrap',

                                        'text' => $right_corner));

and then remove background-image: url('images/boxes/information.gif');

from your stylesheet (but keep the no-repeat directive) that will work.

Mark1 · July 28, 2003

That fix does not load the graphic in the header. I must be doing something wrong. Would it help if I posted the stylesheet.css and the catalog/includes/classes/boxes.php files? This should be simple, but it is beginning to drive me nuts! :P

Mark

July 28, 2003

just looked at it again

it needs to be background="store/images/boxes/information.gif"

I would recommend using a tep_image with DIR_WS_IMAGES

July 28, 2003

that last statement was blatently untrue - sorry

it was right the first time.

In your view source the background="blah ..." is in the right place and is pointing at the right image - don't know why it isn't showing

July 29, 2003

Changing the TD to TR does not seem to fix the problem. In fact, it does not load the graphic with the TR. Is there supposed to be some other change in code as well? This has me really puzzled!

In stylesheet.css, if the TD has a background color, it will color over the TR background image. I think that deleting the background: line will work. I am sure that changing it to

background-color: transparent;

will ensure that that is not the problem.

Good luck,

Matt

TB · July 29, 2003

TD.infoBoxHeading {
background-image: url('images/boxes/information.gif');

background-repeat: no-repeat

}

Is this a cut and paste of what you have?

If so, you're missing the trailing ';' after no-repeat.

If this doesn't help, how's about you give us some more information to play with, post the section(s) from the style sheet you're currently using.

Once I get that... I will see what I can do for you.

Cheers,

Tony

July 29, 2003

Is this a cut and paste of what you have?
If so, you're missing the trailing ';' after no-repeat.

It's followed immediately by a }, so the ; is not needed there. CSS is goofy that way.

Cheers,

Matt

Mark1 · July 29, 2003

/*
$Id: stylesheet.css,v 1.50 2002/11/02 03:06:05 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright © 2001 osCommerce

Released under the GNU General Public License

*/

.boxText { font-family: Verdana, Arial sans-serif; font: Italic; font-size: 12px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 12px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 12px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

BODY {

background: #ffffff;

color: #000000;

margin: 0px;

}

A {

color: #000000;

text-decoration: none;

}

A:hover {

color: #AABBDD;

text-decoration: underline;

}

FORM {

display: inline;

}

TR.header {

background: #AABADE;

}

TR.headerNavigation {

background: #bbc3d3;

}

TD.headerNavigation {

font-family: Verdana, Arial, Regular;

font-size: 12px;

background: #000000;

color: #ffffff;

font-weight : bold;

}

A.headerNavigation {

color: #FFFFFF;

}

A.headerNavigation:hover {

color: #ffffff;

}

TR.headerError {

background: #ff0000;

}

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 14px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

TR.headerInfo {

background: #00ff00;

}

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 14px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

TR.footer {

background: #bbc3d3;

}

TD.footer {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

background: #000000;

color: #ffffff;

font-weight: bold;

}

.infoBox {

background: #B6B7CB;

}

.infoBoxContents {

background: #f8f8f9;

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

}

.infoBoxNotice {

background: #ff8e90;

}

.infoBoxNoticeContents {

background: #ffe6e6;

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

TR.infoBoxHeading {

font-family: Jeep, Italic;

font-size: 30px;

background: #ffffff;

color: #000000;

font-weight: bold;

text-align: bottom;

}

TR.infoBoxHeading {

background-color: transparent;

background-repeat: no-repeat;

}

TD.infoBox, SPAN.infoBox {

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #f4f7fd;

}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #ffffff;

}

TR.productListing-heading {

background: #d2e9fb;

}

TD.productListing-heading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

background: #d2e9fb;

color: #000000;

font-weight: bold;

font-variant: small-caps;

}

TD.productListing-data {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

A.pageResults {

color: #0000FF;

}

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 22px;

font-weight: bold;

color: #AABADE;

}

TR.subBar {

background: #f4f7fd;

}

TD.subBar {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #000000;

}

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

line-height: 1.5;

}

TD.smallText, SPAN.smallText, P.smallText {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

TD.accountCategory {

font-family: Verdana, Arial, sans-serif;

font-size: 15px;

color: #aabbdd;

}

TD.fieldKey {

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

font-weight: bold;

}

TD.fieldValue {

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

}

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

font-weight: bold;

}

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #ff0000;

}

CHECKBOX, INPUT, RADIO, SELECT {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

}

TEXTAREA {

width: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

}

SPAN.greetUser {

font-family: Verdana, Arial, sans-serif;

font-size: 15px;

color: #f0a480;

font-weight: bold;

}

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

TD.formAreaTitle {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 14px;

font-weight: bold;

}

SPAN.markProductOutOfStock {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 14px;

color: #c76170;

font-weight: bold;

}

SPAN.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

This is the current stylesheet.css file.

Right now, I am seeing the left corner of the graphic. At least I am not seeing triple now. :P

Also, I did change the store/includes/classes/boxes.php file to read:

$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
'text' => $left_corner),

array('params' => 'width="100%" height="14" class="infoBoxHeading"',

'text' => $contents[0]['text']),

array('params' => 'height="14" class="infoBoxHeading" background="images/boxes/information.gif" nowrap',

'text' => $right_corner));

Can anyone do anything with this?

Mark

Mark1 · July 29, 2003

ok, I seem to have fixed (hacked) this. I changed the Box width in my store/includes/application_top.php file to 202. I changed it to fit the size of my header graphic (the graphic width is 200). A small amount of trial and error seems to have the problem solved. I hope it looks right on every one else's browser. Can you please let me know if it looks funky? :wink:

Also, I had to make a few adjustments to the store/includes/classes/boxes.php file. Here is what I did:

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'nowrap height="33" width="100" align="center" font-family="Jeep" class="infoBoxHeading" background="images/boxes/information.gif"',

'text' => $contents[0]['text']));

I am not sure about the font-family text. this doesnt seem to affect the font at all. The stylesheet.css does not either. Any ideas on how to get the font to work now? :lol:

Here is the stylesheet.css entry"

TR.infoBoxHeading {
font-family: Jeep, Italic;

font-size: 20px;

background: #ffffff;

color: #000000;

font-weight: bold;

text-align: middle;

background-color: transparent;

background-repeat: no-repeat;

}

Now, All i have to do is figure out how to get rid of the "New Products for July" without messing up what I have accomplished.

Any help on cleaning this up woudl be GREATLY appreciated!

Mark

Box Header images are repeating.

Recommended Posts

Mark1

Rumble

Mark1

Guest

Mark1

Guest

Guest

Guest

TB

Guest

Mark1

Mark1

Archived

Browse

Activity