Hi BFA forum,

I love this forum and use it all the time though I rarely post because I almost always find what I need and have no business giving anyone advice myself.

I'm not sure where to post this question but I'm using a plugin called WP Supersized to get a flexible, full-page slideshow on my homepage (www.colinruggiero.com). However, the settings for the plugin don't seem to allow it to be confined to a certain area (header, body, widget area, etc.) in the layout and I'm having a hard time figuring out how to create a separate area at the bottom of the slideshow where I can put some text and social media links. When the browser page is re-sized in certain ways, the slideshow expands and overlaps my content at the bottom. Is there any easy way someone can think of to confine that slideshow to an area so that I can have some free space below it? I'd like something similar to this: http://www.hiltonhyland.com

This would also be great but seems more complicated with the multiple components scrolling at variable speeds: http://www.stuckincustoms.com

Is there maybe some CSS I can use to modify the container that the slideshow loads in? I've tried to figure out what the selector would be but don't have enough knowledge to figure out the best way to go about this. Hope I'm not omitting some important info. I'm running the latest WP and Atahualpa 3.7.12.

Thanks very much!

I am not clear on what you are trying to do. The selector for the Supersized plugin is #supersized but your footer content shows fine for me no matter how I resize my browser window.

Thanks for your response Miles. Maybe it has something to do with monitor size or aspect ratio but I am able to resize the page so that some of that text in the footer overlaps the slideshow image. It's not as bad now because I put the text in a widget in the footer instead of the custom widget area I had right above the footer. Using the custom widget area, the overlap was pretty bad. On a mobile device this is much more pronounced. Also, even how I have it now, at some sizes there is a large gap between the bottom of the slideshow image and the text in the footer.

What I'm trying to do is to create a definite break between the supersized slideshow and the content below it so that the content below, whatever I want that to be, will start right at the bottom of the supersized image regardless of how the page is resized - just as it is here: http://www.hiltonhyland.com/

Thanks in advance for any thoughts you might have.

Colin

It would take some playing around with that plugin to come up with possible solutions. If you were using Atahualpa 3.7.15 you could perhaps use the full width header function and then use use the native slideshow or a slideshow plugin in the header area.

Thanks for your suggestions Miles. There aren't any relevant settings for the plugin - it just loads into the entire page by default. I'm not sure how to use CSS to try to make it load in a particular container or section on the homepage. In any case, I ended up having to leave town for a job and won't have a chance to mess with this further until Fri. Just wanted to thank you for your response. I did update Atahaulpa so will try the header idea also and post again if I can't make any progress. Thank you!

Hi Miles,

I thought I had updated to 3.7.15 but I had only installed the theme and not activated it. When I did activate it, it seemed to break a lot of my site. I imported my previous Atahualpa settings but, after updating, my homepage would only load as a blank page with the slideshow inside of it. All of my widgets were somehow moved into my Saved Widgets area. When I moved them back into the appropriate area, e.g., Footer Widget Area, they still would not display. None of my menus would display either. Maybe this is standard upgrade behavior but I couldn't find an easy way to fix things and I haven't had to go rebuilding my site after previous upgrades. I deactivated my Supersized plugin but it had no effect. I've reactivated 3.7.12 now because my site was totally non-functional but I did look through header settings in 3.7.15 while it was active and I didn't see any new full-width header options that would give me more options than I had with 3.7.12. Did I miss something?

So... I know these threads are supposed to stick to one issue but everything I try to do ends up leading to a whole new host of set-backs and problems. Do you have any ideas about why upgrading from 3.7.12 to 3.7.15 would break my whole site?

go to the configure header, footer and center areas and hit the 'Save' button. see if that helps

Thanks very much for your reply Juggledad. I had to go in and hit save in a few other ATO sections as well but that seems to have done the trick. I also had to re-setup my widgets which I don't remember having had to do in the past but, in any case, I'm now running 3.7.15 and am back to my original request.

I think these excerpts from other forums will help clarify my original post and what I'm trying to do:

Q. "It seems Jquery Supersized currently allows only attach background image(s) for whole BODY? Is it possible to use a css selector to tell it where to load background slideshow?

A. "Create a div with id="supersized" in your HTML, and it will load there. I only tested this briefly, but it looks like it works."

Also ran across this in a tutorial:
"After a lot of frustrating attempts I decided to use the Supersized jQuery plugin. I had previously used this plugin on other projects and it beautifully displays full screen background image slideshows. However by default Supersized loads its slideshows inside the body tags and there is no apparent way to display the slideshow only inside a particular div."

All of the above seems to be about JQuery Supersized. I'm using WP Supersized which, apparently, is a plugin that utilizes the original JQuery Supersized code in an easy to configure plugin. I feel like there is probably some easy way to create a div and some code to tell the plugin to load the slideshow in the div but I don't know how to go about any of that. Can you give me any direction? Again, I'm looking for something roughly like this: http://www.hiltonhyland.com/

Thanks a lot!
Colin

Nobody has any ideas? Is my objective not clear enough? Too complicated? My impulse is probably way off but I was hoping I could just create a new div inside the body tags and make the WP Superisized plugin load there - all using the CSS/HTML inserts section of ATO. I just don't know how to go about that. Maybe I've got the wrong idea entirely.

