Jump to content
Sign in to follow this  
James B

Adding a custom border, with inner shadow to frame features.

Recommended Posts

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
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. ;)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
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. http://www.elegantthemes.com/demo/?theme=SimplePress 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;

Share this post


Link to post
Share on other sites
catrina
http://www.elegantthemes.com/preview/SimplePress/wp-content/themes/SimplePress/images/slider-overlay.png <- 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: [code]{background-image: url('http://'); position: absolute; top: NUMBERpx; left: NUMBERpx;}[/code] This will require a lot of tweaking.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
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.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
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.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×