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

[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.

[gjh42]

You have a lot of white space around the image in cornbg-l.gif. That's why you see the little corner of the image. You need to crop that to just the image. (Same with cornbg-r.gif, most likely.)

Also, you do need to uncomment the display: block;

    /*display: block;*/ /*this might be needed to make the span fill the heading*/

You need to change centerboxhead-new.gif to just the text on a transparent background, so you can see the cornbg images behind it.

[welchyboy]

Well that post was very helpful thank you for that. I am still having a little issues with it but it is looking better. It seems like the cornbg-l.gif is working just the way it should. Touches the left side just perfectly and looks great. However the cornbg-r.gif still looks like something is wrong in firefox. However in ie it looks much better but I can see where the two pieces meet with a line and it doesn't stretch all the way to the end. I then made it longer and still the same effect. Cornbg-l is most wider so is there a way to maybe to shift the right piece more the the left or at least where it meets the left piece more in the middle? I did uncomment what you said and cropped both images as well. I also made the centerboxehead image with just text and all of that seems to be working correctly. Just need better alignment and to work in firefox. Any thoughts on this.

[gjh42]

Your stylesheet as well as the page display show that you have not uncommented the display: block;
Make it like this:

.centerBoxHeadingWrapper {
    background-image: url(../images/cornbg-r.gif);
    background-position: top right;
    background-repeat: no-repeat;
    display: block;
    }

It seems that somehow .centerBoxHeadingWrapper is getting a strangely squeezed version of cornbg-l instead of cornbg-r.

And also, cornbg-r does not need to be so long - 100px or so should be enough.