How to add an image to a header

  • Hello!

    I’m trying to add an image to my header and I don’t know what code to use or where to add the code so the image appears where I want.

    Specifically in my header there is an opt in box. Where I say sign up and get your free e-video. I have since had an image of a DVD box that I want to add and this is what I would like your help with.

    II have posted the full code from header.php. for your convenience.

    From the research I’ve done I thought the code was <img src=”/images/GoalsMadeEasy”> So I’ve added that to where I would like it to show but nothing happens.

    I would really appreciate someone walking me through what to do. What the exact code is and where to add it. I have uploaded the image into the media file and currently it is unattached. Not sure if you need to know this or not!

    Thanks so much for in advance for your help.

    Smiles
    Jewells

    <?php

    // Creating the doctype
    thematic_create_doctype();
    echo " ";
    language_attributes();
    echo ">\n";

    // Creating the head profile
    thematic_head_profile();

    // Creating the doc title
    thematic_doctitle();

    // Creating the content type
    thematic_create_contenttype();

    // Creating the description
    thematic_show_description();

    // Creating the robots tags
    thematic_show_robots();

    // Creating the canonical URL
    thematic_canonical_url();

    // Loading the stylesheet
    thematic_create_stylesheet();

	if (THEMATIC_COMPATIBLE_FEEDLINKS) {
    	// Creating the internal RSS links
    	thematic_show_rss();

    	// Creating the comments RSS links
    	thematic_show_commentsrss();
   	}

    // Creating the pingback adress
    thematic_show_pingback();

    // Enables comment threading
    thematic_show_commentreply();

    // Calling WordPress' header action hook
    wp_head();

?>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-13168440-2']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		 	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
		 	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>

</head>

<?php 

thematic_body();

// action hook for placing content before opening #wrapper
thematic_before(); 

