Overriding CSS styles hardcoded in to the software.

[Historical Forums User]

Hey guys,

So I am working on an Ecommerce site, that uses Volusion, for a customer here: http://dkurf.esxsb.servertrust.com/default.asp (Don’t judge me yet! It’s not anywhere close to being finished.) If you look at how products are displayed on the homepage and throughout the different categories, you can see they are kind of ugly. So I am trying to style these, but they are table based and all of the html and css, for the product display settings, are installed directly into the Volusion software. How would I override these settings? I talked to customer support and technically they aren’t allowed to help with custom coding, but this is what they said:

“They are actually hardcoded into the software. There isnt any way else to configure their display other than using JQUERY to override css based on TD class attribute (advanced jquery)”

I am pretty clue-less when it comes to jquery. So where should i start on this? And is this even my best option?

Thanks for your help.

[alexh58]

You could use this: https://css-tricks.com/override-inline-styles-with-css/ if you don’t care about ie6, cause I don’t.

Or you could do jQuery, but you might find yourself writing more than you want to… an example

$('td').removeClass('newClassName'); // this removes the provided class name of all tds

// or

$('td').removeAttr('width'); // this removes the width attribute of all tds

// or

$('td').css('width', '30px'); // this makes an inline width definition of 30 pixels

// also, in jQuery 1.4 and higher

$('td').css({'width' : '30px', 'height' : '50px'}); // feeding css values as a JSON array

Hope that helps!

[Historical Forums User]

Thanks man that worked! But now what im running into is that the class “v65-productDisplay” styles a table around all of the products (if you take a look at my homepage you can see what im talking about. It is styled with a red background.) So how do i target the product image itself? I just can’t figure out how to target that specific table because i haven’t much experience with tables. I’m lucky i guess… but if you had any suggestions that’d be great. Here it the html for the tables. I need to style the td.

[Paulie_D]

EDITED:

Can you not edit the default asp file and remove these inline styles?

Then target them in the template css file directly.

[Historical Forums User]

Thats the problem…. the default.asp file is directly in the software, so i have no access to it. So i have figured out how to style the v65-productdisplay with and “!important” tag, But i need to style the td that is within that table. But i have yet to figure how to do that.

[Paulie_D]

The answer is no then, If you don’t have control over the basic template (which seems odd) then you are, in a word, screwed.

The ‘software’ provider has decided (for some unearthly reason) that these will be the color he wants. You have to deal with that. Frankly, I think it’s very odd that this can’be customised but if that’s what they are telling you….you’ll have to live with it…or use another template.

Do they offer a ‘custom’ template option?

[alexh58]

This is just an exercise of crafting CSS selectors, the following selector will let you manipulate the image attributes.

$('.v65-productDisplay img').hide() // will hide all images inside an element classed as v65-productDisplay

If you know CSS you know how to select elements in jQuery!

[Paulie_D]

@alexh56 “If you know CSS you know how to select elements in jQuery!”

Wrong! I can do a hell of a lot in CSS but I have not the faintest clue about jQuery (although I’d like to).

In any case, he doesn’t want to hide the image, he wants to change the hardcoded styling. I don’t think your option will do that.

[alexh58]

@Paulie_D You should re-read my sentence… “If you know CSS you know how to select elements in jQuery!”

The hide function was just a way of showing you’ve selected the right element… He can use the other examples I gave originally with this selector to get the desired result.

[Paulie_D]

You should re-read my sentence.

You seem to think that everyone who knows CSS knows jQuery. This is not the case. I don’t and I’m sure I’m not alone.

Either way, he can select the element with jQuery but anything he does will not override inline styles (AFAIK). Aren’t they applied last?

[alexh58]

Why don’t you try it in code inspection my friend! I didn’t say you will know jQuery if you know CSS, I said you will know how to select elements in jQuery if you know CSS… End of story :)

And no, if you put your jQuery in a $(document).ready(); you will be fine… it will override the inline styles.

I’m not here to hold hands, I’m here to point you in the right direction.

[Historical Forums User]

Hey alex, I am kind of lost on whole jquery thing. How should i format that? Should i write the jquery in an external file and then just mention it in the head? Or should i write it directly in my css file with ?

Because the !important tag worked great for styling the .v65-product display but i need to target one of the tds, and i can not add a class to it. I don’t know how to style that without a class in css. So any advice would be great!

[alexh58]

In CSS to target the image you would do

.v65-productDisplay img { your styles here }

With that you’re targeting all images that are some child of the v65-productDisplay class.

[Historical Forums User]

Ok that works, but here is what i’m running into now: I can target either the image or the td, but when i do that it targets all of the them that are under .v65-productdisplay. Targeting the images would work great, but unfortunately the software, for whatever reason, uses clear gifs as separators between the products. So it is also styling those, which does not look good. So if you have ANY suggestions that would be greatly appreciated! Sorry for all of the questions, but you are really really helpful! Thanks.

[alexh58]

Well you could do it a number of ways, sorry I didn’t realize there were transparent gifs… sounds like a bad product!

Anyways, look here:

// you could use the fact that all product images are nested in links

.v65-productDisplay a img { styles here }



// or use the fact that your product images are .jpg

.v65-productDisplay img[src$='jpg'] { styles here }

The possibilities are endless, but the first option is definitely more browser compatible, the second one is just cool.

[Author]

Posts