Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 06-03-2014, 01:30 PM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
Wordpress: Header image moves

the big header image at the top (2200x383) moves on all the subpages, but stays put on the home page…when you stretch the browser.

any idea who i can get all the other pages to act the same way as the home page?

http://johalswarn.wp.hobbsherder.com/
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 06-03-2014, 05:00 PM
J. H. Rasmussen J. H. Rasmussen is offline
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,009
iTrader: 1 / 100%
Well, not the nicest solution, but none the less one possible solution:

Only tested on the page: http://johalswarn.wp.hobbsherder.com/meet-swarn-johal-par-rai/

Find:
HTML Code:
<script type="text/javascript">document.createElement('video');document.createElement('audio');</script> <script type="text/javascript" src="http://johalswarn.wp.hobbsherder.com/wp-content/themes/johal_swarn/script.js"></script> </head> <body class="page page-id-8 page-template-default"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="HH-page-background-glare-wrapper"> <div id="HH-page-background-glare"></div> </div> <div id="HH-main"> <div class="cleared reset-box"></div> <div class="HH-header"><!--- BEGIN featured image header ---> <div class="hh-header-noimage"><img width="2200" height="383" src="http://johalswarn.wp.hobbsherder.com/files/2014/06/header-about.jpg" class="attachment-full wp-post-image" alt="header-about" /></div> <!--- END featured image header ---> <div class="HH-header-position">
And replace it with:
HTML Code:
<script type="text/javascript">document.createElement('video');document.createElement('audio');</script> <script type="text/javascript" src="http://johalswarn.wp.hobbsherder.com/wp-content/themes/johal_swarn/script.js"></script> <style type="text/css">.HH-header:after{ background-image: url('http://johalswarn.wp.hobbsherder.com/files/2014/06/header-about.jpg'); }</style> </head> <body class="page page-id-8 page-template-default"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="HH-page-background-glare-wrapper"> <div id="HH-page-background-glare"></div> </div> <div id="HH-main"> <div class="cleared reset-box"></div> <div class="HH-header" style="background: red;"><!--- BEGIN featured image header ---> <div class="hh-header-noimage"></div> <!--- END featured image header ---> <div class="HH-header-position">
As you can see i have added some style to replace the original header image with the one you would like to use on that page:
HTML Code:
<style type="text/css">.HH-header:after{ background-image: url('http://johalswarn.wp.hobbsherder.com/files/2014/06/header-about.jpg'); }</style>
And i have removed the added image tag, since it's no longer needed. You already have the style class for the header, it's only the image that needs to be replaced. A better way however, would probably be to create individual style classes with there individual images and then use them in the different web pages, maybe with one shared style class for common selectors used in all the headers.
 
Reply With Quote
  #3  
Old 06-03-2014, 05:10 PM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
thanks JH...i'll give this a shot first thing in the morning and will let you know if it works!
 
Reply With Quote
  #4  
Old 06-04-2014, 07:53 AM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
jh...this is a wordpress site so i'm working with php. most notably the header.php file.

i'm not sure where to edit that html. you grabbed it from the source code.
 
Reply With Quote
  #5  
Old 06-04-2014, 08:47 AM
J. H. Rasmussen J. H. Rasmussen is offline
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,009
iTrader: 1 / 100%
Could you add the content of the header.php-file in a php wrapper or upload the file as an attachment to a new reply in this thread? Please remember to remove sensitive informations like usernames and passwords first
 
Reply With Quote
  #6  
Old 06-04-2014, 09:34 AM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
how's this jh?



Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION < 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
wp_enqueue_script('jquery');
if ( is_singular() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="HH-page-background-glare-wrapper">
<div id="HH-page-background-glare"></div>
</div>
<div id="HH-main">
<div class="cleared reset-box"></div>
<div class="HH-header"><!--- BEGIN featured image header --->
<?php
if (has_post_thumbnail()){
echo'<div class="hh-header-noimage">';
the_post_thumbnail('full');
echo '</div>';
}
else{
echo '<div class="hh-header"></div>';
}
?>
<!--- END featured image header --->
<div class="HH-header-position">
<div class="HH-header-wrapper">
<div class="cleared reset-box"></div>
<div class="HH-header-inner">
<div class="HH-logo">
<div style="margin:7px 0 0 0;"><a href="https://twitter.com/swarnjohal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-twitter.jpg" /></a>&nbsp;<a href="https://www.youtube.com/user/SwarnandPar" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-youtube.jpg" /></a>&nbsp;<a href="http://ca.linkedin.com/in/swarnjohal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-linkedin.jpg" /></a>&nbsp;<a href="https://www.facebook.com/swarn.johal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-facebook.jpg" /></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="HH-bar HH-nav">
<div class="HH-nav-outer">
<div class="HH-nav-wrapper">
<div class="HH-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'HH-hmenu'
)
);
?>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="HH-box HH-sheet">
<div class="HH-box-body HH-sheet-body">
<div style="margin:10px 0 0 0;"><img src="/wp-content/themes/johal_swarn/images/top-shadow.jpg" /></div>
 
