Soliloquy slider not centered all the time. Theme issue? Slider issue? Gen 2.x?

This topic has 14 replies, 2 voices, and was last updated 10 years, 7 months ago by Eric.

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

Author

Posts
August 30, 2013 at 2:36 pm #6972
dev77
Customer
http://surgeonsstory.com/wp/

This is a work-in-progress site using the latest HTML5 (updated) Appfinite Legacy theme with Gen 2.x. The theme comes with HTML5 enabled. I’m using the premium Soliloquy slider and I’ve posted this on their site too.

As I stretch the screen wider (on my iMac) there is a point were the Soliloquy slider is not centered but a fair number of pixels left of center… maybe about 100 px. All 3 test slides are the exact same size… 960×350.

I don’t know if this is a result of the updated theme or Gen 2.0 with HTML5 or maybe an issue with Soliloquy with HTML5 or what.

I run Gen 2.0 with a non-HTML5 Appfinite theme called Optimal (I’ve not updated to the new one) on our own site http://www.newmediawebsitedesign.com and the slider says centered no matter how far I drag the screen.

It’s not a big deal, this non-centering a certain “break point” but I kind of like things to work correctly if possible.

All ideas welcome.

Thanks.
August 30, 2013 at 2:56 pm #6973
dev77
Customer
UPDATE: I tried using the Genesis Responsive Slider. Same problem. So this is obviously a Legacy 1.3 (HTML5 update) theme issue.

Even when I turn off HTML5 in functions.php, I get the same issue.

I have to assume that there is a bug somewhere in Legacy 1.3.

