Frequently Asked Questions:
Change the height of the flashfader header slideshow
A few times I’ve gotten asked about how to change the height of the Flashfader header slideshow. It’s not terribly difficult, but it’s not as easy as you might think, either.
1. Step 1: Go to “Manage” –> “Flashfader” and set the height to whatever you want it to be. Click “save.”
2. Step 2: Go to “Design” –> “Theme Editor” and choose “Stylesheet (style.css)” to edit it. Scroll down to line 268 (there’s a line marker at line 265). This chunk looks like this:
/* LINE 265 */
#header-masthead {
height: 250px; /*height of masthead*/
background-image: none;
}
Change the height to whatever you want it to be.
3. Step 3: Finally, you’re going to need to use an FTP program or your File Manager to edit one more file, called “flashfader.js” It’s in your “prophoto” theme folder. Open it up with WordPad or TextEdit, and you will see two places where it says ‘height=”250px” or something like that. Change the height to your desired height in both places. Save your changes and reupload the file, overwriting the one on your web server.
4. Step 4: If you’ve already uploaded images into your Flashfader management area that are not your desired height, you’ll need to delete them and reupload new ones. Also, if you uploaded images that were something other than 250px high while your settings were still set at 250px, Flashfader may have cropped them. So, if they’re still not showing up right, delete them and reupload them.
5. Step 5: Empty your browsers cache and check your work.
Helpful related resources:
Using an FTP program
Using a web-based file manager utility
Questions? Leave them in the comments instead of emailing for support so everyone can benefit from the clarification.
Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.
Thanks! It worked like a charm
I assume you also have to change the images to the new size too?
Somfalvi » yeah, i should have said that. you’ll need to delete your images (if you’ve already uploaded them) and upload new images with your desired height.
Jared, your template rocks and bless you for making it so customizable. Your instructions for making tweaks and modifications are clear and easy to follow. I am having more fun playing with this than I would have thought possible.
Thank you!!
@robin: thanks!
We have followed all of the steps you have given. We still are not able to make the flash header so that it does not cut off our pictures. Our picture size is 980 X 350. It seems like when we follow your steps it just pushes the bio down. Do you have any suggestions.
@Dan: i think you skipped step 3. i checked your flashfader.js file and it still reads height=250 in two places.
can you walk me through how to do that because we tried that a few times and I thought it had worked… We must not no what we are doing.
@Dan: hmmm… not sure what more to say than what is in the directions. you can’t edit this file from within your WordPress admin area. you have to use either an FTP program to download the file and then edit it using NotePad or TextEdit, or you can use your webhosts file manager code editor (assuming it has one) to edit it.
Thanks for your help. We finally got it to work. THANKS!
The instructions were so easy to follow! I am noticing that my image is not centered. Any suggestions on how to correct this? Thanks you all!!
Jared,
I was just notified by another photographer that my blog is messed up when viewed in Firefox. My flash header cuts off my bio and pic. It’s fine in IE, but when I checked in Firefox it was messed up…could you check it out and help. Thanks!
http://www.beckyearlphotography.com/blog
@Becky: you’ve got this problem:
http://tinyurl.com/6gwu73
difference between IE and FF is just they render fonts slightly differently
I’m not sure if this is the right place to ask this or not, but I’m wondering if it’s possible to put the top nav bar below the flash header? I’ve looked through the code trying to figure out how to do it, but nothing is jumping out at me. Is it possible? Thanks again for all the help!
@Anne Raker: moving the menu below the flashfader is not a basic, supported so we don’t have any instructions on how to do it. sorry! if it were easy, i’d make a tutorial, but it’s not really. some people have hacked their way through it, others have hired us or somebody else to make that customization for them.
Jared, the template is awesome…. How do I move my flashfader up closer to my logo/links? Eliminating some space between them. Also how do I move the “wordpress loves ajax” at the very bottom left corner into the footer by your link?
thanx!
@levell: to move the flashfader up more, you need to shrink the height of:
h1#blog-title
#header
in your stylesheet.
to get rid of the ajax link, go to “Design” => “AWP Managment” => “Overall Options” and uncheck the “append a small link to the footer” option, then save.
Got the awp moved over but the space between my logo and the flash header I had no luck.
I changed all these:
}
h1#blog-title {
float: left; /*logo on left, set to right to switch, also edit #ppt_topnav below*/
position: relative;
height: 108px; /*height of logo*/
width: 397px; /* smaller if narrower logo – gives links more room */
overflow: hidden;
}
h1#blog-title span {
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
}
h1#blog-title a {
z-index: 500;
position: absolute;
height: 50%;
width: 100%;
}
#blog-description {
display: none;
Level:
where it says:
height: 108px; /*height of logo*/
change that height. and also you’ll see that one other place, under #header
Got it…. thanx! I was only changing one instead of both…
First – I absolutely love the template – thanks for making it!!!
Two questions:
1. I have tried to install the flash fader and I uploaded two pics but still nothing shows up where it goes – I also changed the height to 450 px – I just have a blank top though.
2. How do I move the links to show up under the flash fader and make the slideshow take up the whole top section with no logo – like Studio 3z http://www.studio3z.com/blog/
Thanks!!!
I found the answer to #1 on one of the other posts – thanks!
@Sandy: the answer to #2 is that it is not a basic, supported customization to the theme, so we don’t have a tutorial, because it’s too complex for a non-developer to pull off. In a week or two, there will be an upgrade available to the theme ( to 2.0 ) that will allow you to do that.
Thanks! I will look out for that!!
Steps 1 and 2.. I can’t find any way to get to “manage” or “design.” I want to increase the height of the masthead slideshow. help… Thanks!
I’ve done all these steps and when I try to view my site it says this:
“A script in this movie is causing the Adobe Flash Player 10 to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?”
Help, please!
You are right…”this is not as easy as you think.”
Okay….there must have been something wrong with that small part of the code in step two because I went through the steps again and noticed that the code was not exactly lined up as you have it shown there…so I thought I would change it…I did and then saved it. Then I went and checked the blog and…it is fine. YAY!
I can’t seem to find the flashfader.js file. Nothing under js folder and the only thing I can find with flashfader is a txt file and in that file there is only one spot to change the height.
Hi,thanks for the blog post. Infos are really interesting and saved me a lot time which I have spend on something else instead of googling
Thanks and waiting for more posts like this one.
Hey just checked out this blog, been looking around at a few sites but this site is one of the best I have read. Great work!
I’m not able to view this website correctly on chrome I think there is a issue.