Thesis Tutorial: Dynamic Image Header with Transparent Logo

thesis-binary

One of the tools that I use is Chris Pearson’s fantastic Thesis WordPress theme framework.

In an effort to contribute back to both the Thesis and WordPress communities I have documented how to embed the Next-Gen Gallery plugin to your header, or banner image and place your logo above it. This functionality allows you the ability to have your banner image change how you like it beneath your logo at the top of your website.

Why Would You Want To Do This?

If you would like a variety of images in your header beneath the logo/type and manage them in a central location. Once the initial programming and configuration are setup it’s all image management after that.

You may have clients that would like the option of changing their header image on their own and this gives them that option.

Things you will need to perform this tutorial:

  • WordPress
  • Thesis (optional. You can do this without Thesis but we are using it here)
  • Next-Gen Gallery plugin for WordPress
  • Photoshop (or other image editing software)

First Things First

You will need to have WordPress, Thesis, and Next-Gen Gallery (NGG) installed before proceeding.

Dimensions

Once everything is installed we are ready to go. First you will want to determine the size of your image, or header. What is that dimension in pixels? You will need this for both creating the image and for settings inside of Next-Gen.

Once you have the width and height of your header determined it is time to create/optimize your images that you intend on using. For our purposes of this tutorial the size of our image/header is 857 pixels wide, and 150 pixels high.

Preparing The Images

We used Photoshop to create a layered file containing all of our images so that we can position and scale them within the size constraints and save out the multiple versions of the file. You may want to import your logo, or typeset your text now, to position it on top of all the images so that you can determine the static position that the logo/type will present itself.

Once we have all the layers in the proper positioned its time to save out all your files. In our example we created 5 different images to use. We used smart naming conventions to make sure we can tell these images from others just by their names. We titled our images:

  • header-01.jpg
  • header-02.jpg
  • header-03.jpg
  • header-04.jpg
  • header-05.jpg

Now that the images are prepared its time to prepare the logo/type.

Preparing The Logo/Type For “floating” On Top

We should have our logo/typesetting in place from our previous step of getting our images sized and positioned. We need to do the following steps:

  1. Make sure logo/type is in correct position
  2. Ensure that we have a drop shadow created
  3. Turn off all image layers
  4. Check transparency
  5. Trim the logo/type down to size
  6. Save out proper format of file

Make sure logo/type is in correct position

You want to make sure with each and every image layer you have saved out that your logo/type is in the position you want it to appear on all images.

Ensure that we have a drop shadow created

Select your logo/type layer then select the layer/layer style/drop shadow inside the menu options of Photoshop.

drop_shadow_menu

Adjust the settings to your liking and you should see a drop shadow from your logo/type on top of the image.

picture-14

Once you are happy with the shadow its time to save out the logo/type image.

Turn off all image layers

You should turn off all image layers so that you only see your logo/type and shadow.

Check Transparency

Once all images are turned off and the only layer turned on is your logo/type you should see transparency behind the image. In Photoshop—you should see the checkerboard pattern—it should look like this:

picture-15

Trim the logo/type down to size

With only the logo/type layer displayed you will want to trim out all the uneccessary image data. In Photoshop you want to select Image/Trim

trim_image

You should now have a much tighter logo/type that still has the shadow present.

Save out proper format of file

You want to select File/Save For Web and Devices

save_image

Once presented with the save dialog window you will want to set the following parameters for your file.

  • Image type: PNG
  • Colors: perceptual
  • Number of colors: (depends on what looks good and how large the image file is. Play with this setting)
  • Dither: diffusion
  • Dither %: 88%
  • Transparency: check box ‘yes’
  • Matte: None
  • Transparency Dither: Diffusion Transparency Dither
  • Amount: 88% (Play with setting to get desired result)
  • All other settings default

Here is what my settings looked like:

picture-4

Once your settings are how you like them, save the file with a distinguishing name.

Save it to the custom image folder inside of Thesis: ~/wp-content/themes/thesis/custom/images/

You can now FTP that image to your webserver.

Now that the background images are created and uploaded into NGG, and your logo/type image is uploaded via FTP its time to get busy with the custom.css, custom-fuctions.php, and NGG settings.

Getting Next-Gen Gallery Settings Dialed In

The method presented below is our “hack” to making this combination of plugins and technology work. If you have an easier/simpler way to do this, please share! We are always open to more efficient approaches—who isnt? 🙂 That being said, here is what we did.

Create A Header Gallery and Upload Images

You want to be logged into the admin area of your website, http://www.[yourwebsite].com/wp-admin/

Once logged in you want to proceed to the gallery management tools near the bottom of the left hand side of the page:

picture-6

You want to select Add Gallery / Images from the menu choices. On the next screen you want to give your new gallery a name, in my case it was appropriately “header.”

picture-8

The next step is to upload the images you previously saved. These are the background images, not the logo/type you saved. If you look at the set of tabs at the top of the screen you will see an Upload Images option. That is what you want to select. You need to click on Choose File and proceed to navigate to all your images and upload each one. Once you have all of the images listed, you should then select the proper gallery from the pulldown menu where it says Choose Gallery in the pulldown menu.

picture-10

Once all your images are listed, your gallery is selected it is time to click Upload Images. This may take a few seconds depending on how large your images are so be patient.

picture-12

Once the upload is complete you will see a confirmation at the top of the screen.

picture-13

Manage The Gallery

Now click on Manage Gallery under the Gallery admin menu on the left side of the page. You should see your gallery listed under the Gallery Overview page. Click on the title to proceed to edit the gallery content. At this point you want to make sure that all the images you uploaded are present. If not, go ahead and add what you need.

Tweak the Settings

Now you want to confirm that the slideshow and the technology needed to run it are in place. You do this under the Gallery/Options menu item.

gallery_options

Of primary concern is the tab titled Slideshow. You need to look at the first option under this tab: Path to the Imagerotator. If the path is not already filled in, click the “search now” button just to the right. This should take care of things. If not, you may need to get JW Image Rotator from Jeroen Wijering. Follow the instructions and return here and click the “search now” button again.

picture-18

Testing The Show

Now that you have uploaded the images and checked the slideshow technology is in place you should test out your slideshow to see if everything is working. This tests the slideshow, and if its working well, gives us some key code that we will need for custom_functions.php

The way we tested the slideshow was to create a test page, insert the slideshow, then preview the page.

I created a page by clicking on Pages/AddNew

pages_addnew

I then give the page the title of Gallery Test in the title bar, then I click and icon in the top row, right. You can see it here in the screen capture.

click_ngg

Once I click that button I get a dialog box that lets me select from the pull-down menu the slideshow I want to insert, and lets me determine how I want to display the images—in this case a slideshow.

ngg_popup

Once you have clicked insert you should see something like this showing up in your content area:

[nggallery id=5 ]

This is the code the NGG plugin uses to insert the slideshow. Now the code is in place I click publish, then I click preview to see the page and if the slideshow is working as I want it to. If its not you need to go back and double check your settings and that you have to get JW Image Rotator from Jeroen Wijering.

Assuming the slideshow test is working as you intended in your web browser, the next step is to look under the hood at the code being generated to display the slideshow. You will need to find this code, copy it, and then paste it into custom_functions.php to help build your new header. Fortunately I will show you my code here and you can copy/paste to make things work.

When you are looking at the webpage with the slideshow working as it should, you should “view the source code” to see the syntax that is making everything tick. One thing you may have noticed is that your slideshow is a different size than the header you want. Don’t worry, we will change the size in the code.

What Is The Code?

The code you are looking for in the preview page source is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.YOUR_DOMAIN.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

Get your width and height

There are a few numbers you will want to change based on your design and your domain name. The first line of the code above is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">

You want to replace the width and height with the values of your banner graphics. You should know this from creating the graphics previously. There are 2 other places in the code above where you need to replace the width and height. One place is inside the flashvars declaration:

flashvars : {
	file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
	linkfromdisplay : "true",
	shownavigation : "false",
	showicons : "false",
	rotatetime : "6",
	transition : "fade",
	backcolor : "0x000000",
	frontcolor : "0xFFFFFF",
	lightcolor : "0xCC0000",
	width : "857",
	height : "200"},

The last place is in starting the function here:

swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );

NOTE: Be sure to change the domain to your domain name in the paths above.

So all together the code inside your custom_functions.php will look like this. We are first moving the main navigation below the header (this is optional for you) then inserting the banner:

/* MOVING NAV BELOW HEADER */

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

/* Next-Gen Gallery into Header */

