Jump to content
Sign in to follow this  
winemonkey

Feature rounded corners and shadow

Recommended Posts

winemonkey    0
winemonkey

I've see many topics on the subject but none seem to work.

 

I need to add rounded corners to all my feature sliders... I have a lot of them, so I'd prefer CSS than editing each of them in Photoshop. Right now I'm using this: #feature-area {border-radius: 10px;} It seems to work on the first slide only. http://thewinesyndicate.ca

 

Also, is there a way to crank up the size of the shadow around the features?

 

Thank you,

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

I've checked your site but all the slides are showing rounded corners from what I can see, have you managed to fix this?

 

http://screencast.com/t/cmVCycCRZ

 

http://screencast.com/t/cy95ebrrM


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
winemonkey    0
winemonkey

Seems to be a Safari only issue... Any suggestions?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Try adding another line of code in addition to the one you have with the -moz- prefix.

 

eg: -moz-border-radius: 15px;

 

That should handle safari.


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
winemonkey    0
winemonkey

Just tried it... Didn't work. I guess I'll have to live with it.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi, ok downloaded safari and the inspector and had a play.

 

The following seems to work, I tried isolating some of the below to find the correct one, but it only seemed to take if they were all in place like they were in firebug - http://screencast.com/t/vvLkLmvp

.fset_height, #feature_slider .text-bottom .fmedia .fmedia-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .fmedia-pad {
-webkit-border-radius:20px;
}

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
winemonkey    0
winemonkey

Just tested on iPad/iPhone, etc... with Safari. Works perfectly. Thank you.

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, you're welcome, glad it worked :-)


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  

  • Similar Content

    • flaxpits
      By flaxpits
      Is there a way to use the whole image in the feature slider as a link? I have searched the forum and noticed in 2011 this was posted and the reply was no. Has anything changed in 4 years?
       
    • dfsdafd23
      By dfsdafd23
      I'm using features on the landing page of my website. My issue is that when the page loads the feature slider will resize itself every time. I've tried to tinker around with the layout of the site (static, responsive, %, px) and with the source images (not to big, the actual size) but it doesn't help. Any tips? 
       
      Here's a video of how it looks:
       
      https://dl.dropboxusercontent.com/u/766689/Features.mov
       
       
      Website URL: test.andersaagesen.dk
      Framework Version: 2.4.4 w. child theme
      WordPress Version: 4.2.1
      Plugins in Use: simple css lite, pagelines security patcher, contact form 7, backWPup
      Server/Host: unoeuro.com
    • chambermv
      By chambermv
      The features images are not displaying properly. The first image is blank and the second displays this script: if (document:)document.getElementbyld("divcb6b4a52").style.height = (441-440)+"px";
       
      There should only be 8 images to display, but it adds two images before that are blank and have that text I indicated.
       
      Website:
      http://chambermv.org/
       
      Platform Pro
    • avstrati
      By avstrati
      Hello 
       
      We've recently added the top rated Word Press translation tool WPML to our Website in order to translate our site into a second language. Everything worked like a charm, except one thing: the PlatformPro features. 
       
      Our home page was designed in English with the features slider and some text, using what is now the Select Feature-Set for Posts & 404 Pages option so that we could custom create our features. The features are tagged as default-features so that they may be selected to appear in the scroll. The thing is, we cannot translate them. 
       
      Can someone please help me figure out a work around please?
       
      Many thanks
      Kristina
    • vicdesotelle
      By vicdesotelle
      see of feature slider at http://wildbeyondexpeditions.com/ 
       
      1- how do i change position of feature slider text from left side to bottom of each pic? 
       
      2- how do i change font size of feature slider text? 
       
       
×