you could try this:
1) Add a new widget area at ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top
2) view the front page of the site (to run the new widget code
3) go to the widget area and add teh code to that

I have never yused that widget so I don't know it's quirks

Thanks very much for your post Juggledad. I'm not sure what you mean when you say to add the code to the widget area. What code exactly? The plugin has a bunch of different files and pages of code that make it up. It's a plugin that adds code to the site but not it's not really a widget - it doesn't show up in my widget settings as something that I could just drag into a widget area. Am I missing the point somehow?

Am I making it more complicate than it needs to be? Is there a simpler way that you know of to get something like this: http://www.hiltonhyland.com/

Notice the rotating, full-window-sized, image that loads in most of the window and that the little menu-bar of sorts at the bottom shows up no matter how you resize the browser window.

Thanks again for your help!

once again, I've never dealt with this plugin so I don't know it's requirements or needs. I'm just trying to give you suggestions to answer the questions you pose.

Am I making it more complicate than it needs to be? Is there a simpler way that you know of to get something like this: http://www.hiltonhyland.com/

I have no idea since I don't know how they did what they did and have never seen the theme they are using.

As larry said, I could probably figure out a solution however it would take me some time playing with various ideas. More time than I can afford to give away while i have paing customers needing me to do work for them (and grandkids to babysit a yard to mow etc etc.)

You need to play with diferent options and see what you can come up with. Like I said you can add a new widget area into ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top - or you could add one into the Configure header Area option. try it both places or you could play with the settings of the WP Supersize plugin and see if you can use some CSS to limit the plugin image to the area you want it to be.

Hi Juggledad,

I totally understand your time/money limitations. Not knowing much about this stuff myself, it's hard to know how big of a question I'm asking. I thought maybe you'd just say, "Yeah, just do x,y or z - problem solved."

As far as the widget idea, I know how to create widget areas but don't have any idea how to go about making WP Supersized load into one of these areas. I have other slideshow plugins that I can drag like a widget into an area but this one doesn't act like a self-contained widget. Anyway, I'll continue trying to mess around with it.

Thanks for your help. I just sent $20 your way. Not much, I know, but a small token of my appreciation for your thoughts.

Thanks,
Colin

One POSSIBLE solution is to add the new widget area and install the Buckets plugin. Now you can perhaps put the slideshow in a buckets entry and then add the appropriate widget to the new widget area.

Thanks a lot Miles. I'll have a look at that and let you know if I have any luck.

Thanks again!
Colin

Ok, I just messed arround with the wp supersize and here is what you can try - it seems to work
1) go to ATO->Style & edit HEADER AREA->Configure Header Area and add

<div id="supersize-hdr">&nbsp;</div>

2) go to ATO->Add HTML/CSS Inserts->CSS Inserts and add

#supersize-hdr {height:700px;}
#supersized,
#supersized li {position: absolute;}

You need to play with the height to match your image heights and maybe play with some other things but it seems like it does what you want.

You will probably need some jscript to change the height to the size of the window. You can look at the theme code for how the sticky footer works and that might help.

Hi Juggledad,

Just want to clarify that my donation was not so that you would keep helping me but rather for the help you'd already provided. Thank you for going ahead and taking the time to mess around with this and try to find a solution for me. I really appreciate it.

This is exactly the sort of solution I was hoping might exist. Except it's not quite working for me. Before I explain though - I know you can't keep troubleshooting this for free. At this point, I'd like to get this working and I feel like you're on the right path. I'm happy to pay you for your time. Not sure if I should just make another donation afterward or PM you at this point. Please, let me know if you have time to help me further with this and what the best way to proceed is.

(my site: www.colinruggiero.com)
So... when I added the code you suggested, it moved the menu and logo image that currently sit at the top of the page down the 700 px that were taken up by the div your code created. So then the menu and logo sat over the top of the slide show in the lower third of the page. To fix this I moved the div code from the Configure Header area and put it inside a text widget in the header widget area. Not sure if this works or not because I can't really see the difference in either case. All the original code you sent seemed to do was create an empty div that pushed the menu bar and logo down. The menu bar and logo image, as well as the footer and center-bottom-widget still load right on top of the WP Supersized slideshow, so the code doesn't seem to be making the slideshow load in it's own space. This is good because I want the menu bar and logo image to load on top of the WP Supersized slideshow just as they currently do. But it's bad because I want a division between the footer and the WP Supersized slideshow. Right now I have the following code in CSS Inserts to create space so that the text and social media icons in my footer and center-bottom-widget don't end up sitting right below the menu bar on top of the slideshow:

#center_bottom_widget_area {
margin-top: 450px;
margin-bottom: 0px;
}

I reduced this top margin from 700 px so that you can see how the center-bottom-widget gets superimposed over the WP Supersized slideshow when you resize the browser in certain ways.

I'm not sure why your code doesn't seem to be making the slideshow load in a separate div - it seems like it must have worked for you. I tried to identify what part of the code is doing that. Is it this bit?

#supersized,
#supersized li {position: absolute;}

Does that effectively make the slideshow a list item inside the supersized-hdr div? If not, I don't see what else in this code would serve to isolate the WP Slideshow from the footer.

Thanks again for your help - sorry this is dragging on. Let me know the best way to proceed.

Cheers,
Colin