Talk:Creating rounded corners

Where have my images gone?? --Mike 15:43, 14 March 2008 (EDT)

We're currently having problems with some images following an upgrade to the latest PHP, MySQL and Apache versions. The images are still there but MediaWiki is having trouble getting access to them. Please bear with us while we try to figure out where the problem is. Chris Davenport 17:37, 14 March 2008 (EDT)

Hello. Thanks for this tutorial, I just tried to create rounded corners with it. First I must tell you that I didn't test it inside Joomla, but with a simple html and css code copied from your tutorial. I noticed two little problems. The first one is transparency with corner images. Image 2 covers image 1, but as image 1 is higher and because of image 2 transparency, image 1 remains visible under image 2. Same problem with images 2 & 3, images 3 & 4. The result is really a mess ! So my solution was to add with Inkscape a 800x600 white filled rectangle in the background. The second problem is with div content. Module title and content sticked up from rounded area. So I had to add a <div> around title and content (starting before <h3> and ending after </ul>), and add a padding rule to the last style. My last css style is as follow : div.module_menu div div div div{ background: none; padding: 3px 15px; }

I don't know if these changes are required inside Joomla. I think I will try soon. But it could be useful to report my changes for people who want to use this method outside of Joomla. I don't know if I can edit the article for that. Can you tell me if it is a good idea ?

--Ptigrouick 22:17, 23 March 2008 (EDT)

Hi Ptgrouick! Yep, you are absoultely right on the transparency issue. You don't need to create a separate rectangle though - you can tell Inkscape to set a background colour when exporting to PNG. I will update the tutorial to reflect this. I'll look into your second issue and see if the page needs updating (or you are welcome to update it yourself!) --Mike 18:34, 29 March 2008 (EDT)

Can someone post the x0/y0 and x1/y1 coordinates that would be used to create all 4 images (assuming we are using the 800x600 format as noted in the tutorial)? Thanks in advance. ----Rostom 19:51, 13 November 2008 (EST)

@Rostom: You can use the following coordinates:

Top left: x₀=0, x₁=785, y₀=15, y₁=600

Top right: x₀=785, x₁=800 y₀=15 y₁=600

Bottom left: x₀=0, x₁=785, y₀=0, y₁=15

Bottom right: x₀=785, x₁=800, y₀=0, y₁=15

The value '15' comes from the distance between the edge of the image and the end of the curve at the rounded corner. The other (non-zero) values are the difference between 15 and the dimensions of the image. Mike 14:36, 15 November 2008 (EST)

Still having trouble getting this to work....

1. Can you please elaborate on the x/y coordinates. It takes an X and a Y coordinate to represent one single point. So I would imagine that you need four total points to designate where to cut from. But obviously this is not the case. How do you come up with just two points to tell Inkscape how to crop the image?

2. Using your coordinates, I was able to make four images (not sure if they are right; it would help if you had attached sample GIF/PNG images of what they are supposed to look like in the article). But this doesn't work as the box comes out very awkward looking--especially if I resize the window. I am using the exact same CSS as you have provided. I imagine I need to constrain the width and height on some of the Div tags maybe?

Thanks in advance. --Rostom 18:22, 3 December 2008 (EST)

@Rostom,

1. Inkscape can only export a rectangular section of the image, so you only need to specify the minimum and maximum x and y values. x0,y0 and x1,y1 define opposite corners of the rectangle.

2. I have placed PNGS of the sample images in the article. Note that the rounded corners will break if they are used for divs that are bigger than the size of your original image - as stated in the article, you need to make sure this original image is large enough to cater for your needs.

Also, the CSS indicated relates only to the rounded corners - you may need some other CSS depending on your content. I will try to have a play later and see.

Mike 09:46, 7 December 2008 (EST) I found the whole coodinate thing confusing. Great that it works in that particular program but I'm using Photoshop and if you could just add W x H statements to create each corner (I supposed it is proportional to radius setting) I might actually grasp what is going on with the css.