Jump to content


Photo

How do I make RoyalSlider fullwidth on my Platform Pro-based website

slider fullwidth platform royalslider

Best Answer Rob , 20 June 2013 - 01:23 PM

Hi Christian,

 

Unfortunately, Royal Slider isn't a PageLines product, and you're trying to use it on a deprecated legacy product of ours.  There are full-width background sliders out there which I know work in PageLines Framework, but have no idea if they will work in PlatformPro.  Keeping in mind that PlatformPro used a much earlier version of jQuery than WordPress and Framework do today, I'm not at all surprised the slider doesn't work.

 

Since PlatformPro isn't fully supported today, and waning very, very fast, I'm urging you to quickly upgrade to Framework and use one of the sliders which are known to work full-width.  To be clear, the next upcoming update to WordPress could make PlatformPro break. No upgrades, updates or fixes for PlatformPro will be forthcoming.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 andersen3

andersen3

    Advanced Member

  • Members

  • 60 posts
  • Country: Country Flag

Posted 18 June 2013 - 07:59 AM

Hi,
 

Over the past week I have been working on redesigning my website, www.creativefuturemag.com, and yesterday I finally launched it. However, I ran into one small problem when I launched the website and visited it on different computers. The slider I am using (RoyalSlider) won't adjust according to the size of the browser. Right now its sized so it fits the size of my browser perfectly, however, I want it to be compatible with all browsers in all sizes.

 

Right now I have only been able to achieve some of it using the following CSS coding in the custom coding section of Platform Pro:

 
.royalSlider {
; 
margin-top: -160px;
}

Does anyone know how I can make the RoyalSlider adjust according to the size of the browser/window and still remain fullwidth?

 

Thanks and have a great day!

- Christian

 



#2 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2534 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 June 2013 - 09:32 AM

Hello Andersen 

 

using -160px padding may be a bad idea. you are using this to raise the slider over the top of your header.

 

In your header you have primary nav, Branding and Universal Sidebar without any content in them http://d.pr/i/6nck. Disabling these sections will mean no need for the -160px padding. 

 

Then you have the width of you slider set to over 1400px (your site is set to 1082px width which is less than 1400px. ) but you should consider using something like Max-width: 100%



#3 andersen3

andersen3

    Advanced Member

  • Members

  • 60 posts
  • Country: Country Flag

Posted 18 June 2013 - 09:44 AM

Hi Martin,

Thanks a lot for the quick reply.

 

The reason why the slider is raised up under the navigation, branding and universal sidebar is because these elements are transparent. It is in other words a part of the design and something I have done on purpose.

 

However, I tried setting the max-width to 100% and it just sizes the slider down to the width of page area/content area and not the body. I am looking to make it fullwidth, so there's no white margins and so it adjusts itself according to the size of the browser window.

 

Any other ideas?

 

Thanks!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 June 2013 - 03:55 PM

Hello Christian,

 

First, this code has an errant ; in it:

 
.royalSlider {
; <-- errant code
margin-top: -160px;
}

Platform Pro didn't have perfect full width sections without selecting the proper layout and template.  SInce it's a deprecated legacy product, I'd strongly urge you to upgrade now to PageLines Framework which has more options for full width.  Unfortunately, we expect some future (short term, not long) update of WordPress to potentially kill Platform Pro. Support will not be available then, as it will be the end of life of the product, which officially was declared months ago.

 

Please write to hello@pagelines.com to ask for any possible discounts for Platform Pro clients in upgrading.



#5 andersen3

andersen3

    Advanced Member

  • Members

  • 60 posts
  • Country: Country Flag

Posted 18 June 2013 - 08:44 PM

Hi Rob,

 

Thanks a lot for your response.

 

I have one question - will I have to recreate and redesign my website entirely if I decide to upgrade to the new Pagelines Framework?

 

Also, is there really not a way of making the slider stretch according to the size of the browser window? When I set the width of the slider to 100% it just fits the size of the content area and not the body of my site. Isn't there an element within my site where I can put the slider inside of it with a 100% width?

 

Thanks!



#6 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 June 2013 - 09:56 PM

Hi there,

 

Even on a full width layout the content inside each section is placed within the content area. Only the background area of each container is placed full width across the entire width of the screen.

 

It could be possible to force the section/area to be full width using negative padding/positive margins, but it's not really an advisable practice and the results aren't guaranteed. See - http://www.pagelines...xed-width-site/



#7 andersen3

andersen3

    Advanced Member

  • Members

  • 60 posts
  • Country: Country Flag

Posted 19 June 2013 - 04:23 PM

Would it work if I added each slider to the body of my site? 

You help is very much appreciated, 
- Christian



#8 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2534 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 June 2013 - 05:04 PM

Hello andersen 

 

I think James's comment above answers this question 'Only the background area of each container is placed full width across the entire width of the screen.'



#9 andersen3

andersen3

    Advanced Member

  • Members

  • 60 posts
  • Country: Country Flag

Posted 20 June 2013 - 08:07 AM

Hi Martin and James, 

Thanks a lot for the support & suggestions.

 

I am not really that great at coding yet (even though designing this website has taught me a lot) and the fact that my slider isn't working the way I want it to is seriously killing me, as it is the last step to perfecting my website. Could you maybe help me on what type of coding I need in order to place the slider within the background area of my site? It sounds like that's the only viable option.

 

Also, an alternative could be to create a different background header image on each page instead of an actual slider. Would that possible? I'm thinking something sort of like I have done this part of my site: http://creativefuturemag.com/about/

 

You help is really appreciated!

 

Thanks,
Christian



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 June 2013 - 01:23 PM   Best Answer

Hi Christian,

 

Unfortunately, Royal Slider isn't a PageLines product, and you're trying to use it on a deprecated legacy product of ours.  There are full-width background sliders out there which I know work in PageLines Framework, but have no idea if they will work in PlatformPro.  Keeping in mind that PlatformPro used a much earlier version of jQuery than WordPress and Framework do today, I'm not at all surprised the slider doesn't work.

 

Since PlatformPro isn't fully supported today, and waning very, very fast, I'm urging you to quickly upgrade to Framework and use one of the sliders which are known to work full-width.  To be clear, the next upcoming update to WordPress could make PlatformPro break. No upgrades, updates or fixes for PlatformPro will be forthcoming.







Also tagged with one or more of these keywords: slider, fullwidth, platform, royalslider