Jump to content


Photo
- - - - -

Features Slider: Full Width or Max-width (outside of content sections)


  • Please log in to reply
20 replies to this topic

#1 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 01:36 AM

Is there any way to have a slider (rotating banner)... either Features or Quick Slider sections, or even an out side slider plugin that can extend past the content section. Whether set to 960 or 1028px wide?   

For example:

Please Login or Register to see this Hidden Content

Notice this site has a banner that is 1474px wide, yet the content section below the rotating banner is just 1228px wide.


Can pagelines handle something like this?  I do know that using the Masthead section goes to 100% of the browser.  But that section is static with no rotating banner. 

 

Thanks in advanced for the help.  

 

Joe

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 02:07 AM

Hi Joe

 

Pagelines has a premium full width slider, called wicker -

Please Login or Register to see this Hidden Content

as far as I'm aware this will only go into the header area of the site.

 

The standard feature slider automatically goes into the page content area/margins on the page. You can use css to expand it outside the margin, but it's tricky and depends on the site layout setting (full width/fixed width) and how close the page content area goes to the edge of the page as to how well it comes out.

 

There is a LESS option available too to break sections outside of the content pad, see

Please Login or Register to see this Hidden Content



#3 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 02:12 AM

Thanks James!  The less option looks pleasing.  However I think I read somewhere that Less does not work with the css customization plugin which is what I use.  
Do I have to start using a child theme or something like that?  If so, please point me to the best resource to learn how to use the child themes properly.  I've been wanting to use less on my upcoming project anyhow.  

 

Thank you James!



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 02:24 AM

Hi Joe, I've checked in the dev themeing center and it says if you add a style.less to the customize plugin (you'll need to make this file manually and upload it via ftp into the plugin folder) you can use all the benefits of LESS. See -

Please Login or Register to see this Hidden Content

 that page also has all the relevant information on creating child themes :-)



#5 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 03:34 AM

I created a style.less file and uploaded into the customize plugin folder where my style.css also live.    I tried the tip from  

Please Login or Register to see this Hidden Content

 but it seems like the LESS styles arent pulling in.   

You can see the test page here.  

Please Login or Register to see this Hidden Content



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 04:08 AM

Have you moved all the existing css from the style.css over to the style.less.

 

You'll still need the style.css there, but only with the header information to link it to the parent theme, otherwise all the code will need to be inside the style.less



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 04:24 AM

I've just had a go using that code to see if I can get it to work on the slider in my test site, I can't get it do it using that. I'll have a play around with it



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 05:08 AM

The only way I can get it work sucessfully is using css, applying negative margins against positive padding to break out the content-pad, it still works responsively. 

 

Please Login or Register to see this Hidden Content

 

This was the mode I used on the test above

Please Login or Register to see this Hidden Content



#9 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 05:13 AM

Hey James still not getting it.  I moved all my CSS to the style.less file but appears it still show my cached css.   Any change i make in the LESS file doesn't appear.  



#10 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 05:15 AM

just saw your code above.  Ill try that next.  



#11 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 05:23 AM

Yes your code worked... but will probably have to adjust the media queries to respond for mobile.  

 

Still curious though to get the LESS working either way.  If I make a change to the less Code, it does make it when i refresh.  



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 April 2013 - 06:41 AM

Hi,

 

In order to correctly use style.less files, I recommend you take a look at our customisation methods and custom CSS documentation. As you will most likely require a PageLines override in your code.

 

Please Login or Register to see this Hidden Content

 

Also, to see your LESS changes immediately, once you have added or made some amendments to your style.less file, go to PageLines > Site Options > Website Setup and click on the Save Settings button. Then refresh your site and the changes should have taken place.



#13 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 19 April 2013 - 03:43 PM

Thanks for the info Danny.   I went to the PageLines > Site Options > Website Setup and click on the Save Settings button and I am still not seeing any updated modifications. 
Im just doing a simple test, like upping the font size or changing colors.  When I re-save my changes both in the ftp file and the Site Options>Website Setup they dont appear to have changed.  



