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] Putting radius on corners of Header Image


  #1  
Old Feb 1, 2010, 04:53 PM
nwheal
 
7 posts · Feb 2010
Hi

Very new to the theme but think it is great.

I was wondering if it possible to put a radius on the corners of the header image in some way that does not mean me re-editing all header images in Photoshop.

Can this be done in one of the style sheets.

I do not want to put a border round the images just a radius of 10 or 20 pixels.

Regards

Nigel
  #2  
Old Feb 1, 2010, 05:03 PM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
This will do it for the top left and right corners. add it to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
/* ================================================ */
/* 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;
}
/* ======================= */
/* end Replacement Header Image Container */
/* ======================= */
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 1, 2010, 05:09 PM
nwheal
 
7 posts · Feb 2010
Quote:
Originally Posted by juggledad
This will do it for the top left and right corners. add it to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
/* ================================================ */
/* 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;
}
/* ======================= */
/* end Replacement Header Image Container */
/* ======================= */
Juggledad

Many thanks for the information, I have just inserted that into the location you mentioned and instead of using the top left and right commands I tried the -webkit-border-radius: 10px; and it seems to be working fine.

Is there any reason not to use the -webkit-border-radius: 10px;....

regards

Nigel
  #4  
Old Feb 1, 2010, 05:37 PM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
No you can use that, The example I grabed was from a site where I wanted the top corners rounded and the bottom squared. Note this won't work in IE since it doesn't support it. and you need the '-moz...' for firefox
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 2, 2010, 04:19 AM
nwheal
 
7 posts · Feb 2010
Juggledad

I was testing the site about an hour after feeling really please with getting it to work.

During that time I decided to open the site with 3 other browser..... once I did that I returned to your post and used your method.



Nigel

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Putting adsense above or below the header image area... saifullahraza Header configuration & styling 6 Nov 20, 2010 05:21 AM
Putting an Image in sidebar widgets ChrisPanimation Sidebars & Widgets 1 Jan 20, 2010 11:27 PM
Error message about border-radius paulae Atahualpa 3 Wordpress theme 2 Oct 31, 2009 07:45 AM
[SOLVED] Any way to set style for Header Image (Rounded corners) juggledad Header configuration & styling 5 Apr 10, 2009 02:53 PM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 04:08 PM


All times are GMT -6. The time now is 08:21 PM.


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