URGENT - listgrid style

[acarur01]

I'm trying to override the way listgrid looks and I'm stuck with one part (screenshot attached)

When I try to use firebug or chrome inspect element, I cannot find the entry for this part of the header. Basically, I want to remove that headerBar image. I've already overwritten the following for header:

.headerTitle,.headerBar,.headerButton{
 font-weight: bold;
 font-size: 11px;
background-color: #D6D6D6;
 border-color: #999999;
border-width: 1px;
vertical-align: top;
}

[Isomorphic]

That's a CSS background-image so you'd need to set background: none.

[acarur01]

Thanks! actually just tried that.

[acarur01]

I'm having the same issue with SectionHeader - (screenshot attached). I dont see anything else I could be missing

sectionStack {
    border-left:1px solid #A6ABB4;
    border-right:1px solid #A6ABB4;
    border-bottom:1px solid #A6ABB4;
	 background-image: none;
}

/* SectionStack headers - image based */
.imgSectionHeaderclosed,
.imgSectionHeaderopened,
.imgSectionHeaderDisabledclosed,
.imgSectionHeaderDisabledopened {
 background: none repeat scroll 0pt 0pt #CDD8E4;
 background-image: none;
 color: #000000;
 font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 2px;
}
.imgSectionHeaderTitleclosed,
.imgSectionHeaderTitleopened,
.imgSectionHeaderTitleOverclosed,
.imgSectionHeaderTitleOveropened {
    background: none repeat scroll 0pt 0pt #CDD8E4;
	background-image: none;
    font-family:Arial,Helvetica,sans-serif; font-size:12px;
    border-left:5px;
	font-size: 14px;
	font-weight: bold;
}

.imgSectionHeaderTitleDisabledopened,
.imgSectionHeaderTitleDisabledclosed {
     background-image: none;
    font-family:Arial,Helvetica,sans-serif; font-size:12px;
    color:#CDD8E4;
    border-left:5px;
}

.sectionHeaderTitleopened, 
.sectionHeaderTitleclosed {
    font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#CDD8E4;
		background-image: none;
		
}
.sectionHeaderTitleDisabledopened, 
.sectionHeaderTitleDisabledclosed {
    font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#808080;
	background-image: none;
}
/* SectionStack headers - css based */
.sectionHeaderopened, 
.sectionHeaderclosed {
    font-family:Arial,Helvetica,sans-serif; font-size:12px;
    padding:3px;
	background-image: none;
    border: 1px solid #A6ABB4;
}

.sectionHeader{
	background-image: none;
}

[Isomorphic]

What skin is this all based on? That looks like you're using the StretchImg-based SectionHeaders rather than the simpler CSS-only ones in some skins (such as Simplicity). If so, you need to change the "src" attribute in load_skin.js to change the images being loaded.

Also, why are you removing all images??

[acarur01]

This is based on Enterprise Skin. Unfortunately, some customers want to revert to an old look-and-feel which do not use images for the headers

[acarur01]

So there's no way around this problem by just modifying css?

[Isomorphic]

Whatever you're older look and feel was, it probably didn't use many images and perhaps no StretchImgs at all, right? If you, you might be best off starting from Simplicity, which uses a minimal of images, and where in most places you'll be able to just change color values in the CSS to get what you want.

[acarur01]

We've changed far too much according to Enterprise Skin. There's really no other way?

[Isomorphic]

The Skinning Guide explains how to customize a StretchImg, and you can even switch the class being used to render SectionHeaders so it uses the simpler ImgSectionHeader as in the Simplicity skin. But no, not everything is in CSS. That's not even remotely close to possible in IE6.

[acarur01]

ah ok thanks.