Comments on: My two cents on rounded-corner markup http://www.the-haystack.com/2006/03/16/rounded-corners/ Web, design, and web design Tue, 06 Jan 2009 02:21:36 +0000 http://wordpress.org/?v=2.5.1 By: Matthew http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-2427 Matthew Fri, 06 Oct 2006 01:46:16 +0000 http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-2427 I realize that this is an old article but I have to thank you. I've been working on getting rounded corners for many hours now and haven't been able to. This is the first technique I've found that worked fairly easily in my situation. I had to do a little tweaking (probably due to my poor CSS hacking) but everything fell together very quickly. I realize that this is an old article but I have to thank you. I’ve been working on getting rounded corners for many hours now and haven’t been able to. This is the first technique I’ve found that worked fairly easily in my situation. I had to do a little tweaking (probably due to my poor CSS hacking) but everything fell together very quickly.

]]> By: Stephen http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-68 Stephen Mon, 24 Apr 2006 07:09:00 +0000 http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-68 Joel: To be frank, I haven't tried this in WP, so I'm not sure what exactly would be involved. I would imagine that you could add the style definitions to the main stylesheet of the theme you're using, and the HTML to the markup in your post template. It shouldn't matter where you place the image, as long as it's referenced correctly from the stylesheet. With CSS, you'll have to be aware of potential class/id conflicts between the existing CSS and this new code. I don't expect problems, but knowing your theme stylesheet well will help you solve any problems you might have, The WordPress <a href="http://codex.wordpress.org/" rel="nofollow">Codex</a> could probably tell you most of what you'd need to know. Good luck with it! Joel: To be frank, I haven’t tried this in WP, so I’m not sure what exactly would be involved. I would imagine that you could add the style definitions to the main stylesheet of the theme you’re using, and the HTML to the markup in your post template. It shouldn’t matter where you place the image, as long as it’s referenced correctly from the stylesheet. With CSS, you’ll have to be aware of potential class/id conflicts between the existing CSS and this new code. I don’t expect problems, but knowing your theme stylesheet well will help you solve any problems you might have,

The WordPress Codex could probably tell you most of what you’d need to know. Good luck with it!

]]> By: Joel http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-67 Joel Mon, 24 Apr 2006 00:45:17 +0000 http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-67 Thanks for the great explanation on your approach! Due to my self-taught amateur abilities I have some (hopefully simple) questions that I'm hoping you might be able to assist with... My goal is to implement image borders with rounded corners for all of the posts on my WP site - well, at least all of the post that have images (see the site link for more detail). The result will hopefully be close to what they have achieved on the Lifehacker.com site. Ideally this would formatting of images would occur automatically. Also, Im currently using a customized kubrick theme - the default theme with which WP installs. It appears you have approached this by addressing 3 seperate elements; html, css & a single image. I have a few questions on each one: When adding the css rules, should this be done in the styles.css file? Since this rule should only to apply as previously stated, is there additional coding that needs to be entered? In your method, must the HTML go in each post as desired or could it be placed in one of the templates (which one) to avoid repetition? As long as it's properly referenced, placing the image in the wp_content/images/ should work fine? Given that the images frequently have non-uniform dimensions, would a simple square work successfully? Sorry for such trivial questions, but any help you might provide would be greatly appreciated! Thank you. Thanks for the great explanation on your approach! Due to my self-taught amateur abilities I have some (hopefully simple) questions that I’m hoping you might be able to assist with…

My goal is to implement image borders with rounded corners for all of the posts on my WP site - well, at least all of the post that have images (see the site link for more detail). The result will hopefully be close to what they have achieved on the Lifehacker.com site. Ideally this would formatting of images would occur automatically. Also, Im currently using a customized kubrick theme - the default theme with which WP installs.

It appears you have approached this by addressing 3 seperate elements; html, css & a single image. I have a few questions on each one:

When adding the css rules, should this be done in the styles.css file? Since this rule should only to apply as previously stated, is there additional coding that needs to be entered?

In your method, must the HTML go in each post as desired or could it be placed in one of the templates (which one) to avoid repetition?

As long as it’s properly referenced, placing the image in the wp_content/images/ should work fine? Given that the images frequently have non-uniform dimensions, would a simple square work successfully?

Sorry for such trivial questions, but any help you might provide would be greatly appreciated! Thank you.

]]> By: Stephen http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-28 Stephen Tue, 18 Apr 2006 18:28:03 +0000 http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-28 Richard: 1. I admittedly did not spend much time attempting to make the corners as smooth as they could be. They probably could be better, but for really smooth corners you'll either have to use an alpha channel (PNG-24, for which browser support is momentarily insufficient), or use a separate image for each color, anti-aliasing to the specified color in each corner (see the <a href="/playground/rounded-corners/">example</a>, I've updated it). 2. To square some corners, simply remove the declarations for those corners. For example, to square (or "un-round" ;-)) the top right corner in the above example, you would remove the declaration for ".boxhead" from the stylesheet (or at least the background property). I hope this answers your questions! Richard:

  1. I admittedly did not spend much time attempting to make the corners as smooth as they could be. They probably could be better, but for really smooth corners you’ll either have to use an alpha channel (PNG-24, for which browser support is momentarily insufficient), or use a separate image for each color, anti-aliasing to the specified color in each corner (see the example, I’ve updated it).

  2. To square some corners, simply remove the declarations for those corners. For example, to square (or “un-round” ;-)) the top right corner in the above example, you would remove the declaration for “.boxhead” from the stylesheet (or at least the background property).

I hope this answers your questions!

]]> By: Richard http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-27 Richard Mon, 17 Apr 2006 21:35:53 +0000 http://www.the-haystack.com/2006/03/16/rounded-corners/#comment-27 This is one of the simplest, easiest to manage, and most apprpriate examples for rounded corners that I have seen. I have two questions. How can your corners have edges that are more smooth? How could you give some corners round and some squared? Best, Richard This is one of the simplest, easiest to manage, and most apprpriate examples for rounded corners that I have seen.

I have two questions.
How can your corners have edges that are more smooth?
How could you give some corners round and some squared?

Best,

Richard

]]>