Rounded borders on page-wrap

[Gor]

Hi Bill,

I have rounded the nav-bar borders with this code:

#nav-bar {
border-radius: 20px;
-moz-border-radius: 10px;
overflow: hidden;
}

but I´m trying to do the same thin with the page & slideshow content but I can´t, could you help me?

http://misscrap.com/blog/

Thanks,

Gor

Attachments:

1. 

   borders.jpg
   

[Bill Robbins]

Good Afternoon,

Great question. You can round those corners. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .front,
   .flexslider img {
   	border-radius: 20px;
   	-moz-border-radius: 20px;
   	-webkit-border-radius: 20px;
   }
   

3. Update your settings.

See if that won't do it for you. If you have any trouble, let me know.

Thanks,
Bill

[Gor]

Good evening,

Maybe I´m didn´t expressed well, my English still is limited … I have to learn a bit more 😉

With the code you’ve provided I solve the slider cover ( perfectly ), but I also like to add that property to all the pages and posts. All templates roundered.

I have no words for how fast you solve my doubts, I´m very glad.

Regards

Gor

[Bill Robbins]

You’re right. I did miss the inside page. Try this instead of the code above:

.front,
.flexslider img,
#page-wrap {
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

If you have any trouble, let me know.

Thanks,
Bill

[Gor]

Good morning Bill

I’ll add some pictures of example, I think a picture is better than a thousand words 😉

With green circle I remarked the areas that should disappear.

The pictures I have taken are from my pc and my smartphone ( those are the supports with which I can make comparisons ).

Custom Css code I have used:

#nav-bar {
border-radius: 20px 20px 0px 0px ;
-moz-border-radius: 10px;
overflow: hidden;
}

.front,
.flexslider img,
#page-wrap {
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

Web home page picture is like I want all the templates.

sorry for the inconveniences

Attachments:

1. 

   blog.jpg
   

2. 

   page-pc.jpg
   

3. 

   home-page.jpg
   

4. 

   home-page-Iphone.jpg
   

[Gor]

There are two more pictures left

Attachments:

1. 

   iphone-blog-page.jpg
   

2. 

   page-Iphone.jpg
   

[Bill Robbins]

Good Morning Gor,

Let’s give this a try. Add this code to your Custom CSS box:

@media only screen and (max-width: 767px) {
	
     .flexslider img {
          -webkit-border-radius: 0px 0px 20px 20px !important;
          border-radius: 0px 0px 20px 20px !important;
     }
	
}

.wrap {
     border-radius: 20px;
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     overflow: hidden;
}

See if that won’t fix the corners on your iPhone and also the inside pages. Let me know if you have any trouble.

Thanks,
Bill

[Gor]

Well done Master !!

I have tried in to ways. At last this is all code I have added to work fine:

#nav-bar {
	border-radius: 20px 20px 0px 0px ;
	-moz-border-radius: 10px;
	overflow: hidden;
}

.front,
.flexslider img,
#page-wrap {
        border-radius: 20px 20px 20px 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
}

@media only screen and (max-width: 767px) {

     .flexslider img {
          -webkit-border-radius: 0px 0px 20px 20px !important;
          border-radius: 0px 0px 20px 20px !important;
     }

}

.wrap {
     border-radius: 20px;
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     overflow: hidden;
}

and it seems it works perfectly.

Thank you very much.

Gor

[Bill Robbins]

So glad that you’ve got a solution that works.

If you need anything else, just let me know.

Have a great day,
Bill

[Author]

Posts