Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Automatic resizing of the header image


  #26  
Old Apr 14, 2009, 07:41 PM
Jayce
 
14 posts · Apr 2009
Done!

Jayce
  #27  
Old Apr 17, 2009, 01:45 PM
StevenT
 
3 posts · Apr 2009
I've made the changes and got the resize to work which is great. I removed the # from <?php bfa_header_config($bfa_ata_configure_header); ?> and also removed %image from configure header area but my menu pages are still gone. I had them under the image so I'm wondering if I did something wrong. Any thoughts?

site is adailydad.com

Thank you for the help.
  #28  
Old Apr 17, 2009, 05:47 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by StevenT
I've made the changes and got the resize to work which is great. I removed the # from <?php bfa_header_config($bfa_ata_configure_header); ?> and also removed %image from configure header area but my menu pages are still gone. I had them under the image so I'm wondering if I did something wrong. Any thoughts?

site is adailydad.com

Thank you for the help.
Do you have %pages still in Theme Options -> Header -> Configure Header Area?
  #29  
Old Apr 17, 2009, 09:37 PM
StevenT
 
3 posts · Apr 2009
Yes. It's listed as follows:

%bar2 %pages %bar1

I put the %bar1 in to see if it made a difference. I can reload the old header.php and remove the css styling bit and it shows up? I copied the codee directly from your post so not sure what I did wrong. I love the resizing though, just need to get the menu back.
  #30  
Old Apr 17, 2009, 11:45 PM
kevjazz
 
6 posts · Apr 2009
Dear All,
I'm a blind user who has just started a blog and who has discovered this theme. I think I can understand some of this image resize code. I can forward this thread to the guy who is helping me launch my podcast to figure out the rest. I have two questions:
1. Is it possible to put the header and tag line text,not a bitmapped image of text, in the center of the header image?
2. If I'm having trouble with the resizing thing, what is the best generic header image size for one image that occupies all three panes of the header?
Thanks,
Kevin
PS. Because I'm blind, I may not see the answer if any. Could those of you who can answer this, send an e-mail to kevjazz@gmail.com. I use a screenreader and I had a heck of a time putting this post in this forum. Hope I did it right.
  #31  
Old Apr 18, 2009, 11:08 AM
maxy
 
1 posts · Apr 2009
www.joecrogan.com

I absolutely love the theme!

This is my first try at making a website, I have made a few amendments from reading your other threads – very useful!

I feel this time I need some extra guidance.

I basically use a block image above my sidebars to act as my logo, so that I can have my content at the top of the site. Therefore I don’t have a header image.

But I still have the same problem with resolution. I have developed the site with a max resolution display, and as a result the site looks terrible in the common 1224x768.

Is there any way to edit all text and images on the site so that they change dependent on the screen resolution?

Do I edit the text so that I use % rather than px? And the same with any image I attach/embed?

Thanks in Advance,
Graeme
  #32  
Old Apr 18, 2009, 01:09 PM
StevenT
 
3 posts · Apr 2009
As I listed above I have %bar2 %pages %bar1 in Theme Options -> Header -> Configure Header Area. Here is my header.php, maybe I did something wrong?

// without caption
$bfa(".post img").each(function() {
var maxwidth = centerwidth - 10 + 'px';
var imgwidth = $bfa(this).width();
var imgheight = $bfa(this).height();
var newimgheight = (centerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > centerwidth) {
$bfa(this).css({width: maxwidth});
$bfa(this).css({height: newimgheight});
}
});
// headerimage
var headerwidth = $bfa("td#header").width();
$bfa("#headerimage").each(function() {
var maxwidth = headerwidth + 'px';
var imgwidth = $bfa(this).width();
var imgheight = $bfa(this).height();
var newimgheight = (headerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > headerwidth) {
$bfa(this).css({width: maxwidth});
$bfa(this).css({height: newimgheight});
}
});
// with caption
$bfa("div.wp-caption").each(function() {
var captionwidth = $bfa(this).width();
var maxcaptionwidth = centerwidth + 'px';
var captionheight = $bfa(this).height();
var captionimgwidth = $bfa("div.wp-caption img").width();
var captionimgheight = $bfa("div.wp-caption img").height();
if (captionwidth > centerwidth) {
$bfa(this).css({width: maxcaptionwidth});
var newcaptionheight = (centerwidth / captionwidth * captionheight) + 'px';
var newcaptionimgheight = (centerwidth / captionimgwidth * captionimgheight) + 'px';
$bfa(this).css({height: newcaptionheight});
$bfa("div.wp-caption img").css({height: newcaptionimgheight});
}
});
}