I wonder where I can find the previous ver. of Legacy. Maybe it is on the Studio Press site? I can’t put the 1.3 theme on a client site the way it is now. I hope Wes can/will fix this ASAP.
August 31, 2013 at 9:43 am #6982
Eric
Customer
There’s no issue with the theme (as you can see here – http://demo.appfinite.net/legacy/ its working fine. It’s the slider images that don’t center. A lot of people assume the slider images can center, but they don’t. Whats actually happening in the demo is the slider is set to the size of the theme, and adjusts with the theme. If it’s not set to the full width of the theme then there will be space left.

You have the wrong width set, this theme is 1140px not 960px. Once you change it to 1140px, use the Regenerate Thumbnails plugin so it will automatically adjust all of your thumbnails/images to the size you set in the slider settings.

The reason your other site is working is because the width was 960px and the image you added was probably 960px.

I’ll copy/paste from another post on this subject – https://appfinite.com/topic/genesis-responsive-slider-off-center/#post-6641

“The pagination (the little circles at the bottom) and the shadow will only show if you have more than one image. So I’d actually add 2 images to your slider and that should fix your issue. If you only plan to use 1 image, then you definitely don’t need a slider to show it.

If you’re only planning on using 1 image, then you shouldn’t use a slider, it’s like “killing an ant with a sledge hammer”. Just add the image itself in a text widget instead of a slider. A slider will add to your site load times and is unnecessary if you only have 1 image. If you plan to have more than 1 images then everything should work fine.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 9:46 am #6983
Eric
Customer
This is in response to the Genesis Slider BTW.

I don’t have the Soliloquy slider so I can’t speak for that one.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 11:07 am #6986
dev77
Customer
Site: http://surgeonsstory.com/wp/

Just a bit confused.

You have the wrong width set, this theme is 1140px not 960px. Once you change it to 1140px, use the Regenerate Thumbnails plugin so it will automatically adjust all of your thumbnails/images to the size you set in the slider settings.

Here is what I did:

My 2 slides are 960 x 350.

I changed to the Genesis Responsive Slider.

I set the “Maximum slider with (in pixels) in Genesis Responsive Slider setting page to 1140.

I did the Regen.

No change. When I stretch the screen width, at a certain point the slide is not centered. (Works fine at smaller widths.)

So where do I change something to 1140?

I looked in the CSS and saw the slider was set to 1140.

`slider .wrap {
background-image: url(images/slide-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 0 auto;
padding: 30px 0 5px !important;
width: 1140px;
}`

Using Chrome Inspect I changed it to:
```
.slider .wrap {
width: 960px;
}
```
That worked.

I did not make this permanent as I doubt this is the best way to do it.

Perhaps you can explain just a bit more?

I really appreciate your help on this but I don’t understand where I am to change it (what?) to 1140.

Thank you.
August 31, 2013 at 12:00 pm #6989
dev77
Customer
One last item. When you change the Maximum slide width in the Gen. Responsive Settings page you are setting the “maximum” (obviously). If you have a 960 px slide and set above to 360, the system resizes your slide. Very nice.

However, Legacy has 1140 in the css and if a slide is less than 1140, as I do, it is not going to center when the screen width is maxed out. If left justifies it in the 1140 (width) “container.”

As I noted above, the only way I’ve found to get a slide smaller than 1140 to center when screen is stretched, is to override the Legacy CSS.

Am I on the right track or am I still not getting it. I fail to see what or where I set to 1140 if slides are 960. (I chose 960 because they have a smaller file size than 1140 but still larger enough to see well.)

I hope to get an answer soon on this. Most likely there is something I’m just not understanding, so please pardon my ignorance. However, I’m not a newbie… to all of this… yet I’m not in the league with guys/gals who write themes.

I send my humble obeisance.
August 31, 2013 at 12:03 pm #6990
Eric
Customer
Again the Genesis slider images don’t center, they never have. They only float left or right, and the theme itself doesn’t really have anything to do with it how it functions (the theme still works the exact same). The only way to get it to appear centered is to fill in the entire space. If you have an 1140px width theme and add in a smaller 960px width image that doesn’t center (because of the slider) then of course there will be space left on the side. In order to fill that space you would have to make the image width match the width of the theme.

The slider width should be set to the width of the theme, which is 1140px. You change that in the Slider Settings page, no need to do it anywhere else.

Your images need to be 1140px or at least be able to allow WordPress to scale it to that size. Most images will, but narrow vertical images won’t since they’ll look stretched and distorted. Anytime you change the width, you need to run the Regen plugin to see instant results. Make sure you don’t click away until it’s finished.

I’m still seeing a 960px width image in your slider – http://surgeonsstory.com/wp/wp-content/uploads/orthopedic-surgeon.jpg

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 12:06 pm #6991
Eric
Customer
Please take a look at the demo – http://demo.appfinite.net/legacy to see that it does in fact work.

There are no issues, you just don’t have it setup correctly at the right size. Once you set it up at the correct size it will show up just like the demo.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 12:12 pm #6992
dev77
Customer
I looked at the demo. Yes, it works. Your slides are 1140 wide. So they center in the slider fine when the screen is stretched.

My slides are 960 wide. They left justify in the slider container area when stretched.

So what do I do to make these center? As I say, since Legacy has the width of the slider set in css to 1140 the only way I can get it to work is override the CSS, as I said above.

Tell me what to set and where, and we’ll see if it works. If you like I can give you login access to the site if you send me an email address to send it to. The site has just been started so there isn’t much in it except a couple of slides and some placeholder text.
August 31, 2013 at 12:41 pm #6995
Eric
Customer
If your images are only 960px then they won’t work in a space that is set for 1140px. You need to upload an 1140px image if you want them to fill the entire space of an 1140px width theme and appear centered. From what it sounds like, you don’t want to change your images to 1140px, and if thats the case then you shouldn’t use an 1140px width theme if you want them to appear centered (because the slider won’t let you.) Use a 960px width theme instead.

The 1140px in the css is just the maximum width, it’s not the only width. This is a responsive theme, so as the browser gets smaller the slider area will adjust….which makes the 1140px irrelevant since it doesn’t matter in this case.

I can’t think of any other ways to explain it without repeating myself, but maybe if you can download and upload one of the 1140px width images from the demo and then upload it to your site you’ll see what I’m talking about – Try this one – http://i.imgur.com/UTTMWCL.jpg

Hpefully that explains it.

It’s Saturday so I won’t be in front of the computer for a while (Family). If anyone else out there is reading this and can help him understand how it all works I’d greatly appreciate it 🙂

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 1:25 pm #6996
dev77
Customer
OK, that was the explanation I was looking for. Switching themes is not an option as client wants Legacy. We will take our 960 slide and using a graphics program ‘paste’ on an 1140 wide background… or find larger slides.

This is the first time we’ve ever used an 1140 wide theme. I wish they had not changed Legacy to the larger size. The 960 worked just fine… and now it is gone.
August 31, 2013 at 3:55 pm #6998
dev77
Customer
UPDATE: I took one slide and placed it on a 1140 ‘canvas’ with a black background, put it on the site and just as you said, it centers fine.

It was always easy to ‘find’ slides .jpg that are 960×350 out of the box, so to speak… as it is a common size. But 1140×350 isn’t so we are going to have to do more work for this theme.

Maybe we’ll just still with the old Legacy of 960… if I can find a clean copy of it somewhere. Is there on on your site I can download?
August 31, 2013 at 4:50 pm #6999
Eric
Customer
Sorry, I meant to say you can change the actual theme that you have to 960px rather than use an entirely different theme.

If you look in your theme in the first responsive section, the media query should be 1139px (just do a search within the file) Increase the number to like 5000 (or whatever is enough) so that it will always be 960px no matter what size the browser is….unless someone is viewing your site in a movie theater 😉

So that would mean you can use the latest version of the theme (recommended) and still use it at 960px. Does that make sense?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 31, 2013 at 6:56 pm #7001
dev77
Customer
Great solution. I tried it. Works well. Now we don’t have to change all our medical slides for this client’s slider.

Question: Why did they change Legacy to 1140? I notice a lot of themes are moving to a higher width? What was wrong with 960? What is ‘magical’ about 1140 (or 960?)

Thanks for all your help on this. I really learned a lot in the process.
August 31, 2013 at 10:56 pm #7005
Eric
Customer
Wes created it on top of the Genesis Sample theme (from scratch). Since its 1140px by default, he decided to just go with that size since thats what a lot of people want now a days. It doesn’t really make a difference for someone like me since I’m mostly on a laptop, but some people use wide monitors like iMacs, or external monitors to browse the web and a narrow site looks too small sometimes. But I think moving to 1140px is a good idea since we can easily revert back to 960px with a single modification.

Glad I could help!

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

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

You must be logged in to reply to this topic.