Jump to content


Photo
- - - - -

unable to achieve desired layout


  • Please log in to reply
10 replies to this topic

#1 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 27 March 2012 - 05:40 AM

Using the current options in the pagelines framework, I'm unable to achieve my desired layout without some seemingly hacky css applied to a universal sidebar and feature area. My current workaround is now causing me some limitations and i'd like to see if there's a better way.

I basically want a sidebar to the left of the content area, then inside my content area, I'd like a feature, then below that 2 columns, the loop and a right sidebar. I can have a sidebar to the left and right of the loop, but I can't seem to have a sidebar that would be the full height of the content area on the left, but the right sidebar have an element on top of it.

this is my current layout:
Posted Image

and this is what I'd really like to achieve
Posted Image

I'd really love to see some more options in the layout manager, or some 3rd party options to add more choices here. Does anyone have any suggestions on how I can achieve my desired layout?

#2 Danny

Danny

    Is Awesome!

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

Posted 27 March 2012 - 11:31 AM

Hi, You can do this but to have a layout like in the above images, would require custom CSS. There are some third party plug-ins that can assist you but they're premium plug-ins. Can you post a link to page in question, where you currently have the layout.

#3 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 27 March 2012 - 02:33 PM

Hi Danny, this is the page where I'd like the layout like in the 2nd image above:

Please Login or Register to see this Hidden Content

Which 3rd party plugin would accomplish this, even if it is premium?

#4 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 27 March 2012 - 07:59 PM

Another thing to add to this, is to achieve my current layout, I'm forced to use the fixed width layout instead of each element stretching across the full screen. I'd love some CSS layout suggestions so that I can use the full width and still achieve my desired layout. I think I could get this working if I could have 2 columns as the page template, in the left column would be my sidebar, in the right would be my content, then in the content column, the top would be a feature, then below that would be 2 more columns. The left column would be the loop, and the right would be my secondary sidebar. Hoping someone has a simple way...

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 28 March 2012 - 02:42 AM

This layout sounds like it would need to be achieved with more than just CSS. From your description, the left sidebar and right content column layout sounds straightforward, but when you get to adding the secondary sidebar on the right side of the loop below the feature in the content column area, that's where it gets tricky. Will the loop contain blog content or are you going to use it solely for page content if you're not going to use a blog?

#6 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 28 March 2012 - 03:05 PM

For the most part it would just be page content, however I could see that layout also being used for the blog pages. My main focus right now would be to have the layout for page content.

#7 Rob

Rob

    One Smart Egg

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

Posted 28 March 2012 - 07:11 PM

I know this is an out-of-the-box concept, but have you thought of simply creating a single background, full-width, black on one side, white stripe where the padding would go in your demo, and actual photo (the one you show in your demo) on the left? If you used that background for each slide and set your transition speed low between slides, then people wouldn't notice any change IF you even were to transition them. I notice now you're not doing that. By using this method, you avoid lots of customization and turn to a simple graphic solution in which your slider is full width, which is really easy to do by dragging it to the right template in Page Templates.

#8 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 04 April 2012 - 04:04 AM

This is closer to the actual design that will be used... so not sure your idea would work... my examples above were just roughs. Any ideas how I could create a custom template for this and still use the features I love about page lines? the image in the left column would be smaller

Posted Image

#9 Danny

Danny

    Is Awesome!

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

Posted 04 April 2012 - 10:26 AM

OK, this is certainly possible with PageLines and for the most part out of the box too. I'll go through each section to make this easier for you.

You would need to use the Full Section layout to achieve this.

The Header section would simply be - BrandNav with some customisation.

The Page body would be using a sidebar on left layout. With a feature slider in the content area of the template.
The content on the right could be added using pp2,pp3,pp4,pp5 grid HTML

Please Login or Register to see this Hidden Content

for more information about this. Then using custom CSS, style the column so it matches the width you require.

The Footer can use the standard Footer column widget, set it to 4 and then add a full width sidebar section to the footer. Then add a text widget to add your copyright information.

Thats a basic run down of the style, if the above seems to complicated, feel free to contact a PageLines Pro. They will happily assist you!

Please Login or Register to see this Hidden Content



#10 ddecort

ddecort

    Member

  • Members


  • 18 posts
  • Country: Country Flag

Posted 04 April 2012 - 03:25 PM

ok, sounds like a good strategy, really appreciate your response... I'll give that a try once our design is finalized. One concern I have is that the right sidebar (3 buttons) is not something I have to add manually on every single page. I'd like to be able to control it from the admin widget area. Is it possible to add a sidebar in the content area in the grid column with maybe a short-code or something?

#11 Rob

Rob

    One Smart Egg

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

Posted 04 April 2012 - 08:12 PM

I can't speak for Danny, but I think he's clear about putting the right sidebar under the slider, to the right of content. Since you've not finalized your design plans, I'll defer the rest of this to him when he's in first thing in the morning. I think however, he's got a point. One of our Pros would be MUCH better at doing this, though Danny's pretty good. If your final design is really complex, a Pro may be your best option.