The second part:
<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">
<a href="<?php echo get_option('home'); ?>/"><img id="headerimage" src="http://adailydad.com/wp-content/themes/atahualpa/images/header/Banner3.jpg" alt="<?php bloginfo('name'); ?>" /></a>
<?php bfa_header_config($bfa_ata_configure_header); ?>

</td>
<!-- / Header -->


In the CSS inserts:
img#headerimage{
max-width: 100%;
width: auto 100%;
}
img[id~=headerimage] {
height: auto; /* hiding from IE6 */
}



Only thing different from the originals is that when I added the theme I put the 3.2 atahualpa version in the atahualpa folder I had already created. Would that cause an issue? Maybe the old atahualpa is being called somewhere else?

Steven T
  #33  
Old Apr 19, 2009, 04:58 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
To kevjazz:

To center the blog title, do this:

1. Go to "Atahualpa Theme Options" > "Header Image", and set these options:
"Overlay Blog TITLE over Header Image(s)?" > YES
"Overlay Blog TAGLINE over Header Images(s)?" > YES

Into the textarea titled "Overlayed Blog Title/Tagline Style" put this:

HTML Code:
 float:none; 
margin-left:auto; 
margin-right:auto;              
text-align:center;
Click "Save Changes" at the bottom of the page.

2. Go to "Atahualpa Theme Options" > "HTML/CSS Inserts" and into the textarea titled "CSS Inserts" put this:

HTML Code:
 div.header-image-container { 
padding-top: 30px; 
height: 150px; 
}
Click "Save Changes" at the bottom of the page.

I have sent this to your email address as well.
  #34  
Old Apr 19, 2009, 05:15 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
I think your site looks pretty good. In which browser are you seeing width issues? I see that in Safari the right side is being cut off when the browser viewport is being shrinked too much. I'd consider a fixed width of 1000px for your site to avoid this. The min/max width doesn't seem to work fully with the changes you made.

Setting the font to a em value allows visitors to adjust the font size through their browser. Making the font and all content grow and shrink based on the current browser viewport, and have that working in all browser, would require tremendous effort. I have never seen a site doing this.

Quote:
Originally Posted by maxy
www.joecrogan.com

I absolutely love the theme!

This is my first try at making a website, I have made a few amendments from reading your other threads – very useful!

I feel this time I need some extra guidance.

I basically use a block image above my sidebars to act as my logo, so that I can have my content at the top of the site. Therefore I don’t have a header image.

But I still have the same problem with resolution. I have developed the site with a max resolution display, and as a result the site looks terrible in the common 1224x768.

Is there any way to edit all text and images on the site so that they change dependent on the screen resolution?

Do I edit the text so that I use % rather than px? And the same with any image I attach/embed?

Thanks in Advance,
Graeme
  #35  
Old Apr 19, 2009, 05:22 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by StevenT
Only thing different from the originals is that when I added the theme I put the 3.2 atahualpa version in the atahualpa folder I had already created. Would that cause an issue? Maybe the old atahualpa is being called somewhere else?

Steven T
The code in header.php looks alright. Make sure you're looking at the right theme, or that you've put the modified header.php into the directory of the right theme version. If you hover over the screenshot or title of the non-active themes at Site Admin -> Appearance -> Themes you should see their directory in the browser's menu bar as "...preview=1&template=atahualpa332&stylesheet=atahualpa332..."