Reply With Quote
  #7  
Old 06-04-2014, 02:00 PM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
JH..i fixed it! thank you for your time and input!!! this is what i put before the closing </head> tag in the header file…

<style type="text/css">
.hh-header:after{
*** background-image:url("<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->
ID) ) ?>");
*** }
</style>
<?php } ?>
 
Reply With Quote
  #8  
Old 06-04-2014, 02:05 PM
J. H. Rasmussen J. H. Rasmussen is offline
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,009
iTrader: 1 / 100%
LOL you where faster than me, glad you got it working

Try this, and if it doesn't work, then please reply with the error message you get.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'?>; charset=<?php bloginfo('charset'?>" />
<title><?php wp_title'|'true'right' ); bloginfo'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed'THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed'THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action
('wp_head''wp_generator');
wp_enqueue_script('jquery');
if ( 
is_singular() && get_option'thread_comments' ) ) {
wp_enqueue_script'comment-reply' );
}
wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<?php
if (has_post_thumbnail()){
echo 
'<style type="text/css">.HH-header:after{ background-image: url(\'' wp_get_attachment_url(get_post_thumbnail_id($post->ID)) . '\'); }</style>';
}
?>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="HH-page-background-glare-wrapper">
<div id="HH-page-background-glare"></div>
</div>
<div id="HH-main">
<div class="cleared reset-box"></div>
<div class="HH-header"><!--- BEGIN featured image header --->
<?php
if (has_post_thumbnail()){
echo
'<div class="hh-header-noimage"></div>';
}
else{
echo 
'<div class="hh-header"></div>';
}
?>
<!--- END featured image header --->
<div class="HH-header-position">
<div class="HH-header-wrapper">
<div class="cleared reset-box"></div>
<div class="HH-header-inner">
<div class="HH-logo">
<div style="margin:7px 0 0 0;"><a href="https://twitter.com/swarnjohal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-twitter.jpg" /></a>&nbsp;<a href="https://www.youtube.com/user/SwarnandPar" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-youtube.jpg" /></a>&nbsp;<a href="http://ca.linkedin.com/in/swarnjohal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-linkedin.jpg" /></a>&nbsp;<a href="https://www.facebook.com/swarn.johal" target="_blank" /><img src="/wp-content/themes/johal_swarn/images/social-facebook.jpg" /></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="HH-bar HH-nav">
<div class="HH-nav-outer">
<div class="HH-nav-wrapper">
<div class="HH-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'HH-hmenu'
)
);
?>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="HH-box HH-sheet">
<div class="HH-box-body HH-sheet-body">
<div style="margin:10px 0 0 0;"><img src="/wp-content/themes/johal_swarn/images/top-shadow.jpg" /></div>
Make a backup of the header.php-file somewhere on your own computer, then paste the php code from the PHP-wrapper into a text editor, save it as utf-8 without BOM with the filename header.php and upload it to the server where the old header.php-file was/is located, overwrite it if needed.

As you can see, i added:
PHP Code:
<?php
if (has_post_thumbnail()){
echo 
'<style type="text/css">.HH-header:after{ background-image: url(\'' wp_get_attachment_url(get_post_thumbnail_id($post->ID)) . '\'); }</style>';
}
?>
on the line before "</head>", that should replace the header image with full sized post image.

Then i removed:
PHP Code:
the_post_thumbnail('full'); 
because that was the image that was on top of the header image, and it's probably not needed for anything else.
 
Reply With Quote
  #9  
Old 06-04-2014, 02:29 PM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
omg...i'm so stupid. i'll try your code, because what i did essentially didn't break anything which i saw it as, "it's fixed" but in actuality, the images don't change on the sub pages. LOL! omg i feel so dumb
 
Reply With Quote
  #10  
Old 06-04-2014, 02:31 PM
drew68's Avatar
drew68 drew68 is offline
Contributing Member
 
Join Date: 07-19-06
Location: Orange County
Posts: 608
iTrader: 0 / 0%
omg you fixed it JH! if you were sitting next to me...i'd give you a huge hug!! wow, thank you!!!
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Help: Wordpress main container moves from left to right on different pages meipak Coding Forum 2 10-16-2011 04:46 PM
How to change wordpress theme header image Sensual chocolate Coding Forum 1 12-10-2010 04:10 PM
image header woogley SEO Forum 4 06-08-2009 09:01 AM
How to make the Wordpress header image hyperlinked? Nick Coding Forum 4 06-20-2006 12:45 PM
What do you think of my new header image? seonewbee Graphic Design Forum 12 08-26-2004 04:59 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:34 PM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC