Archived

This topic is now archived and is closed to further replies.

  • 0

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

Question

Posted · Report post

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 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Keith

 

There's a section available in the store which will help you with the background image slider, check out http://www.pagelines.com/store/sections/wicker/

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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)

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://developer.pagelines.com/

 

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.

Share this post


Link to post
Share on other sites