Need help applying a class to an image

[brooksie]

Hi Folks

I’m new here so please be gentle. I’ve turned to this forum for help understanding an issue with classes. I’ve changed to a new CMS system which, like many others, allows images to be added to a page. There is a class called .img-shadow that worked on my previous system but not now.

If you look at this snippet, the first image correctly shows the shadow but this was done by editing the html. The second image’s code was produced using only the image selectors offered by the new CMS and this time doesn’t produce the shadow.

Sadly, I’m not a css guru so could someone help me here? I’d prefer to find a way round this using the inbuilt options rather than have to edit the html for every single picture, and there are loads.

Here’s the css for this class.

img {

margin: 3px;

}



.img-shadow {

float:right;

background: url(../../images/drop.gif) no-repeat bottom right;

margin: 15px -5px 5px 15px !important;

margin: 15px 0 10px 15px;

}



.img-shadow img {

display: block;

position: relative;

background-color: #fff;

border: 1px solid #000;

margin: -10px 10px 10px -10px !important;

margin: -10px -2px 10px -10px;



padding: 0;

}

If you want to see what I’m talking about, the sample page is here: http://www.brooksie.com/smolyanhouse

Many thanks

Brooksie

[KelvinAlf]

Hi Brooksie,
You can do one of two things, apply the class to a div and enclose the img tag in the div or add padding to the class .img-shadow and take off the border as it will be pushed around oddly if not. If you add padding to the .img-shadow you might want to position the background so you can get the offset effect.

[brooksie]

Hi KelvinAlf

Many thanks for your swift reply. Wow!!

As you’ll have seen from the link, the shadow works fine in the first image.

I think I’ve already done what you said by enclosing it in a div, as in the first html line.

What I was really after, I suppose, was a way to rewrite the css so it would work with the second html line using ‘img class=….’.

It worked in the old CMS, Joomla, so I don’t know what’s different.

Thanks

Brooksie

[brooksie]

Incidentally, the link has the full stop included and so appears not to work.

It’s fine now but here it is again:

http://www.brooksie.com/smolyanhouse

Cheers

[dclardy64]

The problem appears to be the inline-styling that is applied by the CMS. It is over-riding your styling. Can you remove that inline styling from the CMS?

[brooksie]

Hi dclardy

Many thanks for your reply.

Well, I’ve had a good look and really the only place that could happen, I suppose, is when the TinyMCE editor has a go. If I remember rightly, that was the same editor I used in Joomla.

Oh dear, I don’t know what to do now. I really don’t fancy changing the code for over 50 images.

Any other thoughts?

Thanks

Brooksie

[xpy]

I think you should use some JavaScript to wrap your images with a

tag or just use a CSS3 box-shadow which may have some compatibility issues with ie….

[dclardy64]

What are you using now? WordPress?

[dclardy64]

Okay. It is not that. You are placing the images completely different. One is just an inline image insert, and the one that works is an image placed inside of a div. I think that you can change how tinymce handles images.

[brooksie]

I was using Joomla, which was overkill, so now I’m trying ‘CMS Made Easy’. One of its advantages is that you can take an ordinary HTML page and make it work easily. That’s why I’d like to use it.

Yes, the two images are to show how it was in Joomla and how it is in CMSMS.

You’re right about changing TinyMCE, I was reading something in that vein. However, being a bit slow, I wouldn’t know how to tweak it. The module that allows the settings to be changed in CMSMS doesn’t have anything that can change ‘inline’ to ‘classes’.

Do you know if any of these can be changed in the module’s PHP files?

Many thanks again

Brooksie

[dclardy64]

I know that you can change that, but it is about my knowledge of TinyMCE.

[brooksie]

Ok, thanks for your help. I’ll have to try the TineMCE forums next as it’s not a CSS matter.

I’m very grateful for everybody’s help on this issue and I’m sure I’ll be back again to illicit more from you guys.

Now, let me see, how can I give back?

Cheers

Brooksie

[brooksie]

Well, I’m back.

The solution was to use ‘box-shadow’.

I’d never heard of it before, but I gather it’s been around for years!! What surprised me was that using it made TinyMCE behave properly and put it in a div!!

Wonder why that was?

Anyway, this makes my life sooooo much easier.

I’ve read that not all browsers respond properly to it, but I think that’s a price I’m prepared to bear.

Thanks again to everyone.

Brooksie

[Author]

Posts