Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Any way to set style for Header Image (Rounded corners)


  #1  
Old Mar 19, 2009, 08:58 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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'

Last edited by juggledad; Mar 23, 2009 at 02:09 PM. Reason: found a solution by editing the style.css
  #2  
Old Mar 21, 2009, 06:59 PM
wrastler
 
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.
  #3  
Old Mar 23, 2009, 01:29 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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."
  #4  
Old Mar 23, 2009, 02:07 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...

Last edited by juggledad; Mar 23, 2009 at 02:18 PM.
  #5  
Old Mar 28, 2009, 02:54 PM
zizi
 
29 posts · Mar 2009
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.
  #6  
Old Apr 10, 2009, 02:53 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Need rounded off corners on menu boarders nickcee Page & Category Menu Bars 4 Nov 21, 2013 11:47 AM
[SOLVED] where to style comment container? (rounded corners) mirdin Comments, trackbacks & pings 6 Nov 3, 2009 12:50 PM
[SOLVED] My header image disappeared??? CreativePartyLady Header configuration & styling 2 Jul 12, 2009 09:53 AM
Set background image in a post She Bear Forum How-To 8 Apr 6, 2009 07:01 PM


All times are GMT -6. The time now is 02:54 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.