AgentPress homepage slider

[sinoun]

Hello,

I've been racking my brain on this for hours, but can't seem to figure something out.

I am using AgentPress Pro theme and I am trying to convert the static homepage image into a slider. I tried using this really helpful paid tutorial: https://sridharkatakam.com/full-width-soliloquy-slider-genesis/, but I can't get the slider to be full width.

The site in question is: http://marshallberchandassociates.com/ - frontend password is 'sinoun'.

As you can see, I am so close! I just need to figure out how to make the slider fill the background just like in the demo. I tried changing the 'wrap' CSS code, but that just changes the whole site.

Does anyone have any suggestions on what I need to do to make the slider full width and be behind the menu, just like in the demo?

Thank you in advance! Your help is deeply appreciated.

Sinoun

[Badlywired]

In the demo it isn't a slider, it is a single background image. Interesting it uses a script called backstretch that could
be fairly easily reprogrammed into a slider with a bit of skill. http://srobbin.com/jquery-plugins/backstretch/

change js/backstrech-set.js
to contain, and the paths to your own images

jQuery(document).ready(function($) {
	$.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 3000, fade: 750});
});

Although I don't expect that is what you want, its is one approach.

In case you don't know you add that single image via customizer/background image.

The other approach need a bit more though about the structural wraps, that keep the site 'inside' the width, you will be able to do this by hooking into the write area, but it isn't something I can solve off the cuff without actually being 'in' the site. But basically, it is a case of better understanding genesis, wraps and hooks.

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

Hey there,

Thanks for the response. I'm aware the background is an image that can be changed in the customizer. Like I mentioned, I'm trying to convert that area into a slider using Soliloquy so the images can be easily changed when needed.

I figured I could add some custom CSS to make it full width. I could be wrong, but would like to know. Does anyone else have insight?

Sinoun

[Badlywired]

As mentioned, its to do with the structured wraps.

But indeed, a bit of css should sort it just making the home featured structured wrap 100%. I wasn't thinking that way (its late)

.home-featured .wrap {width: 100%;}

should do it.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

p.s. you might want to change

.site-header .wrap {
  background-color: #1a212b;
  color: #fff;
}

to

.site-header  {
  background-color: #1a212b;
  color: #fff;
}

otherwise you'll have a strange 'wrapped' header with white gaps, followed by a full width slider

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

Thanks again! 🙂 I tried .home-featured .wrap {width: 100%;}, but it seems to only make the header menu full width. I'd like to keep it the way it is without it being full width. I really like having the slider image going behind the header menu, like it looks in the demo. Any other suggestions?

I appreciate your time!

[Badlywired]

are you saying .home-featured .wrap {width: 100%;} didn't make the slider full width?

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

Sorry for the confusion. That is correct. .home-featured .wrap {width: 100%;} didn't make the slider full width.

And adding the following made the header menu full width, but that's not what I want:

.site-header  {
  background-color: #1a212b;
  color: #fff;
}

[Badlywired]

If you want to put the slider up and behind the header, this can be done with css too.

.site-container {position: relative;}
.site-header {z-index: 9999;}
.home-featured {position: absolute; top: 0;}

will probably do it.

Are you getting paid for this job?

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

I added the code and I think we're close!! It seems the slider still isn't full width though. And now, it is on top of the header/menu. Any thoughts?

[sinoun]

Also, the widget that should be under the slider is now on top of the slider...

[Badlywired]

I'm taking a look, leave it like it is for the moment

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

Will do! Thank you! 🙂

[Badlywired]

.site-header {
       position:relative;
       z-index: 9999;}
.home-featured {
      position: relative; 
      top: -80px;
       }
.home-featured .wrap {
      width: 100%;
      max-width: 100%;
}

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

YOU ARE A LIFESAVER! THANK YOU! I've been trying to play around with the CSS myself using Firefox and Chrome and couldn't figure it out for the life of me.

Thanks! 🙂

[sinoun]

I really love StudioPress themes, but the biggest thing I think it lacks is the slider capability. Most themes have that built in -- it's a standard for themes nowadays. Would love to see StudioPress make that a standard for themes with large images.

[Badlywired]

No problem, I do it all day.

It does get a bit complex when playing around with positioning things and send stuff to the back etc.

The CSS approach worked here, although personally I would have reconstructed the home page using Genesis hooks to get everything sequenced right in the first place. But that is definitely in the more advanced class.

Check out my blog for other tips I write up as I find them.

---

My techy blog WordPress and stuff badlywired.com

[sinoun]

This reply has been marked as private.

[Nate]

Hey everyone!

I'm trying to do a very similar thing. Is this with the Home-Featured widget? I've gone through this string about three times, and cannot get it to work.

I'm deveoping locally, but will move the site to live later today at ecckdev.finchproservices.com .

Any help would be great!

Nate

---

Just getting started in this brave new Genesis world… Thanks in advance for all help:-).

[Nate]

Hey again! The site is up (it's ugly, but I'm not done:-)).

I've tried re-arranging some of the hooks as well, but it looked bad. We'll try again tomorrow:-).

Any help would be much appreciated.

Thanks!

---

Just getting started in this brave new Genesis world… Thanks in advance for all help:-).

[Author]

Posts