Replicating this with CSS? -> Shadow, Roundcorner, Gradient

[welchyboy]

OK I have switched out the code with the new code you told me. Now what am I doing with the BG images I am not understanding what you are talking about one side of the bg and the other side of the bg. Do you mean one side of the products banner and the other side of the products banner? Where would I place this. Sorry and I thank you for your help. If you could just tell me a little more and I think we will get this working. Much appreciated again.

[welchyboy]

Just thought I would show you what my original code was before replacing it with the code you gave me. Thought it might help.

  if ($new_products->RecordCount() > 0) {
    if (isset($new_products_category_id) && $new_products_category_id != 0) {
      $category_title = zen_get_categories_name((int)$new_products_category_id); //image titles - box header image if file exists 2007-10-04
      $title = '<h2 class="centerBoxHeading">' . (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') ? zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') :  sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . ($category_title != '' ? ' - ' . $category_title : '' )) . '</h2>';
    } else {
      $title = '<h2 class="centerBoxHeading">' . (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') ? zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') :  sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B'))) . '</h2>';
    }

[gjh42]

Right, you are using Image Titles, so the added spans should go in that version.

  if ($new_products->RecordCount() > 0) {
    if (isset($new_products_category_id) && $new_products_category_id != 0) {
      $category_title = zen_get_categories_name((int)$new_products_category_id); //image titles - box header image if file exists 2007-10-04
      $title = '<h2 class="centerBoxHeading"><span class="centerBoxHeadingWrapper">' . (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') ? zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') :  sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . ($category_title != '' ? ' - ' . $category_title : '' )) . '</span></h2>';
    } else {
      $title = '<h2 class="centerBoxHeading"><span class="centerBoxHeadingWrapper">' . (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') ? zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/centerboxhead-new.gif') :  sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B'))) . '</span></h2>';
    } 

Make the title image a gif of the text with transparent background.

Cut your "corn" image in two, say one part with the right end of the ear (cornbg-r.gif) and the other with the rest (cornbg-l.gif). Duplicate the straight part so it is a lot longer - more than any centerbox you expect to see it in.
Now in your stylesheet, add

h2.centerBoxHeading {
    background-image: url(../images/cornbg-l.gif);
    background-position: top left;
    background-repeat: no-repeat;
    }

.centerBoxHeadingWrapper {
    background-image: url(../images/cornbg-r.gif);
    background-position: top right;
    background-repeat: no-repeat;
    /*display: block;*/ /*this might be needed to make the span fill the heading*/
    }

[welchyboy]

OK it is not working I am obviously doing something wrong. First of what I did is rename the centerbox gif which was there originally located in the buttons/english folder of my custom folder. Then I created two files one called cornbg-l.gif and cornbg-r.gif and uploaded them to my /images/ folder which is on the main site. Not in the includes/template blah blah. Just /images. Then I edited the stylesheet.css located in my custom folder with this.

h2.centerBoxHeading {
    background-image: url(../images/cornbg-l.gif);
    background-position: top left;
    background-repeat: no-repeat;
    }

.centerBoxHeadingWrapper {
    background-image: url(../images/cornbg-r.gif);
    background-position: top right;
    background-repeat: no-repeat;
    /*display: block;*/ /*this might be needed to make the span fill the heading*/
    }

uploaded that to my site and i get no image at all.

what am i doing wrong now?


the site is http://www.wpc-consulting.com/~stxmill/

[clydejones]

OK it is not working I am obviously doing something wrong. First of what I did is rename the centerbox gif which was there originally located in the buttons/english folder of my custom folder. Then I created two files one called cornbg-l.gif and cornbg-r.gif and uploaded them to my /images/ folder which is on the main site. Not in the includes/template blah blah. Just /images. Then I edited the stylesheet.css located in my custom folder with this.

h2.centerBoxHeading {
    background-image: url(../images/cornbg-l.gif);
    background-position: top left;
    background-repeat: no-repeat;
    }

.centerBoxHeadingWrapper {
    background-image: url(../images/cornbg-r.gif);
    background-position: top right;
    background-repeat: no-repeat;
    /*display: block;*/ /*this might be needed to make the span fill the heading*/
    }

uploaded that to my site and i get no image at all.

what am i doing wrong now?


the site is http://www.wpc-consulting.com/~stxmill/

Your images need to go in
includes/templates/YOUR_TEMPLATE/images

[welchyboy]

OK I did that but do i need to change the path that is in the stylesheet to something like /includes/templates/custom/images/cornbg-l ? Or leave it the way it is. Because I am still getting no images?

[gjh42]

The correct method for describing image files (which are saved like
/includes/templates/your_template/images/cornbg-l.gif) is url(../images/cornbg-l.gif).
If it is not working for you, there is something else wrong.

[welchyboy]

Well I don't doubt that I am very new so I am having lots of problems. Here is what I have right now.

my stylesheet.css

h2.centerBoxHeading {
    background-image: url(../images/cornbg-l.gif);
    background-position: top left;
    background-repeat: no-repeat;
    }

.centerBoxHeadingWrapper {
    background-image: url(../images/cornbg-r.gif);
    background-position: top right;
    background-repeat: no-repeat;
    /*display: block;*/ /*this might be needed to make the span fill the heading*/
    }

and this is what i have for my /includes/modules/your_template/new_products.php

if (isset($new_products_category_id) && $new_products_category_id != 0) {
$category_title = zen_get_categories_name((int)$new_products_category_id);
$title = '<h2 class="centerBoxHeading">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . ($category_title != '' ? ' - ' . $category_title : '' ) . '</h2>';
} else {
$title = '<h2 class="centerBoxHeading">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . '</h2>';
}

[/code]


Any thoughts on what could be wrong? I haven't done anything but edit the stylesheet with this information and edit the new product page with the code listed in this post. I also created and named the two image files. Other than that nothing else has been done.

[gjh42]

The New Products heading text is there, white on white, but the wrapper span is not in the output, nor in the PHP file. Put in the code indicated in post 13.

You aren't actually using "your_template" for a folder name, are you? In your case, it should be "arch_shoppe".

[welchyboy]

OK I think I am understanding the problem. I read through the code and it is still using the centerboxheadnew gif image which I renamed to make sure things were working. So i changed it back to the way it was and I do see behind my original header a piece of another one. So I must have missed something. Does the centerboxhead need to be blank or something. Also the image behind it looks a little weird. What are your thoughts on this. Here is the site again..

http://www.wpc-consulting.com/~stxmill/

By the way i did see the text which was the white on white. Nice observation on that one. Thanks for that.