#14 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 April 2013 - 01:43 AM

Have you managed to get this working? I can see some custom css showing in the compiled css for your test site.

 

I'll check the exact details with one of the dev team and test out the less stylesheet over the weekend and post back. I've not used LESS personally in the customize plugin before, but following the instructions on the dev center page it looks like you've done all the correct steps.

 

Does the LESS code you're trying work in the custom code box when you put it in there? Changes show on the site?

 

Do you see any messages like this in the admin panel?

Please Login or Register to see this Hidden Content



#15 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 20 April 2013 - 05:27 AM

Hey James,  

 

I actually took a break from it today as I had a bunch of sales meetings today.  However I still haven't got it working just yet.    

To answer your questions:

I did try to also use the LESS/CSS custom section in the advanced tab and still didn't see the changes. 

I also didn't see any LESS error tabs open up.  

I appreciate you looking into this.  Ill be around all weekend and Ill keep an eye out for your response.  

 

Thanks. 



#16 Rob

Rob

    One Smart Egg

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

Posted 20 April 2013 - 03:02 PM

Hi Joe,

 

I'm not sure if this plugin or one like it would work for you: 

Please Login or Register to see this Hidden Content

 

There are many full-width background sliders out there. I'm not sure which allows you to place the plugin on the page by section selection or by shortcode.

 

If none of our products work for you, then please try WordPress.org or, CodeCanyon.net.

 

Please let us know how it goes!



#17 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 20 April 2013 - 07:57 PM

Hello Rob, 

 

I've tried a few code canyon slider plugins that work great.  However the problem Im trying to solve with Pagelines is how do extend it outside the Page Content Section (100% browser width) all while keeping the main content elements beneath it in tact at 960 or 1024 (depending on what I set it as).  I design quite a bit of sites that need this capability.  

 

Heres one example.  

Please Login or Register to see this Hidden Content

 This one is a bit more custom that one of my devs is developing in Drupal.  But notice the full image background.  

 

Hope I can solve it with Pagelines.  If not I may need to find another theme to work from.  



#18 Rob

Rob

    One Smart Egg

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

Posted 21 April 2013 - 02:23 PM

Hi,

 

If your site's Design Mode is Full Width, then you can go to Dashboard > PageLines > Site Options > Color Control and apply a large background (full-width) set to 0 (vertical position), then apply a color for the page or content area, you can achieve the goals of your example, easily.

 

On your static homepage, add one of the special sections, (Masthead, Callout, etc.) to achieve the big text, and then add a button. Below the bottom edge of the background, you'll have the grey background (other color, as selected).

 

This whole thing can also be done via the settings of an individual homepage as well.

 

That said, this is based on a static, not sliding image. If a slider image is needed, then you have to implement that above the body tag, so that slider loads before the rest of the page.



#19 jflores1979

jflores1979

    Member

  • Members
  • 22 posts
  • LocationTexas
  • Country: Country Flag

Posted 22 April 2013 - 02:41 PM

Thanks for the information Rob,  
Can you elaborate a bit more on what you talk about... 

"If a slider image is needed, then you have to implement that above the body tag, so that slider loads before the rest of the page."



#20 Rob

Rob

    One Smart Egg

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

Posted 22 April 2013 - 08:37 PM

Well, if you view your homepage's source, there's an order, starting typically with:

Please Login or Register to see this Hidden Content

You'll also see something like:

Please Login or Register to see this Hidden Content

If your slider is loaded into the page before the <div id="site"..., then it will be able to appear in the heading area.  How this is done, honestly, I can't say, since I'm not a programmer.  I do know however, that once you get into the control of that ID and corresponding class, then the slider has to be within the context of the padding and margins set by them.  You'd need a developer to implement something manually.

 

So, to go full-width, the code must be located higher in precedence than the usual places.  Some plugins do this for you.  This might be one you should look at:

Please Login or Register to see this Hidden Content