Swapping img css from within a view [#1677972]

Hi,

This is more of a how too question rather than a support request

I have a load of transparent images on my site and I would like to have instances when I show the nice journal crunch white image boarders and at other times when I want maintain transparency as an option.

I have made a change to the styles.css

#content img { background: none repeat scroll 0 0 #EEF2F2; border: medium none; padding: 10px; }

Adding the line as a transparency option
#content img-transparency { background: none repeat scroll 0 0 rgba(238, 242, 242, 0); border: medium none; padding: 1px; }

The in views, under 'Other' then 'CSS Class' I enter 'img-transparency' as the new class. - saving then flushing the cache.

The resulting view is showing the same output as before (I can see that it is still referencing the original 'img' class in the style.css ) this is despite the html returning the new css (below)

<div class="content img-transparency background none repeat scroll 0 0 rgba(238, 242, 242, 0); border: medium none; padding: 1px; "><a href="/?q=taxonomy/term/45"><img typeof="foaf:Image" src="http://www.hoohahouse.net/sites/default/files/styles/thumbnail/public/terrence.png" width="100" height="100" alt=""></a></div>

Questions – is there a way to prevent the over-riding theme from always being displayed. And can you tell me what should be attempted in order to be able to return the desired theme style.

Thanks for your advice

Luke

Comments

Comment #1

pwhiteside CreditAttribution: pwhiteside commented 21 July 2012 at 10:35

Hi,

I'm not sure if I fully understand what you are asking but....

<div class="content img-transparency  background none repeat scroll 0 0 rgba(238, 242, 242, 0); border: medium none; padding: 1px;  ">

The above ^^ code sets a class of "content" and "img-transparency" and "background" and etc... when only the new "img-transparency" is needed to be outputted by views which will link to the code in your css sheet.

Secondly, you are adding a class in views where as your code below is an ID "#" not a class ".".

#content img-transparency {
    background: none repeat scroll 0 0 rgba(238, 242, 242, 0);
    border: medium none;
    padding: 1px;
}

I think it should include a dot ".",

#content .img-transparency {
    background: none repeat scroll 0 0 rgba(238, 242, 242, 0);
    border: medium none;
    padding: 1px;
}

Lastly adding "!important" at the end of css will mean that it will override any code that has been loaded including inline code so I think the code should also include this if it is not overriding. I would use the following code.

#content .img-transparency {
    background: none repeat scroll 0 0 !important; 
    background-color: rgba(238, 242, 242, 0) !important;
    border: medium none !important;
    padding: 1px !important;
}

I hope this helps or at least point you in the right direction.

Best wishes, Phil.