remove_action('thesis_hook_header', 'thesis_default_header');
function ngg_custom_header () { ?>

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.ojaigetaway.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.ojaigetaway.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.ojaigetaway.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

<?php }

add_action('thesis_hook_header', 'ngg_custom_header');

CSS and Your Logo

Now that you have the rendering of your banner in place, the thing to do now is get your logo to appear on top and in the position you would like. The code we added to our custom.css file is this:

div#logotype {
	background-color: transparent;
	margin: 0;
	padding: 0;
	display: inline;
	z-index: 2;
	position: relative;
	top: -84px;
}

The key here is to position: relative; and to use negative top margin. This is what will get your logotype to appear on-top of the banner. Be sure to add the z-index in for good measure.

Be sure to save your custom_functions.php and custom.css file and upload via FTP and test, test test!

Wrap Up

This has been one looonnnnggg tutorial and if you have read to this point, you are both patient and persistent. You can see the banner that I have based this tutorial off of here at OjaiGetaway.com which is a web site in progress.

Do let me know if you have any questions about this process. I will help as best we can.

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, , , ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.

  • Thanks for another great tut, Bert! Very much appreciated.

  • Thanks for another great tut, Bert! Very much appreciated.

  • One of the most detailed and useful Thesis tutorials I’ve seen … Great Job!

  • One of the most detailed and useful Thesis tutorials I’ve seen … Great Job!

  • Outstanding! Great idea, great implementation, and the space you devoted to manipulating graphics is a tutorial unto itself.

  • Outstanding! Great idea, great implementation, and the space you devoted to manipulating graphics is a tutorial unto itself.

  • That is AWESOME!!!!

    I have to thank you for this tutorial for now creating more work for me. 🙂

    Now I want/will do this on my sites

    Loren

  • That is AWESOME!!!!

    I have to thank you for this tutorial for now creating more work for me. 🙂

    Now I want/will do this on my sites

    Loren

  • Neil

    Love it. Thanks for a great tutorial.
    However, while the result looks great on my Mac in Safari, Firefox and Opera, when I checked it on a Windows box and IE7, the navbar seems to have moved up behind the title. Things were also out of line when I saw it initially on an ipod.

  • Neil

    Love it. Thanks for a great tutorial.
    However, while the result looks great on my Mac in Safari, Firefox and Opera, when I checked it on a Windows box and IE7, the navbar seems to have moved up behind the title. Things were also out of line when I saw it initially on an ipod.

  • DigitialDoyle, Bruce, Loren,
    Thanks for the compliments on this. Much appreciated.

    The Mules,
    Actually yes the graphics part could be its own tutorial. Did not think that when I wrote it up.

    Neil,
    I took a look this morning with Win/IE7 and everything on my end looks as it should. Could I trouble you for a screen capture of what you are seeing? Let me know if you have any questions.

  • DigitialDoyle, Bruce, Loren,
    Thanks for the compliments on this. Much appreciated.

    The Mules,
    Actually yes the graphics part could be its own tutorial. Did not think that when I wrote it up.

    Neil,
    I took a look this morning with Win/IE7 and everything on my end looks as it should. Could I trouble you for a screen capture of what you are seeing? Let me know if you have any questions.

  • Dan

    Bert,

    This is exactly what I was looking for to use on my next project, looks great and very informative tutorial to boot!

    I echo Neil’s finding/concern though – there is what looks like a misplaced blue bar right under the slide show.

    Hopefully this isn’t one of those things you need to jerk around with to accommodate IE’s flakiness?

  • Dan

    Bert,

    This is exactly what I was looking for to use on my next project, looks great and very informative tutorial to boot!

    I echo Neil’s finding/concern though – there is what looks like a misplaced blue bar right under the slide show.

    Hopefully this isn’t one of those things you need to jerk around with to accommodate IE’s flakiness?

  • Pingback: NextGEN for your Header at alex.rabe()

  • Hi Dan,
    Can you email me a screen shot of what you are seeing?
    I don’t see it on my end.
    Thanks!

  • Hi Dan,
    Can you email me a screen shot of what you are seeing?
    I don’t see it on my end.
    Thanks!

  • flogee

    how can we have alternative content (like a static image) if the browser has no flash support? thanks

    • Hi flogee,
      Are you asking if the site detects no Flash support to show a static image instead? Making it conditional?
      You would need to do that inside the code at the top where it tests for Flash. If there was no flash you would insert the static image instead of the slideshow.
      Additionally there is also the issue of Javascript support within the browser as well. You may need to test for that too.

  • flogee

    how can we have alternative content (like a static image) if the browser has no flash support? thanks

    • Hi flogee,
      Are you asking if the site detects no Flash support to show a static image instead? Making it conditional?
      You would need to do that inside the code at the top where it tests for Flash. If there was no flash you would insert the static image instead of the slideshow.
      Additionally there is also the issue of Javascript support within the browser as well. You may need to test for that too.

  • Hi,

    A wonderful, wonderful plugin!
    So far, I get the slideshow to work on my testpage (“Galleritest”), but I can´t move it from the content area to the header. (Also, my logo will not show, although it´s in the …/custom/images folder).

    I assume I should just delete the test gallery and place it in the header area. But how…?

    Now, nothing else matters.

    • Hi Swede,
      There is one part of the tutorial that shows the code and how to put everything in the header.
      Look for the title “What Is The Code?” It is about 3/4 of the way down the page.
      The comment on the code starts with:
      /* MOVING NAV BELOW HEADER */
      .....

      Let me know if you have any questions.
      Hope this helps.

  • Hi,

    A wonderful, wonderful plugin!
    So far, I get the slideshow to work on my testpage (“Galleritest”), but I can´t move it from the content area to the header. (Also, my logo will not show, although it´s in the …/custom/images folder).

    I assume I should just delete the test gallery and place it in the header area. But how…?

    Now, nothing else matters.

    • Hi Swede,
      There is one part of the tutorial that shows the code and how to put everything in the header.
      Look for the title “What Is The Code?” It is about 3/4 of the way down the page.
      The comment on the code starts with:
      /* MOVING NAV BELOW HEADER */
      .....

      Let me know if you have any questions.
      Hope this helps.

  • You are my new hero. I know Ojai Today is still a work in progress, but I had to feature it in the Thesis Showcase Gallery
    http://www.ThesisGallery.com

    I’ve always been enamoured with transparent headings
    > http://www.SpiralSound.com
    > http://www.YogaBreathWork.com
    and the thought of combining that with a rotating header and with Thesis to boot, well I’m just beside myself

  • You are my new hero. I know Ojai Today is still a work in progress, but I had to feature it in the Thesis Showcase Gallery
    http://www.ThesisGallery.com

    I’ve always been enamoured with transparent headings
    > http://www.SpiralSound.com
    > http://www.YogaBreathWork.com
    and the thought of combining that with a rotating header and with Thesis to boot, well I’m just beside myself

  • Man, cool! Thanks for all the careful details that I had to scroll past, as it’s Greek — but it’s a great post for me to send to someone and say “I’d like to hire you to do this!” Do you have a list of referrals for hourly or project work customization like this? Does anyone?

    Regardless, great post, many thanks.

  • GP

    Man, cool! Thanks for all the careful details that I had to scroll past, as it’s Greek — but it’s a great post for me to send to someone and say “I’d like to hire you to do this!” Do you have a list of referrals for hourly or project work customization like this? Does anyone?

    Regardless, great post, many thanks.

  • Mike

    Hi, this is exactly what I’ve been looking for. thank you

    I do have a question (I’m a beginner at this so it may be a silly question for you)— I created/drew headers on photoshop that I want to incorporate into this rotating header system and in fact I have put the blog title/logo in each header seperately However, I don’t understand how to follow your step “create a layered image file” with all these different headers

    a) is there a way around this “create a layered image file” if I know the headers are already sized properly (does this mean that I will just have to “save for web devices” each file individually?

    b) if it’s simpler can you just tell me how to create a layered image file with these different headers I’ve made

    thank you

    Thank you so much

  • Mike

    Hi, this is exactly what I’ve been looking for. thank you

    I do have a question (I’m a beginner at this so it may be a silly question for you)— I created/drew headers on photoshop that I want to incorporate into this rotating header system and in fact I have put the blog title/logo in each header seperately However, I don’t understand how to follow your step “create a layered image file” with all these different headers

    a) is there a way around this “create a layered image file” if I know the headers are already sized properly (does this mean that I will just have to “save for web devices” each file individually?

    b) if it’s simpler can you just tell me how to create a layered image file with these different headers I’ve made

    thank you

    Thank you so much

  • Mike

    sorry, I know how to move images into a layered document I think (just dragging and dropping from the layer panel into new document) but, if I’m not creating an overlay title is this necessary? and if so, then how do I save these images separately once they’ve been combined?

  • Mike

    sorry, I know how to move images into a layered document I think (just dragging and dropping from the layer panel into new document) but, if I’m not creating an overlay title is this necessary? and if so, then how do I save these images separately once they’ve been combined?

  • gabby

    This plugin is AWESOME!!!!
    But need some help with this…please…I don’t get it to work with the Arclite theme. The gallery test page works fine, but cannot get it to work in the header….any ideas?

  • gabby

    This plugin is AWESOME!!!!
    But need some help with this…please…I don’t get it to work with the Arclite theme. The gallery test page works fine, but cannot get it to work in the header….any ideas?

  • Hi Mike,
    You need to turn the visibility of the layers on/off to show what you want. When you have it, save out a version of that for the web. Hope this helps.

    Hi gabby,
    I don’t have experience with the Arclite theme. However, the principles above should work. If Arclite follows “standard” theme development then you would be making the edits to the header.php file. You posted no url where I can see what you are trying to do. Hope this helps.

  • Hi Mike,
    You need to turn the visibility of the layers on/off to show what you want. When you have it, save out a version of that for the web. Hope this helps.

    Hi gabby,
    I don’t have experience with the Arclite theme. However, the principles above should work. If Arclite follows “standard” theme development then you would be making the edits to the header.php file. You posted no url where I can see what you are trying to do. Hope this helps.

  • I too an relatively new to blogging and have a couple of questions if I may.
    :where do i upload the custom files
    :i have a navigation bar showing in my test page I cant seem to find where to remove it from, I am using WP 2.7.1
    Thanx for your tut and help in advance c_j

    • Hi captain_jack,
      the custom files (custom.css and custom_functions.php) need to be uploaded to ~/wp-content/themes/thesis/custom/

      any custom images need to be uploaded to ~/wp-content/themes/thesis/custom/images/

      Hope this helps.

  • I too an relatively new to blogging and have a couple of questions if I may.
    :where do i upload the custom files
    :i have a navigation bar showing in my test page I cant seem to find where to remove it from, I am using WP 2.7.1
    Thanx for your tut and help in advance c_j

    • Hi captain_jack,
      the custom files (custom.css and custom_functions.php) need to be uploaded to ~/wp-content/themes/thesis/custom/

      any custom images need to be uploaded to ~/wp-content/themes/thesis/custom/images/

      Hope this helps.

  • Pearl Squirrel

    Great tutorial, finally got it figured out how to post it in my header.php and works beautifully. Interesting to see how its for Ojai getaway which is right up the street from me.

    Thanks Again

  • Pearl Squirrel

    Great tutorial, finally got it figured out how to post it in my header.php and works beautifully. Interesting to see how its for Ojai getaway which is right up the street from me.

    Thanks Again

  • captain_jack

    sincerely thank you

  • captain_jack

    sincerely thank you

  • Muy buen tutorial, lo aplicaré a varios proyectos.
    Gracias

  • Muy buen tutorial, lo aplicaré a varios proyectos.
    Gracias

  • Hi again,
    thanks for your assistance. I now have the slideshow working!
    BUT, only on the test page; my header slideshow gets stuck loading…

    I have uploaded five images but don´t use the logo tweak, as I have the logo already in the images. Maybe that causes a short-circuit somewhere? My custom.css currently looks like this (sorry, this will be a long comment on your site…):

    body.custom {
    background: #44443f;
    }

    .custom #container {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0.3em;
    background: #33332f;
    border: 0.4em solid #3e3e3a;
    }

    .custom #page {
    background: #fff;
    }

    div#logotype {
    background-color: transparent;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 2;
    position: relative;
    top: -84px;
    }
    .custom ul#tabs {border-bottom:none; border-left:none; background:#EEEEEE;}
    .custom ul#tabs li {margin-bottom:0; border:none; background:none}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:#FFFFFF}
    .custom ul#tabs li.rss {}
    .custom ul#tabs li a {}
    .custom ul#tabs li a:hover {text-decoration:none; background:#FFFFFF}
    .custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}
    .custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#FFFFFF;}, .custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#FFFFFF}

    .custom #content_box {background-color:#FFFFE0;}
    .custom #content {background-color:#FFFFFF;}

    .custom div.welcome_box {
    width: 90%;
    padding: 0.571em 0.786em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
    margin-bottom: 0em;
    padding-bottom: 0em;
    }

    .custom h3 {
    color:#897E7C;
    }

    #archive_info {display:none;}

    • Hi Konrad,
      I looked at your site with the css you provided. I noticed one thing:

      .custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#FFFFFF;}, .custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#FFFFFF}

      You have an extra comma in there. I removed that, but it still had no effect on your slideshow. There is something going on with the slideshow, or the images.
      Some basic questions: Are your images cropped to the exact size? Are they 72dpi?
      Without looking inside your WordPress admin I’m limited at what I can suggest.

  • Hi again,
    thanks for your assistance. I now have the slideshow working!
    BUT, only on the test page; my header slideshow gets stuck loading…

    I have uploaded five images but don´t use the logo tweak, as I have the logo already in the images. Maybe that causes a short-circuit somewhere? My custom.css currently looks like this (sorry, this will be a long comment on your site…):

    body.custom {
    background: #44443f;
    }

    .custom #container {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0.3em;
    background: #33332f;
    border: 0.4em solid #3e3e3a;
    }

    .custom #page {
    background: #fff;
    }

    div#logotype {
    background-color: transparent;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 2;
    position: relative;
    top: -84px;
    }
    .custom ul#tabs {border-bottom:none; border-left:none; background:#EEEEEE;}
    .custom ul#tabs li {margin-bottom:0; border:none; background:none}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:#FFFFFF}
    .custom ul#tabs li.rss {}
    .custom ul#tabs li a {}
    .custom ul#tabs li a:hover {text-decoration:none; background:#FFFFFF}
    .custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}
    .custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#FFFFFF;}, .custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#FFFFFF}

    .custom #content_box {background-color:#FFFFE0;}
    .custom #content {background-color:#FFFFFF;}

    .custom div.welcome_box {
    width: 90%;
    padding: 0.571em 0.786em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
    margin-bottom: 0em;
    padding-bottom: 0em;
    }

    .custom h3 {
    color:#897E7C;
    }

    #archive_info {display:none;}

    • Hi Konrad,
      I looked at your site with the css you provided. I noticed one thing:

      .custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#FFFFFF;}, .custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#FFFFFF}

      You have an extra comma in there. I removed that, but it still had no effect on your slideshow. There is something going on with the slideshow, or the images.
      Some basic questions: Are your images cropped to the exact size? Are they 72dpi?
      Without looking inside your WordPress admin I’m limited at what I can suggest.

  • Hello there,

    Yeah it looks awesome on firefox and safari, but when i look at it on Internet Explorer on a PC the logo doesn’t show up on the slideshow as well the multi-level navigation isn’t working right, and social profilr images doesn’t show up, i switched the logo file over to a gif, thinking that IE had problems with .png file, but the .gif also doesn’t show up. Is there any extra script that I need to put in or extra code for it to pop up right. If somebody could point me the right direction that would be great.

    Thanks,
    Matthew

    • Hi Pearl Squirrel,
      Sometimes IE does have issues with PNG files and that is dependent on what version you are using.
      Just visited your site in IE and I see the logo floating over the image slideshow.
      Are you still having issues?

  • Hello there,

    Yeah it looks awesome on firefox and safari, but when i look at it on Internet Explorer on a PC the logo doesn’t show up on the slideshow as well the multi-level navigation isn’t working right, and social profilr images doesn’t show up, i switched the logo file over to a gif, thinking that IE had problems with .png file, but the .gif also doesn’t show up. Is there any extra script that I need to put in or extra code for it to pop up right. If somebody could point me the right direction that would be great.

    Thanks,
    Matthew

    • Hi Pearl Squirrel,
      Sometimes IE does have issues with PNG files and that is dependent on what version you are using.
      Just visited your site in IE and I see the logo floating over the image slideshow.
      Are you still having issues?

  • Uh… well, yes… all images are (now) 72 dpi and 857 x 150 px…
    , thanks for that. My container is slightly wider than the header area, but that wouldn´t matter, right?

    It still won´t click. I have excluded the logotype part from your css and php scripts, which would make sense since I´m not using any separate logo.

    Would you get better access if I made all files 777 …?

    Very, very thankfully yours,
    Konrad

  • Uh… well, yes… all images are (now) 72 dpi and 857 x 150 px…
    , thanks for that. My container is slightly wider than the header area, but that wouldn´t matter, right?

    It still won´t click. I have excluded the logotype part from your css and php scripts, which would make sense since I´m not using any separate logo.

    Would you get better access if I made all files 777 …?

    Very, very thankfully yours,
    Konrad

  • yeah i got the issues solved for the logo.png for internet explorer by following this tutorial and inserting a javascript file in the main directory

    http://homepage.ntlworld.com/bobosola/pnghowto.htm

    but if you compare my site on firefox or safari the mutlilevel navigation plugin is pushed down and social profilr png links aren’t visible. If I bring the margin down on my sidebar I can see the social buttons, for some reason I can’t get it to sit on top of the slideshow and there seems to be some automatic bottom margin for the slideshow in internet explorer. I have been playing around with the div tags, but no solution as of yet. So far I solved the other issues by copying and pasting script into the header file, so I’m thinking that may remedy it, but its beyond my design level and haven’t been able to locate somebody with the same problem. Currently trying to remedy it, but if you have any ideas it would be much appreciated.

    Thanks again.

  • yeah i got the issues solved for the logo.png for internet explorer by following this tutorial and inserting a javascript file in the main directory

    http://homepage.ntlworld.com/bobosola/pnghowto.htm

    but if you compare my site on firefox or safari the mutlilevel navigation plugin is pushed down and social profilr png links aren’t visible. If I bring the margin down on my sidebar I can see the social buttons, for some reason I can’t get it to sit on top of the slideshow and there seems to be some automatic bottom margin for the slideshow in internet explorer. I have been playing around with the div tags, but no solution as of yet. So far I solved the other issues by copying and pasting script into the header file, so I’m thinking that may remedy it, but its beyond my design level and haven’t been able to locate somebody with the same problem. Currently trying to remedy it, but if you have any ideas it would be much appreciated.

    Thanks again.

  • Mike

    Mr. Berchman,

    There’s no “custom functions.php” file in the theme I’m working on. Can you suggest another place to put it? There’s a “functions.php” file and lots of others. Any ideas? Thank you

    • Hi Mike,
      I would suggest using header.php.
      Hope this helps.


      Hi Captain Jack,
      Is your setup somewhere I can take a look at it?

  • Mike

    Mr. Berchman,

    There’s no “custom functions.php” file in the theme I’m working on. Can you suggest another place to put it? There’s a “functions.php” file and lots of others. Any ideas? Thank you

    • Hi Mike,
      I would suggest using header.php.
      Hope this helps.


      Hi Captain Jack,
      Is your setup somewhere I can take a look at it?

  • captain_jack

    thanx for everything up till now Berchman ,hoping you have time for another question.
    I have copied the function and css info, changed urls and loaded to mentioned folders, I’m running my test site with xampp on my localhost and was wondering if there was anything else i had to do to get it up and running? c_j

  • captain_jack

    thanx for everything up till now Berchman ,hoping you have time for another question.
    I have copied the function and css info, changed urls and loaded to mentioned folders, I’m running my test site with xampp on my localhost and was wondering if there was anything else i had to do to get it up and running? c_j

  • captain_jack

    i have a blog online http://www.jobquotewindsor.com/blog but currently only have the fuctions and css on my local host
    c_j

  • captain_jack

    i have a blog online http://www.jobquotewindsor.com/blog but currently only have the fuctions and css on my local host
    c_j

  • captain_jack

    i have an online blog but i have added the custom files to my test blog using xampp on my local host

    • Hi Captain Jack,
      I took a look at your site but since I cannot “see” your custom files its impossible for me to help out. Can you put it online in a subdirectory somewhere?

  • captain_jack

    i have an online blog but i have added the custom files to my test blog using xampp on my local host

    • Hi Captain Jack,
      I took a look at your site but since I cannot “see” your custom files its impossible for me to help out. Can you put it online in a subdirectory somewhere?

  • hi,

    thanks for this wonderfull tutorial. I followed it and it was able to implement in my web site.

    A couple of improvements to the original tutorial that may prevent of potential problems:

    -replace “so5_1” for any name in all the script. Reason is that this is the name of a variable automatically generated with the criteria that the digit is the Gallery ID. If for any reason in the same page you are using same gallery ID in header and later on in t he page you get some problems, SO REPLACE IT IN ALL THE SCRIPT.
    -replace “so5” under “name : “so5” for any other string. Same reason as before

    ENJOY

    • Jose,
      Excellent suggestions! Thanks for letting everyone know that info. I am sure it will help.

  • hi,

    thanks for this wonderfull tutorial. I followed it and it was able to implement in my web site.

    A couple of improvements to the original tutorial that may prevent of potential problems:

    -replace “so5_1” for any name in all the script. Reason is that this is the name of a variable automatically generated with the criteria that the digit is the Gallery ID. If for any reason in the same page you are using same gallery ID in header and later on in t he page you get some problems, SO REPLACE IT IN ALL THE SCRIPT.
    -replace “so5” under “name : “so5” for any other string. Same reason as before

    ENJOY

    • Jose,
      Excellent suggestions! Thanks for letting everyone know that info. I am sure it will help.

  • captain_jack

    i hate to sound like im over my head
    1st i also have no custion_function.php in my theme not unlike Mike (above).
    here is the custom_fucntion.php pointing to my local host url

    <?php

    The Flash Player and a browser with Javascript support are needed..

    var so2_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “http://localhost/xampp/blog/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=2”,
    shuffle : “false”,
    shownavigation : “false”,
    showicons : “false”,
    overstretch : “true”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    width : “320”,
    height : “240”},
    attr : {
    styleclass : “slideshow”,
    name : “so2”},
    start : function() {
    swfobject.embedSWF(“http://localhost/xampp/blog/wp-content/uploads/imagerotator.swf”, “so2_1”, “320”, “240”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so2_1.start();

    ?>
    You say to mike to use the header.php to load it to???
    is it just a copy and paste?
    Again sorry for needing this spoon feeding

  • captain_jack

    i hate to sound like im over my head
    1st i also have no custion_function.php in my theme not unlike Mike (above).
    here is the custom_fucntion.php pointing to my local host url

    <?php

    The Flash Player and a browser with Javascript support are needed..

    var so2_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “http://localhost/xampp/blog/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=2”,
    shuffle : “false”,
    shownavigation : “false”,
    showicons : “false”,
    overstretch : “true”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    width : “320”,
    height : “240”},
    attr : {
    styleclass : “slideshow”,
    name : “so2”},
    start : function() {
    swfobject.embedSWF(“http://localhost/xampp/blog/wp-content/uploads/imagerotator.swf”, “so2_1”, “320”, “240”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so2_1.start();

    ?>
    You say to mike to use the header.php to load it to???
    is it just a copy and paste?
    Again sorry for needing this spoon feeding

  • Great article, I have included a few modifications to your steps below as some users might find it helpful…

    A) WORDPRESS SIMPLE GENERIC DOMAIN.COM TEMPLATE CODE:
    If using wordpress simply replace http://www.YOUR_DOMAIN.com/
    with
    /…
    —————————-

    B) SIMPLE ONE LINE CODE TO FLOAT LOGO OVER SLIDE SHOW:

    CSS and Your Logo:
    Scrap that step and just add the following line to the “flashvars” code to get your logo to appear over the slideshow.

    logo : “/images/YOUR IMAGE.png”,

    EXAMPLE:

    flashvars : {
    file : “/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    rotatetime : “6”,
    transition : “fade”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    logo : “/images/YOUR IMAGE.png”,
    lightcolor : “0xCC0000”,
    width : “857”,
    height : “200”},
    ——————————-

    C) Ignore header bit and simply paste the source code in to a php file then call is from within your header as follows…

    1) Copy the following code where you want the slideshow to appear in header or anywhere inside your theme in WordPress, but normally from header.php if using the example as a header replacement:

    2) Copy and past this code in to a file called custom_functions.php:

    The Flash Player and a browser with Javascript support are needed..

    var so5_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    rotatetime : “6”,
    transition : “fade”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    logo : “/images/YOUR IMAGE.png”,
    width : “857”,
    height : “200”},
    attr : {
    styleclass : “slideshow”,
    name : “so5”},
    start : function() {
    swfobject.embedSWF(“/wp-content/uploads/imagerotator.swf”, “so5_1”, “857”, “200”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so5_1.start();

    <img src=”/wp-content/themes/thesis/custom/images/typeface.png” alt=””>

    ——————-

    Enjoy!

    N.

    • Nimwit,
      Grazie for posting your alternate takes on the code.

  • Great article, I have included a few modifications to your steps below as some users might find it helpful…

    A) WORDPRESS SIMPLE GENERIC DOMAIN.COM TEMPLATE CODE:
    If using wordpress simply replace http://www.YOUR_DOMAIN.com/
    with
    /…
    —————————-

    B) SIMPLE ONE LINE CODE TO FLOAT LOGO OVER SLIDE SHOW:

    CSS and Your Logo:
    Scrap that step and just add the following line to the “flashvars” code to get your logo to appear over the slideshow.

    logo : “/images/YOUR IMAGE.png”,

    EXAMPLE:

    flashvars : {
    file : “/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    rotatetime : “6”,
    transition : “fade”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    logo : “/images/YOUR IMAGE.png”,
    lightcolor : “0xCC0000”,
    width : “857”,
    height : “200”},
    ——————————-

    C) Ignore header bit and simply paste the source code in to a php file then call is from within your header as follows…

    1) Copy the following code where you want the slideshow to appear in header or anywhere inside your theme in WordPress, but normally from header.php if using the example as a header replacement:

    2) Copy and past this code in to a file called custom_functions.php:

    The Flash Player and a browser with Javascript support are needed..

    var so5_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    rotatetime : “6”,
    transition : “fade”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    logo : “/images/YOUR IMAGE.png”,
    width : “857”,
    height : “200”},
    attr : {
    styleclass : “slideshow”,
    name : “so5”},
    start : function() {
    swfobject.embedSWF(“/wp-content/uploads/imagerotator.swf”, “so5_1”, “857”, “200”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so5_1.start();

    <img src=”/wp-content/themes/thesis/custom/images/typeface.png” alt=””>

    ——————-

    Enjoy!

    N.

    • Nimwit,
      Grazie for posting your alternate takes on the code.

  • darn code won’t paste step 2 is _/

    remove all the _

  • darn code won’t paste step 2 is _/

    remove all the _

  • captain_jack

    Issue Resolved !!!!
    Got myself Thesis fantastic stuff
    Now if i could only figure out how to change my font color yikes!!!

  • captain_jack

    Issue Resolved !!!!
    Got myself Thesis fantastic stuff
    Now if i could only figure out how to change my font color yikes!!!

  • Beautiful result on Ojai site.
    Thanks for an excellent tutorial. I was looking to do something like this for my site and you must had read my mind.

  • Beautiful result on Ojai site.
    Thanks for an excellent tutorial. I was looking to do something like this for my site and you must had read my mind.

  • Rupert

    Has anyone managed to embed a hyperlink to individual images?

    If I wanted to use the slide show to make a set of ‘adverts’ for features on the site; would I be able to use the slide show to link direct (_self) to that page?

    I have done so in Flash before, but I do not have the source fla to embed links?

    • Hi Rupert,
      I have not been able to do that. Actually have not tried it. You may want to ask your question on the official support area for the plugin on the wordpress.org site here: http://wordpress.org/tags/nextgen-gallery

      Hope this helps.

  • Rupert

    Has anyone managed to embed a hyperlink to individual images?

    If I wanted to use the slide show to make a set of ‘adverts’ for features on the site; would I be able to use the slide show to link direct (_self) to that page?

    I have done so in Flash before, but I do not have the source fla to embed links?

    • Hi Rupert,
      I have not been able to do that. Actually have not tried it. You may want to ask your question on the official support area for the plugin on the wordpress.org site here: http://wordpress.org/tags/nextgen-gallery

      Hope this helps.

  • Hi berchman…how do I get the header and images to stick to the top in the browser like on the Ojai site….
    http://kvisvik-camping.com

    • Looks like you have it taken care of.

  • Hi berchman…how do I get the header and images to stick to the top in the browser like on the Ojai site….
    http://kvisvik-camping.com

    • Looks like you have it taken care of.

  • gabby

    problem solved….customizing custom.css did the trick…

  • gabby

    problem solved….customizing custom.css did the trick…

  • Lee

    Hi Berchman,

    I insert my code (see below) as you instructed into my custom_functions.php file. But when I loaded my website, I see an error (please click goto http://www.americangovt.net to see error)

    My code is as follows:

    * MOVING NAV BELOW HEADER */

    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

    /* Next-Gen Gallery into Header */

    remove_action(‘thesis_hook_header’, ‘thesis_default_header’);
    function ngg_custom_header () { ?>

    The Flash Player and a browser with Javascript support are needed..

    var so1_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “http://americangovt.net/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    overstretch : “true”,
    rotatetime : “10”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    width : “320”,
    height : “240”},
    attr : {
    styleclass : “slideshow”,
    name : “so1”},
    start : function() {
    swfobject.embedSWF(“http://www.americangovt.net/wp-content/uploads/imagerotator/imagerotator.swf”, “so1_1”, “320”, “240”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so1_1.start();

    <?php }

    add_action(‘thesis_hook_header’, ‘ngg_custom_header’);

    • Hi Lee,
      Can you email me your custom_functions.php file?
      I will take a look.

      • Salim

        hi Berchman,
        I have a similar problem. i.e I get “The Flash Player and a browser with Javascript support are needed..”.

        I have followed your instruction step by step. The slideshow in a test page work fine. Indicating the underlying technology is working fine. But other than this the header comes blank with the above mentioned error message.
        BTW I am trying your tutorial on locally installed version of wp(3.04) and thesis 1.8 and both flash driver is installed as well as JS enabled.

        Any suggestion will be highly appreciated.
        Salim

  • Lee

    Hi Berchman,

    I insert my code (see below) as you instructed into my custom_functions.php file. But when I loaded my website, I see an error (please click goto http://www.americangovt.net to see error)

    My code is as follows:

    * MOVING NAV BELOW HEADER */

    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

    /* Next-Gen Gallery into Header */

    remove_action(‘thesis_hook_header’, ‘thesis_default_header’);
    function ngg_custom_header () { ?>

    The Flash Player and a browser with Javascript support are needed..

    var so1_1 = {
    params : {
    wmode : “opaque”,
    allowfullscreen : “true”},
    flashvars : {
    file : “http://americangovt.net/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1”,
    linkfromdisplay : “true”,
    shownavigation : “false”,
    showicons : “false”,
    overstretch : “true”,
    rotatetime : “10”,
    backcolor : “0x000000”,
    frontcolor : “0xFFFFFF”,
    lightcolor : “0xCC0000”,
    width : “320”,
    height : “240”},
    attr : {
    styleclass : “slideshow”,
    name : “so1”},
    start : function() {
    swfobject.embedSWF(“http://www.americangovt.net/wp-content/uploads/imagerotator/imagerotator.swf”, “so1_1”, “320”, “240”, “7.0.0”, false, this.flashvars, this.params , this.attr );
    }
    }
    so1_1.start();

    <?php }

    add_action(‘thesis_hook_header’, ‘ngg_custom_header’);

    • Hi Lee,
      Can you email me your custom_functions.php file?
      I will take a look.

  • Hi captain_jack,
    glad you got onto Thesis. To change font-colour if you have not found it yet is inside /themes/thesis/custom/custom.css

    Let me know if you have any questions.
    Hope this helps.

  • Great tutorial, thanks a lot!
    I do have one problem that i just can’t sort out, there is a huge space between my header and my nav menu right below it. I just can’t figure out what is causing it.

    • Hi Joseph, It appears that you have fixed it. When I visit your site I see equal spacing around your entire nav menu. Let me know if you have any questions.

  • Great tutorial, thanks a lot!
    I do have one problem that i just can’t sort out, there is a huge space between my header and my nav menu right below it. I just can’t figure out what is causing it.

    • Hi Joseph, It appears that you have fixed it. When I visit your site I see equal spacing around your entire nav menu. Let me know if you have any questions.

  • Awesome tutorial. Very easy to follow for a non-technical person. I have one issue that has nothing to do with the plug-in and everything to do with the fact that I’m new to Thesis.
    The plug in works great, but I have a huge gap between my header and post. I added the code below to custom.css to remove the gap, but there’s likely a better way….I’m guessing a hook to remove a piece of the template. I realize my question is better suited for help boards, but figured I would ask.

    .custom #content_box {position:relative; top:-160px;}

    #header { border-bottom: none; clear: both; }

    Thanks Again for KICK a @ss tutorial!

  • Awesome tutorial. Very easy to follow for a non-technical person. I have one issue that has nothing to do with the plug-in and everything to do with the fact that I’m new to Thesis.
    The plug in works great, but I have a huge gap between my header and post. I added the code below to custom.css to remove the gap, but there’s likely a better way….I’m guessing a hook to remove a piece of the template. I realize my question is better suited for help boards, but figured I would ask.

    .custom #content_box {position:relative; top:-160px;}

    #header { border-bottom: none; clear: both; }

    Thanks Again for KICK a @ss tutorial!

  • Hi Keith, Your comment above makes me think it has to do with the tag. However, I wouldn’t know exactly without looking at the code on the html and css. Let me know if you have any questions.

  • Hi Keith, Your comment above makes me think it has to do with the < h1 > tag. However, I wouldn’t know exactly without looking at the code on the html and css. Let me know if you have any questions.

  • Great info here. I just finished implementing it on a new project (I’ve linked it in my name).
    I know ZERO about php, so it is always nice to see in depth tuts that involve editing the custom files.

    I’m still having a few issues, but I’m tired and still need to do a bit of digging before I post them here 🙂 I’ll be sure to post my solutions if I find them.

    Thanks again.

  • Great info here. I just finished implementing it on a new project (I’ve linked it in my name).
    I know ZERO about php, so it is always nice to see in depth tuts that involve editing the custom files.

    I’m still having a few issues, but I’m tired and still need to do a bit of digging before I post them here 🙂 I’ll be sure to post my solutions if I find them.

    Thanks again.

  • Pingback: 100 Tài nguyên h?u ích cho ng??i s? d?ng Wordpress Thesis Theme | GI?I PHÁP S?()

  • noam

    great tutorial amazing devotion
    thanks!

  • noam

    great tutorial amazing devotion
    thanks!

  • noam

    (P.S.)
    been struggling with that div#logotype
    it creates a gap between the header and the rest
    and that gap = my logo’s hight exactly.
    can’t figure it out wonder what i’m doin wrong
    must have an spare line/command somewhere
    would appreciate advice:
    http://noam.motif.co.il/wordpress
    (please ignore the dummy-content.. it’s just there for now :S)

  • noam

    (P.S.)
    been struggling with that div#logotype
    it creates a gap between the header and the rest
    and that gap = my logo’s hight exactly.
    can’t figure it out wonder what i’m doin wrong
    must have an spare line/command somewhere
    would appreciate advice:
    http://noam.motif.co.il/wordpress
    (please ignore the dummy-content.. it’s just there for now :S)

  • PSG

    I’m having the same problem, gap between header and body. I’ve noticed alot of ppl have fixed it, any suggestions?

  • PSG

    I’m having the same problem, gap between header and body. I’ve noticed alot of ppl have fixed it, any suggestions?

  • noam

    @PSG:
    a friend fixed mine
    in custom.css at div#logotype paragraph
    he changed position to absolute
    so now it’s: position: absolute;
    (and then played with the “top” value again)
    hope it helps you too

  • noam

    @PSG:
    a friend fixed mine
    in custom.css at div#logotype paragraph
    he changed position to absolute
    so now it’s: position: absolute;
    (and then played with the “top” value again)
    hope it helps you too

  • PSG

    Thanks! I’ll check it out.

    • @PSG I am wondering if that worked out for you. I think people are finding that depending on what their needs are they need to tweak the CSS to suit. Let me know if you have any questions.

  • PSG

    Thanks! I’ll check it out.

    • @PSG I am wondering if that worked out for you. I think people are finding that depending on what their needs are they need to tweak the CSS to suit. Let me know if you have any questions.

  • Pingback: 100 Resources for Thesis Wordpress Theme Users | MattFlies.com()

  • blackssassy

    Thanks for the great tutorial! Very easy to follow. I have one question, once I embedded the slideshow into my header I now have a lot of space between my header and nav bar. Could you take a look and give me some insight as to why this occurring?

    Thanks in advance!

  • blackssassy

    Thanks for the great tutorial! Very easy to follow. I have one question, once I embedded the slideshow into my header I now have a lot of space between my header and nav bar. Could you take a look and give me some insight as to why this occurring?

    Thanks in advance!

    Nevermind! I just saw the post about mine and changed the relative to absolute. That worked like a gem! Thanks again for the awesome tutorial!

  • berchman

    Can you let me know what your URL is?

  • Can you let me know what your URL is?

  • blackssassy

    http://www.mid-valleywomenofchrist.org…I'm now just trying to fix the z-index for my logo…

  • blackssassy

    http://www.mid-valleywomenofchrist.org. I'm now just trying to fix the z-index for my logo…

  • berchman

    Looks like there is a border in there.

    Try using these:

    .custom #header {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    border-style: none;
    }

    div#so6_1.swfobject {
    margin: 0 auto;
    padding: 0;
    }

    ul#tabs {
    border-style: none;
    }

  • Looks like there is a border in there.

    Try using these:

    .custom #header {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    border-style: none;
    }

    div#so6_1.swfobject {
    margin: 0 auto;
    padding: 0;
    }

    ul#tabs {
    border-style: none;
    }

  • blackssassy

    Thanks for the great tutorial! Very easy to follow. I have one question, once I embedded the slideshow into my header I now have a lot of space between my header and nav bar. Could you take a look and give me some insight as to why this occurring?

    Thanks in advance!

    Nevermind! I just saw the post about mine and changed the relative to absolute. That worked like a gem! Thanks again for the awesome tutorial!

  • Can you let me know what your URL is?

  • blackssassy

    http://www.mid-valleywomenofchrist.org. I'm now just trying to fix the z-index for my logo…

  • blackssassy

    One last question :0)… Is there a way to use images in the slideshow with a transparent background? I tried using the png format, but the nextgen automatically gives them a black background.

  • blackssassy

    One last question :0)… Is there a way to use images in the slideshow with a transparent background? I tried using the png format, but the nextgen automatically gives them a black background.

  • Looks like there is a border in there.

    Try using these:

    .custom #header {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    border-style: none;
    }

    div#so6_1.swfobject {
    margin: 0 auto;
    padding: 0;
    }

    ul#tabs {
    border-style: none;
    }

  • berchman

    To the best of my knowledge this is a limitation of Next-Gen. I did
    look into this but did not find info on how to do it. If you come
    across it I would love to hear how. Hope this helps.

  • To the best of my knowledge this is a limitation of Next-Gen. I did
    look into this but did not find info on how to do it. If you come
    across it I would love to hear how. Hope this helps.

  • blackssassy

    I found this, but its way beyond my scope of knowledge and not even sure that it would work.

    http://www.akemapa.com/2008/07/10/php-gd-resize

    Oh well. It still looks good, I just was hoping to use transparent images.

  • blackssassy

    I found this, but its way beyond my scope of knowledge and not even sure that it would work.

    http://www.akemapa.com/2008/07/10/php-gd-resize

    Oh well. It still looks good, I just was hoping to use transparent images.

  • blackssassy

    One last question :0)… Is there a way to use images in the slideshow with a transparent background? I tried using the png format, but the nextgen automatically gives them a black background.

  • To the best of my knowledge this is a limitation of Next-Gen. I did
    look into this but did not find info on how to do it. If you come
    across it I would love to hear how. Hope this helps.

  • blackssassy

    I found this, but its way beyond my scope of knowledge and not even sure that it would work.

    http://www.akemapa.com/2008/07/10/php-gd-resize

    Oh well. It still looks good, I just was hoping to use transparent images.

  • blackssassy

    Thanks for the great tutorial! Very easy to follow. I have one question, once I embedded the slideshow into my header I now have a lot of space between my header and nav bar. Could you take a look and give me some insight as to why this occurring?

    Thanks in advance!

    Nevermind! I just saw the post about mine and changed the relative to absolute. That worked like a gem! Thanks again for the awesome tutorial!

  • Can you let me know what your URL is?

  • blackssassy

    http://www.mid-valleywomenofchrist.org. I'm now just trying to fix the z-index for my logo…

  • Looks like there is a border in there.

    Try using these:

    .custom #header {

    background: #FFFFFF;

    margin: 0;

    padding: 0;

    border-style: none;

    }

    div#so6_1.swfobject {

    margin: 0 auto;

    padding: 0;

    }

    ul#tabs {

    border-style: none;

    }

  • blackssassy

    One last question :0)… Is there a way to use images in the slideshow with a transparent background? I tried using the png format, but the nextgen automatically gives them a black background.

  • To the best of my knowledge this is a limitation of Next-Gen. I did

    look into this but did not find info on how to do it. If you come

    across it I would love to hear how. Hope this helps.

  • blackssassy

    I found this, but its way beyond my scope of knowledge and not even sure that it would work.

    http://www.akemapa.com/2008/07/10/php-gd-resize-transparent-image-png-gif/

    Oh well. It still looks good, I just was hoping to use transparent images.

  • Pingback: Thesis Tutorial: Dynamic Image Header with Transparent Logo — berchman.com()

  • lon247

    just wanted to say this is frickin' brilliant… i didn't use any of the code or ngg gallery or anything here, but just understanding how plugins / page source code / and thesis can work together really rocks it for me. thanks dude!

  • Lon

    just wanted to say this is frickin' brilliant… i didn't use any of the code or ngg gallery or anything here, but just understanding how plugins / page source code / and thesis can work together really rocks it for me. thanks dude!

  • Lon

    just wanted to say this is frickin' brilliant… i didn't use any of the code or ngg gallery or anything here, but just understanding how plugins / page source code / and thesis can work together really rocks it for me. thanks dude!

  • Lon

    just wanted to say this is frickin' brilliant… i didn't use any of the code or ngg gallery or anything here, but just understanding how plugins / page source code / and thesis can work together really rocks it for me. thanks dude!

  • argab

    Off topic…how do you put this Discus Comment on your website?

  • – for kvisvik camping

    Off topic…how do you put this Discus Comment on your website?

  • – for kvisvik camping

    Off topic…how do you put this Discus Comment on your website?

  • argab,
    Excellent question! I will make it a tutorial and post.
    Let me know if you have any questions.
    Thanks.

    • Hi captain_jack,
      glad you got onto Thesis. To change font-colour if you have not found it yet is inside /themes/thesis/custom/custom.css

      Let me know if you have any questions.
      Hope this helps.

  • argab,
    Excellent question! I will make it a tutorial and post.
    Let me know if you have any questions.
    Thanks.

  • – for kvisvik camping

    Off topic…how do you put this Discus Comment on your website?

  • argab,
    Excellent question! I will make it a tutorial and post.
    Let me know if you have any questions.
    Thanks.

  • argab,
    Excellent question! I will make it a tutorial and post.
    Let me know if you have any questions.
    Thanks.

  • argab

    Hi berchman..
    How can I put a picture or (rss-icon) partially inside/outside my header…I'm using dynamic image header without floating logo…see site: http://www.kvisvik-camping.no
    -regards argab

  • – for kvisvik camping

    Hi berchman..
    How can I put a picture or (rss-icon) partially inside/outside my header…I'm using dynamic image header without floating logo…see site: http://www.kvisvik-camping.no
    -regards argab

  • – for kvisvik camping

    Hi berchman..
    How can I put a picture or (rss-icon) partially inside/outside my header…I'm using dynamic image header without floating logo…see site: http://www.kvisvik-camping.no
    -regards argab

  • – for kvisvik camping

    Hi berchman..
    How can I put a picture or (rss-icon) partially inside/outside my header…I'm using dynamic image header without floating logo…see site: http://www.kvisvik-camping.no
    -regards argab

  • mayabzz

    Hi! I'm really having trouble installing this animated header.
    I'm using Fjords Theme which is really a painfull one but it's too late to change my mind.
    At the beginning i wanted to embed a flash movie but i couldn't and thought NGG would be a solution, but it's not so far!
    I've done all the steps of your tutorial which is really clear, thank you but in my case, it's a little bit different because my header background repeats itself in each sidebar with a different x position.
    The header images are 1180×200 and not 900 x 200 as the original theme.

    To understand my problem, i'm copying my codes :

    Here is a part of my style.css :

    body {
    background-color:#DDE5D9;
    font:11px “Lucida Sans Unicode”, “Lucida Sans”, verdana, arial, helvetica;
    color:#888;
    }

    a,a:hover {
    color:#de1c85;
    text-decoration:none;
    }

    #wrapper {
    padding-left:0;
    width:970px;
    margin-left:auto;
    margin-right:auto;
    }

    #mini-nav {
    width:20px;
    float:left;
    padding-top:30px;
    position:fixed;
    margin:5px;
    }

    #mini-nav img {
    margin:1px;
    }

    #hode {
    width:250px;
    color:#ffffff;
    height:170px;
    text-align:left;
    clear:both;
    background:transparent;
    margin:5px;
    padding:10px 0 0;
    }

    #content,#sidebar-1,#sidebar-2,#sidebar-3{
    background:#ffffff url('imagenes_qwilm/head-antoun.jpg') no-repeat top left;
    overflow:hidden;
    }

    #content {
    width:490px;
    text-align:left;
    border-top:solid 1px #CED4CA;
    border-bottom:solid 3px #CED4CA;
    border-left:solid 1px #CED4CA;
    border-right:solid 3px #CED4CA;
    float:left;
    margin:5px;
    padding:0 15px 30px;
    background-position:-1px 0;
    }

    #sidebar-1 {
    width:170px;
    background-position:-525px 0;
    }

    #sidebar-2 {
    width:170px;
    background-position:-745px 0;
    }

    #sidebar-3 {
    width:170px;
    background-position:-978px 0;
    }

    #logo {
    width:140px;
    padding:10px;
    }

    .sidebar {
    text-align:left;
    border-top:solid 1px #CED4CA;
    border-bottom:solid 3px #CED4CA;
    border-left:solid 1px #CED4CA;
    border-right:solid 3px #CED4CA;
    float:left;
    background:#ffffff;
    font-size:.9em;
    margin:5px;
    padding:220px 15px 30px;
    }
    ….

    The Header.php :

    <!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(); ?> <?php bloginfo('name'); ?></title>

    <meta name=”generator” content=”WordPress.com” />

    <style type=”text/css” media=”screen”>
    @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style>

    <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo('rss2_url'); ?>” />
    <link rel=”pingback” href=”<?php bloginfo('pingback_url'); ?>” />

    <?php wp_head(); ?>

    </head>

    <body>

    <div id=”wrapper”>

    <div id=”content”>

    <div id=”hode”>
    <h4><a href=”<?php echo get_settings('home'); ?>”><?php bloginfo('title'); ?></h4>
    <span><?php bloginfo('description'); ?></span>
    </div>

    And the last one : functions.php

    <?php
    if ( function_exists('register_sidebars') )
    register_sidebars(3);

    function resize_youtube( $content ) {
    return str_replace( “width='425' height='350'></embed>”, “width='240' height='197'></embed>”, $content );
    }
    add_filter( 'the_content', 'resize_youtube', 999 );

    $themecolors = array(
    'bg' => 'ffffff',
    'text' => '888888',
    'link' => '8AB459'
    );

    $content_width = 270;

    define('HEADER_TEXTCOLOR', 'ffffff');
    define('HEADER_IMAGE', '%s/imagenes_qwilm/beach.jpg'); // %s is theme dir uri
    define('HEADER_IMAGE_WIDTH', 900);
    define('HEADER_IMAGE_HEIGHT', 200);

    function header_style() {
    ?>
    <style type=”text/css”>
    #content, #sidebar-1, #sidebar-2, #sidebar-3 {
    background-image:url(<?php header_image() ?>);
    }
    <?php if ( 'blank' == get_header_textcolor() ) { ?>
    #hode h4, #hode span {
    display: none;
    }
    <?php } else { ?>
    #hode a, #hode {
    color: #<?php header_textcolor() ?>;
    }
    <?php } ?>
    </style>
    <?php
    }

    function admin_header_style() {
    ?>

    <style type=”text/css”>
    #headimg {
    height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
    }

    #headimg h1 {
    font-family: “Lucida Grande”,Tahoma,Arial,sans-serif;
    font-size: 17px;
    font-weight: bold;
    margin-left: 15px;
    padding-top: 15px;
    }
    #headimg h1 a {
    color:#<?php header_textcolor() ?>;
    border: none;
    text-decoration: none;
    }
    #headimg a:hover
    {
    text-decoration:underline;
    }
    #headimg #desc
    {
    font-weight:normal;
    color:#<?php header_textcolor() ?>;
    margin-left: 15px;
    padding: 0;
    margin-top: -10px;
    font-family: “Lucida Grande”,Tahoma,Arial,sans-serif;
    font-size: 11px;
    }

    <?php if ( 'blank' == get_header_textcolor() ) { ?>
    #headerimg h1, #headerimg #desc {
    display: none;
    }
    #headimg h1 a, #headimg #desc {
    color:#<?php echo HEADER_TEXTCOLOR ?>;
    }
    <?php } ?>

    </style>

    <?php }

    add_custom_image_header('header_style', 'admin_header_style');

    ?>

    Do you think you could help me solving this problem? I'm waisting so much time trying every possiblities!

    Merci beaucoup!

    Maya

  • catharineburhenne

    I get stuck at the Gallery plug-in part of this tutorial since whenever I click to upload a new image, everything goes blank. It looks like something is wrong with the plug-in – is it possible I installed it incorrectly?
    Thanks so much!

  • catharineburhenne

    I get stuck at the Gallery plug-in part of this tutorial since whenever I click to upload a new image, everything goes blank. It looks like something is wrong with the plug-in – is it possible I installed it incorrectly?
    Thanks so much!

  • catharineburhenne

    I get stuck at the Gallery plug-in part of this tutorial since whenever I click to upload a new image, everything goes blank. It looks like something is wrong with the plug-in – is it possible I installed it incorrectly?
    Thanks so much!

  • catharineburhenne

    I get stuck at the Gallery plug-in part of this tutorial since whenever I click to upload a new image, everything goes blank. It looks like something is wrong with the plug-in – is it possible I installed it incorrectly?

    Thanks so much!

  • Catherine, that is the first thing I would do. Reinstall the plugin
    and give it another go.

  • Catherine, that is the first thing I would do. Reinstall the plugin
    and give it another go.

  • Catherine, that is the first thing I would do. Reinstall the plugin
    and give it another go.

  • Catherine, that is the first thing I would do. Reinstall the plugin

    and give it another go.

  • catharineburhenne

    I've done just that to no avail – any other troubleshooting tips? Thanks again so much.

    Catharine

  • catharineburhenne

    I've done just that to no avail – any other troubleshooting tips? Thanks again so much.

    Catharine

  • catharineburhenne

    I've done just that to no avail – any other troubleshooting tips? Thanks again so much.

    Catharine

  • You say the screen goes “white” when you upload. To me that suggests a
    PHP error. It could be that your server does not support image
    uploading, or the directory you are trying to upload images to does
    not have the correct permissions. You would need to look at the error
    logs to see what is happening and understand specifically what the
    issue is.
    Hope this helps.

  • You say the screen goes “white” when you upload. To me that suggests a
    PHP error. It could be that your server does not support image
    uploading, or the directory you are trying to upload images to does
    not have the correct permissions. You would need to look at the error
    logs to see what is happening and understand specifically what the
    issue is.
    Hope this helps.

  • You say the screen goes “white” when you upload. To me that suggests a
    PHP error. It could be that your server does not support image
    uploading, or the directory you are trying to upload images to does
    not have the correct permissions. You would need to look at the error
    logs to see what is happening and understand specifically what the
    issue is.
    Hope this helps.

  • You say the screen goes “white” when you upload. To me that suggests a
    PHP error. It could be that your server does not support image
    uploading, or the directory you are trying to upload images to does
    not have the correct permissions. You would need to look at the error
    logs to see what is happening and understand specifically what the
    issue is.
    Hope this helps.

  • catharineburhenne

    I've done just that to no avail – any other troubleshooting tips? Thanks again so much.

    Catharine

  • catharineburhenne

    I've done just that to no avail – any other troubleshooting tips? Thanks again so much.

    Catharine

  • You say the screen goes “white” when you upload. To me that suggests a
    PHP error. It could be that your server does not support image
    uploading, or the directory you are trying to upload images to does
    not have the correct permissions. You would need to look at the error
    logs to see what is happening and understand specifically what the
    issue is.
    Hope this helps.

  • You say the screen goes “white” when you upload. To me that suggests a

    PHP error. It could be that your server does not support image

    uploading, or the directory you are trying to upload images to does

    not have the correct permissions. You would need to look at the error

    logs to see what is happening and understand specifically what the

    issue is.

    Hope this helps.

  • Pingback: uberVU - social comments()

  • Pingback: 71 Best Tutorials for Thesis Wordpress Theme Users()

  • londonderrylaura

    Help! I got to the step “Tweak the Settings” and it did not fill in the path to the Imagerotator, so I had to get JW Image Rotator. Two questions:

    1. At the Setup Wizard I don't know what to choose at this screen. (http://www.longtailvideo.com/support/jw-player-…). If anybody could send me the proper code, I'd be most appreciative.

    2. I also don't know where to copy the embed code. I did switch it to the blog example.

  • londonderrylaura

    Help! I got to the step “Tweak the Settings” and it did not fill in the path to the Imagerotator, so I had to get JW Image Rotator. Two questions:

    1. At the Setup Wizard I don't know what to choose at this screen. (http://www.longtailvideo.com/support/jw-player-…). If anybody could send me the proper code, I'd be most appreciative.

    2. I also don't know where to copy the embed code. I did switch it to the blog example.

    My website is MLANS.COM

  • lorennason

    Rick,

    Could something similar be done but except in the header make it below the nav and then lay a form on top of it floating in front of the pics?

  • lorennason

    Rick,

    Could something similar be done but except in the header make it below the nav and then lay a form on top of it floating in front of the pics?

  • Ken

    Thanks for the great tutorial! I have it working well on a site I am building.

    Just an advisory . . . I am running NextGen 1.4.3. . . works great. But, then I upgraded to 1.5.2 and the the header slideshow stopped running. I reverted back to 1.4.3 and all is well. Maybe its just me but I figured I should comment.

    ksac

  • Ken

    Thanks for the great tutorial! I have it working well on a site I am building.

    Just an advisory . . . I am running NextGen 1.4.3. . . works great. But, then I upgraded to 1.5.2 and the the header slideshow stopped running. I reverted back to 1.4.3 and all is well. Maybe its just me but I figured I should comment.

    ksac

  • Pingback: The Ultimate Guide of Tutorials and Resources for Thesis Theme Users()

  • Pingback: 47 Customizations for the Thesis Theme()

  • Berchman! Awesome tutorial dude!
    Check out my end result..
    http://www.lancesnead.com/big-bend/panoramas/

  • Jennifer

    Thanks so much for this excellent tutorial! Everything worked just as expected.

  • Jennifer

    Thanks so much for this excellent tutorial! Everything worked just as expected.

  • Jennifer

    Thanks so much for this excellent tutorial! Everything worked just as expected.

  • Hi Lance,
    Thanks for sharing. Your site looks great. Really like your photos.

  • Hi Lance,
    Thanks for sharing. Your site looks great. Really like your photos.

  • hi Berchman,

    First of all thanks for your great tutorial. Got one question: I added one page to get the code [nggalleryid=5], but everytime I go to that page, the header images do not change to full width. How can I fix it?

    Thanks,
    Marco

  • Pms_iowa

    This no longer works with Thesis_18

  • Pms_iowa

    This no longer works with Thesis_18

  • Upgrading to 1.8 broke what you have already done?

  • Upgrading to 1.8 broke what you have already done?

  • Have not tested this tutorial with 1.8 yet so its possible this may break. Both WordPress, Thesis, and Next Gen have all had upgrades since this tutorial.

  • Have not tested this tutorial with 1.8 yet so its possible this may break. Both WordPress, Thesis, and Next Gen have all had upgrades since this tutorial.

  • Dougrek

    Serious bummer – doesn’t work anymore. Maybe a 1.8 issue with the baked-in header code now but nothing shows. I really don’t know why the Thesis folks don’t build in the ability to create a dynamic header since this is the one big design piece that the custom skins all include (and it’s really, really hard to find anyone doing this in Thesis very well). Great tutorial nevertheless.

  • Pingback: 60 Wonderful And Helpful Thesis Customization Tutorials()

  • Pingback: How To Customize Thesis Theme for WordPress – A List Of Complete Guide | Bridging IT Gaps()

  • Pingback: Dynamic header | Yourkenoinfo()

  • Areef09

    Hi..i just read your blog…just now, when i try to find the source code, its seem different compare with your example code..please help me..

  • Asdf

    solid

  • Sandiegobeck

    Wow! Awesome! I got it done the first crack at it. Thanks for saving me a bunch of time and teaching me a great new trick. 

  • This is a super tutorial and I’m really keen to get it working, but I’ve been struggling with something all day and have finally decided to ask for help ;-P.
    I can see the “Gallery Test” page working just fine – the images are animated. But it’s not working on my header. In fact, I’ve got a page with the gallery test and the (non) animating header and still only the gallery test is animated. 
    My logo is showing up properly on top of the (non) animating header. 
    Any idea why this would be happening? 
    I’m using Thesis, and have followed the instructions in both the Custom Functions and the Custom CSS areas. 

    Hope someone has an idea! 🙂

  • SdadWsdasd

    happuy

  • This is excellent, thank you. We’re making many customizations to our Theme – learning a lot from your site. Thank you!

  • Pingback: 51 Thesis Customization Tutorials for Newbies :Mukesh : Mukesh()