DISQUS

DigitalDoyle · 8 months ago

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

Bruce Keener · 8 months ago

One of the most detailed and useful Thesis tutorials I've seen ... Great Job!

The Mules · 8 months ago

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

Loren Nason · 8 months ago

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 · 8 months ago

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.

berchman · 8 months ago

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 · 7 months ago

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?

berchman · 7 months ago

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

flogee · 7 months ago

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

berchman · 7 months ago

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.

Swede · 7 months ago

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.

berchman · 7 months ago

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.

Bryan · 7 months ago

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
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

GP · 7 months ago

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 · 7 months ago

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 · 7 months ago

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 · 7 months ago

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?

berchman · 7 months ago

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.

captain_jack · 7 months ago

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

berchman · 7 months ago

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 · 7 months ago

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 · 7 months ago

sincerely thank you

Jorge londoño · 7 months ago

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

That Swede again · 7 months ago

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;}

berchman · 7 months ago

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.

Pearl Squirrel · 7 months ago

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

berchman · 7 months ago

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?

Konrad · 7 months ago

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

Pearl Squirrel · 7 months ago

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 · 7 months ago

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

berchman · 6 months ago

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 · 7 months ago

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 · 6 months ago

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

captain_jack · 6 months ago

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

berchman · 6 months ago

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?

jose perez · 6 months ago

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

berchman · 6 months ago

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

captain_jack · 6 months ago

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

Nimwit · 6 months ago

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.

berchman · 6 months ago

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

Nimwit · 6 months ago

darn code won't paste step 2 is _/

remove all the _

captain_jack · 6 months ago

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

Michael Klusek · 6 months ago

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 · 6 months ago

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?

berchman · 6 months ago

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.

gabby · 6 months ago

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

berchman · 6 months ago

Looks like you have it taken care of.

gabby · 6 months ago

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

Lee · 6 months ago

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 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');

berchman · 6 months ago

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

berchman · 6 months ago

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.

joseph · 6 months ago

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.

berchman · 6 months ago

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.

Keith · 6 months ago

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!

berchman · 6 months ago

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.

TeresaLea · 5 months ago

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.

noam · 5 months ago

great tutorial amazing devotion
thanks!

noam · 5 months ago

(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 · 5 months ago

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

noam · 4 months ago

@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 · 4 months ago

Thanks! I'll check it out.

berchman · 4 months ago

@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.

blackssassy · 4 months ago

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 · 4 months ago

Can you let me know what your URL is?

blackssassy · 4 months ago

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

berchman · 4 months ago

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 · 4 months ago

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.

berchman · 4 months ago

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 · 4 months ago

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.

Lon · 4 months ago

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!

- for kvisvik camping · 3 months ago

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

berchman · 3 months ago

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

- for kvisvik camping · 3 months ago

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

catharineburhenne · 2 months ago

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!

berchman · 2 months ago

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

catharineburhenne · 2 months ago

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

Catharine

berchman · 2 months ago

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.