Great Theme, I'm having fun discovering the power of it!

I have changed my site to have rounded courners (Layout->Layout Container Style: Border radius) and it looks just like I want. I have %image as the first item in the Header->Configure Header Area. But this causes a rectangular image to be shown right next to the curved outline of the container.

I tried curving the actual image (boy was that a job finding out how to do it) and I loaded the image, but when I looked at it, it was still a right angle in the header. After banging my head a bit, I realized my image was wider than the layout (duh) because I'm trying to be flexable for people with wide screens.

Looking at CSS, there seems to be a 'roundtop' option for a 'div class' so my question is this:

Is there a way to do any IMAGE Styling?

if not, I like to suggest two things:
1) add an image styling section
2) add an option so that if you round the layout, the rounding would apply to the top item in the 'Configure Header Area'

Hey Juggle,

I used the border-radius: 10px; function and nothing happened. But whatever, I'm more curious about rounding your header image.

Did you do this with photoshop? Or with the html/CSS coding? And if you did it with the coding, can you break it down for me please.

I'm super confused.

Thx.

Hey Wrastler
1) the rounded corners show up great in Safari and Firefox, but don't in Internet Explorer
2) I used GIMP to round the edges of the photo (I'm using a Mac). There are ways to do it in photoshop (google 'photoshop rounded corners'), but I've got Photoshop Elements and couldn't figure out how to do it.

What I want, is a CSS solution so you can say "Make my 90-degree-cornered images show up with rounded courners."

WOW, I did it!!

I edited the style.css and changed

.header-image-container {
position: relative;
margin: 0;
padding: 0;
/* more ... */
/* background: (= header image) will be added in bfa_header_config.php */
}

to this:

.header-image-container {
position: relative;
margin: 0;
padding: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
/* more ... */
/* background: (= header image) will be added in bfa_header_config.php */
}

and it works great in Safari and Firefox. (note, I made the header radius 10 smaller than the layour radius (which was 30) and it looks great

Now if we could just talk Flynn into adding this as an option somewhere...

Thanks for the GIMP software! That is the only one I can afford.

Do you know some other program that can do the illustrator job ?

Again, thanks a lot.

Ok, I just discovered an easier way to do this. Do NOT edit the style.css, just go to
Atahualpa Theme Options -> HTML/CSS Inserts ->CSS Inserts and insert the following:

/* ================================================ */
/* Replacement header-image-container to rounded the top corners of the image */
/* ================================================ */
.header-image-container {
position: relative;
margin: 0;
padding: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
/* more ... */
/* background: (= header image) will be added in bfa_header_config.php */
}
/* ======================= */
/* Replacement Header Image Container */
/* ======================= */

and your done.