Or, the %pages section may be disabled or deleted in functions/bfa_header_config.php
  #36  
Old Apr 20, 2009, 05:24 PM
kevjazz
 
6 posts · Apr 2009
Dear Flynn,
I tried placing the code you suggested in the appropriate places without results. While I was finally able to find the post styling box to change the color of post headlines, changing the header as you recommended has not yet centered the text over the picture. If I don't say yes to float title over image, can I simply center the blog title and tagline above the image so that they would be centered where they are currently hard left?Does it matter that I'm using version 3.2 instead of 3.32? Would updating erase all my customizations so far?

Thanks for an amazing theme and a great learning experience.
Kevin
  #37  
Old Apr 20, 2009, 09:15 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
In the newest Atahualpa version it should read

PHP Code:
<?php bfa_header_config($bfa_ata['configure_header']); ?>
in header.php instead of

PHP Code:
<?php bfa_header_config($bfa_ata_configure_header); ?>
Quote:
Originally Posted by StevenT
Only thing different from the originals is that when I added the theme I put the 3.2 atahualpa version in the atahualpa folder I had already created. Would that cause an issue? Maybe the old atahualpa is being called somewhere else?

Steven T
  #38  
Old Apr 20, 2009, 09:30 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by kevjazz
Dear Flynn,
I tried placing the code you suggested in the appropriate places without results. While I was finally able to find the post styling box to change the color of post headlines, changing the header as you recommended has not yet centered the text over the picture. If I don't say yes to float title over image, can I simply center the blog title and tagline above the image so that they would be centered where they are currently hard left?Does it matter that I'm using version 3.2 instead of 3.32? Would updating erase all my customizations so far?

Thanks for an amazing theme and a great learning experience.
Kevin
Not sure what went wrong, the code worked for me. To center the blog title where it is requires many file edits unless you are willing to drop the search box, the RSS icons and the logo image from the header area.

To do this, turn off the search box at Theme Options > Header > Show search box?, turn off the RSS icons at Theme Options > RSS Settings > Show Post Feed icon? / Show Comment Feed icon? / Show Feedburner Email icon?, and turn off the logo image at Theme Options > Show Logo Image? by deleting the logo image file name.

Then add
HTML Code:
text-align: center;
to both the "Blog Title" and "Blog Tagline" text areas at Theme Options -> Header. Or remove the blog tagline at Theme Options -> Show Blog Tagline?
  #39  
Old Apr 20, 2009, 10:30 PM
kevjazz
 
6 posts · Apr 2009
Flynn,
the only thing I can think of is that I'm using version 3.2 instead of 3.32. Would upgrading alter the changes I've made in my theme so far? If so, which files should I back up to restore my theme to its current condition in 3.32?
I don't want to turn off the search box and other icons.
Thanks,
Kevin
  #40  
Old Apr 20, 2009, 10:41 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Just upload the new theme version as a differently named directory to /wp-content/themes/

So if your current version is at /wp-content/themes/atahualpa3/, upload the new version as i.e. /wp-content/themes/atahualpa332/

That way you can run both versions at the same time and switch between them at Site Admin > Appearance > Themes

No files would be overwritten because both theme versions have their own directory. Both versions would share the same theme settings.

It may be a bit hard to distinguish between the two versions. The description of the version 3.3.2 should start with "Version 3.3.2".
  #41  
Old May 19, 2009, 06:53 PM
kashanti
 
2 posts · May 2009
I tried to do what you described and I got this error afterwards.

Parse error: syntax error, unexpected T_VARIABLE in /home/kashanti/public_html/pursueyourlife.com/wp-content/themes/atahualpa/header.php on line 895

my site is www.pursueyourlife.com

I'm trying to get it to not be cut off and resizing automatically. Please tell me how step by step as I don't know code that well.
  #42  
Old Jun 1, 2009, 12:38 PM
SiberianSiren5
 
