Jump to content


Photo
- - - - -

Home Page (landing page) Full width headers, content, rollovers etc...


  • Please log in to reply
7 replies to this topic

#1 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 377 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 26 March 2013 - 02:08 PM

Hi Folks

 

Trying to create a home page similar to what is attached. I think what I will have to do is customise the depth of the header (on this page only?) and I want the header, content area, footer etc... to stretch left to right of the browser. I have identified these pieces of custom code (haven't implemented them yet) that seem to do some of what I need. 

 

 

//***CHANGING THE BACKGROUND COLOUR IN HEADER AND CONTENT SECTION OF SITE***//
#site .section-branding .texture {
max-width: 100%;
background: #575757;
}
 
 
#site .section-branding .content {
background-color: #575757;
}
 
#site .texture {
max-width: 100%;
background: #757575;
}
 
 
#site .content {
background-color: #757575;
}
 
Ideally I like the image in the header background to change as the mouse would roll over the boxes (one of the three boxes). 
 
The easy route would be to go to a developer for the coding, but I'd prefer to do it myself.
 
Can anyone offer any advise, directions or suggestions.
 
Many thanks in advance.
Keith 


#2 catrina

catrina

    Advocate

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

Posted 26 March 2013 - 07:33 PM

Would the boxes also change on rollover or only the background image?



#3 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 377 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 26 March 2013 - 07:48 PM

Would the boxes also change on rollover or only the background image?


Hi Catrina, good to hear from you again.
Not the boxes would not change. Ideally they would be a link to another page.

#4 James B

James B

    Advocate

  • Members

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

Posted 26 March 2013 - 11:27 PM

Hi Keith

 

There's a section available in the store which will help you with the background image slider, check out

Please Login or Register to see this Hidden Content

 

If you're coding this yourself then you'll be able to set a static background using css, looking at your example image you'll need to make sure your site is set to full width sections to enable the background images/colors to reach the edge of the page.

 

Unfortunately I can't see a way to get the background image to change by hovering over the buttons using css, you'd need to use javascript I think to get something like that to work. But the wicker section will allow you to set those images in a slideshow which revolves in the background.



#5 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 377 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 27 March 2013 - 11:56 AM

Thanks James

 

Was looking into the wicker image slider but was unsure if it'd meet my needs. Have the full width sections enabled. Will continue on the quest. (not set on the design yet just conceptualising)



#6 Danny

Danny

    Is Awesome!

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

Posted 27 March 2013 - 12:05 PM

Hi,

 

Unfortunately, this is not possible out of the box with PageLines Framework and would probably require a custom section or code. The best course of action would be to contact one of our pros and see if they're able to assist.

 

Please Login or Register to see this Hidden Content



#7 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 377 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 27 March 2013 - 12:06 PM

Thanks for the reply danny, but as I stated above, would prefer to do myself - That way I get to learn a little. 



#8 Danny

Danny

    Is Awesome!

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

Posted 27 March 2013 - 12:14 PM

You could attempt to create your own section, but we wouldn't be able to assist you with this. If you're willing to give this an attempt, you could apply to join the developer community - 

Please Login or Register to see this Hidden Content

 

If your application is successful you would be able to discuss your custom section with other PageLines community developers, who will be able to give you advice and feedback.