WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Need simple HTML help for template header (12 posts)

  1. gordtep
    Member
    Posted 4 years ago #

    I just want the image it is labeling as a background image to be a clickable hyperlink on every page, so i'm guessing i have to somehow implement the whole <A HREF="... and the <IMG SRC=...

    but every time I try and change things it makes the whole page all wacky... if anybody can just rework the code so the background image is actually a regular image, and a hyperlin, and it doesnt effect the layout in anyway that would be awesome... here's the code:

    <div id="headerimg">
    <div style="background: #fefefe url('<?php get_random_imgurl_in_dir('images/headers'); ?>') no-repeat; height: 128px;">

    Here is the entire text of the template in case it helps... THANKS IN ADVANCE!!!!!

    <?php
    /**
    * @package WordPress
    * @subpackage Homywhite_Theme
    */
    ?>
    <!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'); ?> <?php bloginfo('name'); ?></title>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <!-- added by Eyoung @ 2009.30 for toggling the div -->
    <script src="<?php bloginfo('template_url'); ?>/lib/js/ToggleDiv.js" type="text/javascript"></script>

    <style type="text/css" media="screen">

    <?php
    /* commented out by Eyoung @ 2009.05.30
    // Checks to see whether it needs a sidebar or not
    if ( !empty($withcomments) && !is_single() ) {
    ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php }
    */
    ?>

    </style>

    <?php /*if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); commented out by Eyoung @ 2009.05.30*/?>

    <?php wp_head(); ?>
    </head>

    <body>

    <div id="wrap">

    <!-- begin header
    <div class="none">[ View menu ]</div>-->

    <div id="header">

    <div id="topline"></div>

    <div id="headerTitle">

    <h1>
    </h1>

    </div>

    <div id="headerimg">
    <div style="background: #fefefe url('<?php get_random_imgurl_in_dir('images/headers'); ?>') no-repeat; height: 128px;">
    <!--<div class="musicPos">
    <?php/* xspf_player::start('category-tag'); */?>
    <span class="musicInfo">Background Music</span>
    </div>-->
    </div>
    </div>

    </div> <!-- header -->

  2. Mark / t31os
    Moderator
    Posted 4 years ago #

    Use a pastebin when posting code, or backticks as indicated in the reply/post box.
    http://wordpress.pastebin.com/

    And you just want to convert this...
    <div style="background: #fefefe url('') no-repeat; height: 128px;">
    to a..
    <a href="somelink"><img src="something" /></a>
    .. type of thing?

    Something like...
    <a class="head_one" href="YOUR_LINK_HERE"><img src="<?php get_random_imgurl_in_dir('images/headers'); ?>" alt="header image" /></a>
    Then accompany with CSS...

    .head_one {
      border: none;
      padding: 0;
      height: auto;
      width: auto;
    }
    .head_one img {
      border: none
      height: 128px;
      width: auto;
      margin: 0;
    }

    should do it..

    See how you get on..

  3. gordtep
    Member
    Posted 4 years ago #

    Close, but not all the way there... this pushes the body of the webpage all the way to the left and doesn't allow the header to center/resize according to browser window... I'm working on http://www.gordtep.com -- just can't seem to get the header image to stay the way it's supposed to be and have it appear as a hyperlink at the same time... every time i get it to be a link, the rest of the page is thrown off entirely

  4. Mark / t31os
    Moderator
    Posted 4 years ago #

    If you resize based on the window size it'll look awful on really large screens..

    Anyway, adding this should do it.. (CSS)

    #wrap {margin:0;width:100%}
    #headerimg img {width:100%;height:auto}

    It won't extend 100% without removing the margin on the wrapper...

    These can be removed without fear also..

    <div id="topline"></div>
    
    	<div id="headerTitle">
    
    		<h1>
    			</h1>
    
    		</div>

    If you want to add some space above the header or to the sides, we can do that with the CSS, both those above elements are not needed, so just drop them or comment them out..

  5. gordtep
    Member
    Posted 4 years ago #

    I'm still not getting it-- it's some bizarrely complicated CSS thing that I can't seem to figure out... you'll see on gordtep.com it's an utter mess... i currently have the hyperlinked image all out of whack on top and the image I can't get to hyperlink beneath it looking the way i want it to... what a mess

  6. Mark / t31os
    Moderator
    Posted 4 years ago #

    I mean this in the kindest possible way, but are you paying attention to what i'm putting above...

    Source from the page:
    <IMG SRC="http://www.gordtep.com/wp-content/themes/homywhite/images/headers/header_1.jpg no-repeat; height: 128px;"> </A>

    That's invalid code.

    Take what you have for the header area here...

    <div id="header">
    
    <div id="headerimg">
    <div id="topline"></div>
    
    	<div id="headerTitle">
    
    		<h1>
    			</h1>
    
    		</div>
    <A HREF="http://www.gordtep.com">
    <IMG SRC="http://www.gordtep.com/wp-content/themes/homywhite/images/headers/header_1.jpg no-repeat; height: 128px;"> </A>
    
    <!--<div class="musicPos">
    								<span class="musicInfo">Background Music</span>
    			</div>-->
    		</div>
    	</div>
    
    </div>

    Change that for...

    <div id="header">
    	<div id="headerimg">
    		<a class="head_one" href="YOUR_LINK_HERE">
    			<img src="<?php get_random_imgurl_in_dir('images/headers'); ?>" alt="header image" />
    		</a>
    	</div>
    </div>

    This also removes an extra closing </div> in your code which closed the wrapper element prematurely...

    Work from there... and i'll help where need be...

  7. Mark / t31os
    Moderator
    Posted 4 years ago #

    NOTE: If the URL being generated for the image is adding the incorrect code to the IMG src, then post the code from your functions.php (in your theme folder) into a pastebin (see first response), and i'll help you re-write it...

  8. gordtep
    Member
    Posted 4 years ago #

    I sincerely do appreciate all your help... it's not perfect, as the header image is shifted to the right a faction of an inch for some reason and the re-size is different-- the original resizing was just cutting off the a portion of the right side of the image based on the size of the window (which was how i wanted it), now it resizes the entire thing, but it's ok. I'm not sure how to adjust that, I think it had something to do with the height 128? Thanks though.

    here's what's in the functions file:

    <?php
    /**
     * @package WordPress
     * @subpackage Homywhite_Theme
     */
    
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'before_widget' => '<li id="%1$s" class="widget %2$s">',
            'after_widget' => '</li>',
            'before_title' => '<h2 class="widgettitle">',
            'after_title' => '</h2>',
        ));
    
    // Get the random image url in the given relative directory path
    function get_random_imgurl_in_dir($rel_img_dir)
    {
    	$directory = get_template_directory() . "/". $rel_img_dir;
    	$dir_url = get_bloginfo('template_directory') . "/". $rel_img_dir;
    
    	if (@is_dir($directory))
    	{
    		$img_array = array();
    		$directory_handle = @opendir($directory);
    		while ( false !== ($filename = @readdir($directory_handle)) )
    		{
    			// Filters out some of the unwanted directory entries.
    			if ($filename != "." && $filename != "..")
    			{
    				// Ficture file, adds to the array stroring the file name
    				if (@is_file($directory."/".$filename))
    				{
    					$file_extension = strrchr($filename, ".");
    					if (".jpg" == $file_extension || ".gif" == $file_extension)
    						$img_array[] = $filename;
    				}
    			}
    		}
    
    		@closedir($directory_handle);
    
    		$array_count = @count($img_array);
    		$random_num = rand(1, $array_count);
    
    		$rand_img_url = $dir_url . "/" . $img_array[$random_num-1];
    	}
    
    	echo $rand_img_url;
    }
  9. gordtep
    Member
    Posted 4 years ago #

    For what it's worth, here's the style.css file

    [code moderated]

  10. gordtep
    Member
    Posted 4 years ago #

    I'm realizing what I should be asking for is how to crop the image on the right side based on the browser window/resolution, so it will extend further if I open... hope this is making sense.

  11. gordtep
    Member
    Posted 4 years ago #

    Do I need to use the "overflow: hidden" command somehow?

  12. Mark / t31os
    Moderator
    Posted 4 years ago #

    Perhaps if you give an example of how it "should" look... it would make things easier on both of us, even if it means chopping and cropping in paintshop...

    It's not you personally, but i'm not quite getting at what you want to achieve..

Topic Closed

This topic has been closed to new replies.

About this Topic