Community Forums › Forums › Archived Forums › Design Tips and Tricks › AgentPress homepage slider
- This topic has 22 replies, 4 voices, and was last updated 5 years, 5 months ago by
dbellmaine.
-
AuthorPosts
-
March 17, 2015 at 12:21 pm #144752
sinoun
MemberHello,
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
March 17, 2015 at 3:42 pm #144765Badlywired
MemberIn 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 imagesjQuery(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
March 17, 2015 at 4:10 pm #144768sinoun
MemberHey 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
March 17, 2015 at 4:15 pm #144769Badlywired
MemberAs 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
March 17, 2015 at 4:20 pm #144770Badlywired
Memberp.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
March 17, 2015 at 4:31 pm #144771sinoun
MemberThanks 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!
March 17, 2015 at 4:36 pm #144772Badlywired
Memberare you saying
.home-featured .wrap {width: 100%;}
didn't make the slider full width?
My techy blog WordPress and stuff badlywired.com
March 17, 2015 at 4:38 pm #144774sinoun
MemberSorry 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; }
March 17, 2015 at 4:39 pm #144775Badlywired
MemberIf 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
March 17, 2015 at 4:42 pm #144776sinoun
MemberI 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?
March 17, 2015 at 4:42 pm #144777sinoun
MemberAlso, the widget that should be under the slider is now on top of the slider...
March 17, 2015 at 4:44 pm #144778Badlywired
MemberI'm taking a look, leave it like it is for the moment
My techy blog WordPress and stuff badlywired.com
March 17, 2015 at 4:45 pm #144779sinoun
MemberWill do! Thank you! 🙂
March 17, 2015 at 4:52 pm #144780Badlywired
Member.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
March 17, 2015 at 4:56 pm #144782sinoun
MemberYOU 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! 🙂
March 17, 2015 at 4:58 pm #144783sinoun
MemberI 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.
March 17, 2015 at 5:01 pm #144784Badlywired
MemberNo 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
March 17, 2015 at 5:02 pm #144785sinoun
MemberThis reply has been marked as private.October 9, 2015 at 11:01 pm #167781Nate
MemberHey 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:-).
October 10, 2015 at 7:53 am #167789Nate
MemberHey 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:-).
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.