if (apply_filters('thematic_open_wrapper', true)) {
	echo '<div id="wrapper" class="hfeed">';
}

   // action hook for placing content above the theme header
   thematic_aboveheader(); 

   ?>   

	<div id="header">

		<script type="text/javascript">
			new function($) {
			    $.fn.placeholder = function(settings) {
			        settings = settings || {};
			        var key = settings.dataKey || "placeholderValue";
			        var attr = settings.attr || "placeholder";
			        var className = settings.className || "placeholder";
			        var values = settings.values || [];
			        var block = settings.blockSubmit || false;
			        var blank = settings.blankSubmit || false;
			        var submit = settings.onSubmit || false;
			        var value = settings.value || "";
			        var position = settings.cursor_position || 0;

			        return this.filter(":input").each(function(index) {
			            $.data(this, key, values[index] || $(this).attr(attr));
			        }).each(function() {
			            if ($.trim($(this).val()) === "")
			                $(this).addClass(className).val($.data(this, key));
			        }).focus(function() {
			            if ($.trim($(this).val()) === $.data(this, key))
			                $(this).removeClass(className).val(value)
			                if ($.fn.setCursorPosition) {
			                  $(this).setCursorPosition(position);
			                }
			        }).blur(function() {
			            if ($.trim($(this).val()) === value)
			                $(this).addClass(className).val($.data(this, key));
			        }).each(function(index, elem) {
			            if (block)
			                new function(e) {
			                    $(e.form).submit(function() {
			                        return $.trim($(e).val()) != $.data(e, key)
			                    });
			                }(elem);
			            else if (blank)
			                new function(e) {
			                    $(e.form).submit(function() {
			                        if ($.trim($(e).val()) == $.data(e, key))
			                            $(e).removeClass(className).val("");
			                        return true;
			                    });
			                }(elem);
			            else if (submit)
			                new function(e) { $(e.form).submit(submit); }(elem);
			        });
			    };
			}(jQuery);
			$(inputfield).placeholder();
		</script>
		<?php

	  	// action hook creating the theme header
	  	thematic_header();

	  	// Call mailchimp signup function
	  	$news_message = mailchimp_signup();

	  	if( is_home() ) { ?>

	  	<div class="banner_wrapper">

		  	<div class="big_banner_info">

<blockquote><span>“</span>I’ll show you how to become an irresistible communicator with unshakable confidence and
super star appeal..<span>”</span><span class="quote">Julie-Anne Black – Creator</span>
</blockquote>
				<div class="banner_content">
					<p class="join_us"><b>Are you ready to be an irresistible communicator and produce the life you'll love to live?</b> <b>SIGN UP </b>and get access to your <b>FREE</b> e-video</p> <img src="/images/GoalsMadeEasy">
					<p class="changing">“7 Steps to Producing What You Want –Goals Made Easy To Be Brilliant Now”</p>
					<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">Spamming is for people who aren't being brilliant! We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
				</div>
				<a>/jewells-tools/brilliant-tips/" class="seal"></a>
		  	</div>

		  	<div class="banner_links">
		  		<div>
					<h3>Mentoring Programs</h3>
					<p>Re-writing your life script is your fastest way to better performance.When you unleash your confidence, creativity and performance remarkable things happen.  </p>
					<a>/mentoring/">Find out more</a>
		  		</div>
		  		<div>
					<h3>On Stage</h3>
					<p>Internationally renowned. Leading motivational speaker. Unique presentations. Unforgettable messages. Practical success strategies.</p>
					<a>/onstage/">Find out more</a>
		  		</div>
		  		<div class="bl_right">
					<h3>Mind Mastery with NLP</h3>
					<p>Seminars in advanced communication using NLP and Body Language. Learn how to master your mind and create spectacular results.</p>
					<a>/mind-mastery/">Find out more</a>
		  		</div>
		  		<div class="bl_right">
					<h3>Midday Motivator</h3>
					<p>A dynamic presentation encouraging your team to get engaged, focused and motivated. Delivering new thinking for peak performance.</p>
					<a>/mind-mastery/midday-motivator/">Find out more</a>
		  		</div>
		  	</div>

		</div>

	  	<?php } else { ?>

	  	<div class="banner_wrapper">

  		  	<div class="small_banner_info">

<blockquote><span>“</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>”</span><span class="quote">Julie-Anne Black – Creator</span>
</blockquote>
				<div class="banner_content">
					<p class="join_us">Are you ready to produce the life you'll love to live? <b>SIGN UP for FREE access to</p>
					<p class="changing">“7 Steps to Producing What You Want –Goals Made Easy To Be Brilliant Now”</p>
					<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
				</div>
				<a>/jewells-tools/brilliant-tips/" class="seal"></a>
		  	</div>

		</div>

	  	<?php } ?>

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

	<?php

	echo ( $news_message != '' ) ? $news_message : '';

   // action hook for placing content below the theme header
   thematic_belowheader();

   ?>
   <div id="main">

    [Please use the code buttons when posting code – as is, your code may have been corrupted. Also for this much code you should use a pastebin.]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter JewellsBlack

    (@jewellsblack)

    by the way my website is https://www.bebrilliantnow.com

    thanks

    The code you have below is not the full path to the image – in the media library copy the full URL to the image:

    <img src="/images/GoalsMadeEasy">

    should be something like

    <img src="https://www.bebrilliantnow.com/THE REST OF THE IMAGE FILE PATH">

    See if that works.

    Thread Starter JewellsBlack

    (@jewellsblack)

    Thanks WPyodi

    You’re brilliant! That worked by adding this! https://www.bebrilliantnow.com/wp-content/uploads/2013/05/GoalsMadeEasy.jpg

    YIKES I need to resize it! WHat do I do now to make it a little image to fit appropriately in this spot. Currently it’s massive!

    Thanks so much for your support. Really appreciate it.

    ??

    It would be best to resize it using a photo program and then reupload it or you can use the media library resizing function.

    Looks like you probably want something like 250px wide? You’ll have to play around with it.

    Thread Starter JewellsBlack

    (@jewellsblack)

    You are a champion! Resizing is working – still playing! Thank you!

    Now, is it possible to add text so it appears next to the image? As you can in the pages?

    At the moment it positions itself in the centre and therefore the opt in box no longer fits into the same configuration?

    Sorry, I lost track of this thread – try adding this to your CSS:

    .join_us img {
  float: left;
}

    That puts it to the side, but it looks kinda good that way? We can probably also keep it centered by move the text over it a bit if you’d rather do that.

    Thread Starter JewellsBlack

    (@jewellsblack)

    You’re fine. Thanks for responding again.

    Looks like I’ve done something wrong here. Take a look https://www.bebrilliantnow.com

    Ideally I’m looking for the image to be on the right or left of that section with the title of the video next to it. 7 Steps to Producing What You Want – Goals Made Easy To Be Brilliant Now.

    Not sure if this is possible or will I need to reconfigure this section so it look better?

    Another possibility is to have the image slight bigger on the right and then have the wording next to it saying ‘Get your free e-video by joining our complimentary subscription “Insider Secrets”. That might be a better way to go!

    Now how can we make that happen! ??

    I can’t say enough how much I appreciate your assistance. Thank you.

    LOL – sorry, that was my bad for not explaining better – that code above has to go in a CSS file. – it looks like you have a custom file – under Appearances -> Editor – find style.css and paste the code above below the lines of code that are already there.

    (And take it out of where it is now ?? ).

    Thread Starter JewellsBlack

    (@jewellsblack)

    haha! That’s funny! A rookie mistake on my behalf for sure! Thanks for being so patient!

    Alright I’m pretty excited because this is almost there! And it’s looking good!
    But i have just noticed there is now a green line between the menu bar and the header… What have I done to create this and how can I uncreate it? So the menu joins the header directly…

    I also need to move the box with the quote further down, so it doesn’t cover up the image. I’ve tried and <p> but neither of them work. WOW this is fiddly! but exciting to watch it take shape too!

    <div class="big_banner_info">

