Replace Front Page 1 Image with Full Width Soliloquy Slider

Tagged: aspire, front page 1 section, soliloquy slider

This topic has 12 replies, 2 voices, and was last updated 8 years, 1 month ago by Wes.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
March 14, 2016 at 11:33 am #17521
patrick
Customer
Hi Wes.

First of all, THANK YOU for designing some of the most amazing child themes for Genesis. They are absolutely stunning!!

Secondly, I would like to replace the image that shows in the Front Page 1 section with the Soliloquy slider. I’ve been hacking away using some tips and tutorials found over at https://sridharkatakam.com/ but can’t seem to get it right.

Is there an easy way to accomplish this?

I am familiar with editing both CSS and PHP so if I need to mess with those files, I’m good with that.

Thanks again with any help you can provide!

With much appreciation,

Patrick
March 14, 2016 at 1:40 pm #17522
Wes
Moderator
Hi Patrick,

I’ve never used that plugin so I’m not sure if it will work or not, but if you have a link to your site with the slider installed and active I can take a look.

I think you would have to customize the Front Page 1 to be full width in order for it to work in the way that you need. If you add the slider inside the widget area now, it will only be 1200px max width. So if we remove the width of the widget area, then add the slider set at full width, then it’s possible it can work. I’m not 100% sure though, so i’d have to take a look.
March 14, 2016 at 3:17 pm #17523
patrick
Customer
Hi Wes.

The link is as follows:

http://rgdcuk.wpengine.com/

The plugin is installed and active. I did try to place the Soliloquy widget within the widget area and can confirm that the images only show at 1200px max, not full width like the background image. I’m needing the images within the slider to take up the entire background.

Thanks again for your help!
March 14, 2016 at 8:20 pm #17529
Wes
Moderator
Sorry I meant to ask you to add the Slider inside the Front Page 1 widget area so I can take a look at it while it’s inside the widget. Then I can check to see if it’s possible with some CSS modifications
March 15, 2016 at 10:09 am #17533
patrick
Customer
Yeah, I guess that would’ve helped you. So sorry. The slider is now installed inside the Front Page 1 widget area. Thank you!
March 15, 2016 at 10:31 am #17534
Wes
Moderator
Just got it done with this CSS –
```
.front-page-1 .wrap {
	max-width: 100%;
}

.front-page-1 .flexible-widgets {
	padding: 0 0 120px;
}

.front-page-1 .soliloquy-container * {
	width: 100%;
}
```
Of course you’ll have to adjust the height of the plugin, and also the position of the front-page-2 widget area through your CSS. But at least we know it’s possible to do.

Here’s what it would look like – http://i.imgur.com/0Yrns3E.jpg
March 15, 2016 at 10:51 am #17535
patrick
Customer
Boom! That’s what I was looking for! THANK YOU!!

I’m not sure why I’d need to adjust the position of the front-page-2 widget, though. It appears fine on my end.

However, I am getting a white banner across the top of the site. I’m assuming this has something to do with the transparent navigation showing the body of the site as white but when I fire up Firebug to check the CSS, the white banner disappears; therefore, I can’t see what CSS needs to be changed.

Here’s what I’m talking about:

http://i.imgur.com/FwyDBSp.jpg

I’d like the transparency to remain so that the image shows behind the navigation. If this can’t be done, I assume I can just change the background of the NAV to the color that shows during scroll.

Thanks again, Wes. I truly appreciate your help!
March 15, 2016 at 10:55 am #17536
Wes
Moderator
The white banner isn’t showing up on my end. Did you get it fixed or is it still showing when you view it?
March 15, 2016 at 10:58 am #17537
patrick
Customer
It is still showing. I emptied my browser’s cache and even viewed it in several other browsers but it’s still there. It disappears when I scroll but is visible when you first hit the site.
March 15, 2016 at 11:00 am #17538
patrick
Customer
It’s not visible when the viewpoint is around 1670 and above but if you decrease the viewpoint below 1670 it shows up.
March 15, 2016 at 10:15 pm #17544
Wes
Moderator
I was originally viewing it from a larger screen which is why I didn’t see the white space.

Add this in the responsive section inside the 1024px width area –
```
.front-page-1 .image-section .widget-area {
    display: block;
}
```
That shoots it back up to the top to cover the white space above the video.

For the white space on the sides, add this to the 800px Responsive section –
```
.front-page-1 .wrap {
    max-width: 100%;
}
```
The space on the side shows up because of the padding that is supposed to show up for .wrap….but this should override it for the front-page-1 widget only since you’ll need that for everything else.

You’ll probably need to customize how the front-page-2 sub box shows up on mobile/smaller screen sizes since it may look weird due to the changes we’ve added above. This is due to the max-height: on the FP1. You can add a responsive override for the height in your responsive section. I’ll let you handle those customizations.
March 16, 2016 at 5:48 pm #17546
patrick
Customer
Thank you, Wes!

I added the following to the initial code as well as to the responsive section (1024px) and everything works fine now:
```
.front-page-1 .image-section .widget-area {
    display: block;
}
```
Thanks again for your help! You went ABOVE & BEYOND, my friend.

God bless!
March 16, 2016 at 9:30 pm #17547
Wes
Moderator
You’re Welcome Patrick!
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Replace Front Page 1 Image with Full Width Soliloquy Slider’ is closed to new replies.