6 replies to this topic

[James B]

Hi everyone, I've created in photoshop a border with some shadowing on the inside edge to frame the feature slider (the file has been saved as png). Obviously for this to show it will have to be overlayed on the featured slider, the same as the text area is. Can anyone help me with the css to actually make this happen? I've got so far and then hit a wall... I'm in the early stages of learning CSS. Thanks in advance J

[Jenny]

You would have to provide us with a link to your site with the feature active as well as a link to the uploaded photo, then we can attempt to help with CSS. I haven't done anything like that before but would love to try to figure it out.

[James B]

Hi Jenny, thanks for your reply. I've not actually got the site online at the moment, its on my local machine so will try get it uploaded. An example of this feature slider effect though is on this website.

Please Login or Register to see this Hidden Content

When you look at the PSD files the feature has a image attached to it, which is an empty frame saved as a PNG with a slight shadow on the inside edge. This is overlayed on to of the feature. Looking at there live preview in firefox the code that I can see is the following;

http://elegantthemes.../03/slide-1.png);"> Any ideas would be much appreciated.

• Back to top

[catrina]

Please Login or Register to see this Hidden Content

<- This is the overlay image, which is added after the img tag for the slide image. I'm not sure how this is being implemented to go on top of the slide image and I'm sure there is much more to their coding, but on your site perhaps it is possible with CSS that can position the overlay image directly on top of the slide. Example:

Please Login or Register to see this Hidden Content

This will require a lot of tweaking.

[James B]

Hi Catrina, thanks for your response. Thats a shame, I didn't realise it would be so difficult to put into effect. I've tried the CSS you've suggested and unfortunately it didn't work. I'll have a look into it and see if I can find any other ways to implement it, if I do I'll let you know. Thanks J

[catrina]

This probably the last alternative: If your entire slider is just going to be a background image, you can add that overlay on top of the image in Photoshop and make it work that way.

[James B]

Hi Catrina, I've just found out that the slider used in that example was a JQuery slider, custom built. I'll have to add Jquery to my list of "things to learn", thanks for all your help though, I will probably go for the easy option and add it to the PSD file like you said.