6 posts · Jun 2009
Flynn, I tried to edit the header.php using Notepad, by copy and pasting the codes you gave for resizing the header automatically, but I get this error message:
Fatal error: Cannot redeclare image_files() (previously declared in /home/armst5/public_html/MyBlog/wp-content/themes/atahualpa.3.2/atahualpa/functions/bfa_postinfo.php:2) in /home/armst5/public_html/MyBlog/wp-content/themes/atahualpa.3.2/atahualpa/functions/bfa_postinfo.php on line 2
  #43  
Old Jun 1, 2009, 01:13 PM
SiberianSiren5
 
6 posts · Jun 2009
I realize my problem is in the image source code, but not sure how to code it. I am using rotating images in the header.
  #44  
Old Jun 2, 2009, 12:08 PM
furrymom
 
1 posts · Jun 2009
Hi Flynn.. i followed the directions for autoresizing in the above and ended up with
a "parse error in line 876"..
i don't know what that means... the first instructions to resize eliminated my header.. so i followed the instructions to remove the # in the header php and then to remove %image in the themes options...
the only thing that differed in your instructions and my html is that where you have bfa i have Jquery, would that have made the difference?? and if so what do i do now? thanks in advance.
  #45  
Old Jun 17, 2009, 09:50 AM
SiberianSiren5
 
6 posts · Jun 2009
Flynn, My header has rotating images in an image folder. What I would like is to direct the header to different image folders for each page, so that each page has a unique header.

What is the best way to do this? I have read posts on creating a new template which I did, but cannot get the newheader.php to work. Another post suggested modifying the original header.php by adding code which would direct specific pages to specific image folders, but I couldn't quite figure out how to do it.

I am php ignorant, so if you could help I would REALLY appreciate it!
  #46  
Old Feb 5, 2010, 12:00 PM
tjvdp
 
1 posts · Feb 2010
Hi found this thread but on my site with version 3.4.4 I cannot find the entries in header.php to change the //headerimage information.
I find such a section in the js.php

is the the same?
  #47  
Old Mar 1, 2010, 03:10 AM
marques82
 
4 posts · Jan 2010
Hi Flynn,

I took your advice with resizing header images and i must have done something wrong. I am unable to view my header at all. Help!
  #48  
Old Jul 12, 2010, 02:19 PM
hospitalera
 
72 posts · Mar 2009
Prague
I know that this is a very old thread, but could somebody please enlighten me how to achieve this (automatically resizing header image) in the newest version (3.5.1) of Atahualpa? I don't think it would do any good if I try the code here that is now over a year old ;-) Thanks a lot, SY
__________________
Hospitalera's Blog
  #49  
Old Oct 13, 2010, 02:55 PM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
Does this also apply to the logo too? I've created a nice logo but it pushes the rss subscription buttons etc off the page and looks funny in my net book.
__________________
Dr. Shawn Soszka
http://www.DrSoszka.com
  #50  
Old Jan 12, 2011, 02:42 PM
Billy
 
1 posts · Jan 2011
Quote:
Originally Posted by hospitalera
I know that this is a very old thread, but could somebody please enlighten me how to achieve this (automatically resizing header image) in the newest version (3.5.1) of Atahualpa? I don't think it would do any good if I try the code here that is now over a year old ;-) Thanks a lot, SY
I am also looking for this same solution in the current version (now 3.6). Does anybody know what it takes to get this done with the current version?
Thank you!
Billy

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] after resizing my blog, it's now right justified?? catty Atahualpa 3 Wordpress theme 5 Jun 8, 2009 02:30 PM
[SOLVED] footer resizing? jim Post-Kicker, -Byline & -Footer 2 Jun 2, 2009 06:44 AM
Custom Logo in Header + Resizing koligirl Header configuration & styling 0 Apr 24, 2009 09:58 AM
Sidebar Image Resizing baskenburg Sidebars & Widgets 1 Apr 17, 2009 05:49 PM
nextGen gallery with image rotator as header image shatchp Header configuration & styling 1 Feb 13, 2009 07:40 PM


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


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