<blockquote><span>“</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>”</span><span class="quote">Julie-Anne Black – The Producer</span>
</blockquote>

    And then once this is finalised I need to replicate what I’ve done for the little banner on the subsequent pages… https://www.bebrilliantnow.com/upcoming-events/

    On an unrelated topic could you shed light as to why all the copy is coming out bold? When I’m in edit mode all the appropriate formatting is there and yet it comes out in bold… Not sure how I made this happen???? – bless!

    Thread Starter JewellsBlack

    (@jewellsblack)

    just in case you needed more of the code…

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    if( is_home() ) { ?>

	  	<div class="banner_wrapper">

		  	<div class="big_banner_info">

<blockquote><span>“</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>”</span><span class="quote">Julie-Anne Black – The Producer</span>
</blockquote>
				<div class="banner_content">
					<p class="join_us"><b>Get your FREE e-video by joining our </br>complimentary subscription "Insider Secrets" <img src="https://www.bebrilliantnow.com/wp-content/uploads/2013/05/GoalsMadeEasy-e1368004859151.jpg"></p>
						<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">Spamming is for people who aren't being brilliant! We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
				</div>
				<a>/jewells-tools/brilliant-tips/" class="seal"></a>
		  	</div>
    Thread Starter JewellsBlack

    (@jewellsblack)

    hmmmm – I just did something to fix the green space – no idea what but the issue that was there is no longer there on that aspect! YAY!

    Now just need to move the quote down and then replicate this in the smaller banner – here’s the code for that one.

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    <?php } else { ?>

	  	<div class="banner_wrapper">

  		  	<div class="small_banner_info">

<blockquote><span>“</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>”</span><span class="quote">Julie-Anne Black – Creator</span>
</blockquote>
				<div class="banner_content">
					<p class="join_us">Are you ready to produce the life you'll love to live? <b>SIGN UP for FREE access to</p>
					<p class="changing">“7 Steps to Producing What You Want –Goals Made Easy To Be Brilliant Now”</p>
					<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
				</div>
				<a>/jewells-tools/brilliant-tips/" class="seal"></a>
		  	</div>

		</div>

	  	<?php } ?>

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

	<?php

	echo ( $news_message != '' ) ? $news_message : '';

   // action hook for placing content below the theme header
   thematic_belowheader();

   ?>
   <div id="main">
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    JewellsBlack? Could you use the code button to wrap your code samples in the backtick (not single quote) character?

    https://codex.www.ads-software.com/Forum_Welcome#Posting_Code

    When you forget to do that the code you paste becomes an unreadable mess. ?? Or use pastebin.com and post the link to your paste.

    Thread Starter JewellsBlack

    (@jewellsblack)

    OK the first lot of code is here…

    if( is_home() ) { ?>

	  	<div class="banner_wrapper">

		  	<div class="big_banner_info">
		  		<blockquote class="creating"><span>&ldquo;</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>&rdquo;</span><br /><span class="quote">Julie-Anne Black &ndash; The Producer</span></blockquote>

				<div class="banner_content">
					<p class="join_us"><b>Get your FREE e-video by joining our </br>complimentary subscription "Insider Secrets" <img src="https://www.bebrilliantnow.com/wp-content/uploads/2013/05/GoalsMadeEasy-e1368004859151.jpg"></p>
						<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">Spamming is for people who aren't being brilliant! We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
    Thread Starter JewellsBlack

    (@jewellsblack)

    Second lot of code is here… I hope that is more into protocol. I am unable to tell the difference between them…

    <?php } else { ?>

	  	<div class="banner_wrapper">

  		  	<div class="small_banner_info">
		  		<blockquote class="creating"><span>&ldquo;</span>Producing your best life, is much like producing a hit TV show. It’s fast paced, fun, creative and exciting.<span>&rdquo;</span><br /><span class="quote">Julie-Anne Black &ndash; Creator</span></blockquote>

				<div class="banner_content">
					<p class="join_us">Are you ready to produce the life you'll love to live? <b>SIGN UP for FREE access to</p>
					<p class="changing">&ldquo;7 Steps to Producing What You Want &ndash;<br />Goals Made Easy To Be Brilliant Now&rdquo;</p>
					<form name="mailchimp_form" class="join_form" action="" method="post">
						<div class="clearfix">
							<input type="text" name="fname" value="" placeholder="Your first name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="lname" value="" placeholder="Your last name" size="20" />
						</div>
						<div class="clearfix">
							<input type="text" name="email" value="" placeholder="Your email address" size="60" />
						</div>
						<button type="submit" name="mailchimp">Join Now</button>
						<p class="our_promise">We absolutely promise to never sell, rent, trade or share your email with anyone or any organisation ever!</p>
					</form>
				</div>
				<a href="<?php echo get_settings('home'); ?>/jewells-tools/brilliant-tips/" class="seal"></a>
		  	</div>

		</div>

	  	<?php } ?>

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

	<?php

	echo ( $news_message != '' ) ? $news_message : '';

   // action hook for placing content below the theme header
   thematic_belowheader();

   ?>
   <div id="main">
    Thread Starter JewellsBlack

    (@jewellsblack)

    Thank you for your assistance Jan ??

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How to add an image to a header’ is closed to new replies.