WebPlus X6: Share: Use panels for full width Headers and Footers

[Clitheroe Kid]

This method of creating full width headers and footers is more versatile than the regular X6 and coded methods, and allows for other items to be included on the header/footer which are outside of the page width (the second demo page includes a full width marquee).

Have a look at the DEMO and vary the size of your browser window. Each page has basic instructions. The numbers are to show centering within the browser window.

Note: The fixed headers and footers do not require any additional html or css.

This may also work with X5 so if you try it, please post back on here with the results.

Joe

[TAE]

Originally Posted by Clitheroe Kid This method of creating full width headers and footers is more versatile than the regular X6 and coded methods, and allows for other items to be included on the header/footer which are outside of the page width (the second demo page includes a full width marquee). Have a look at the DEMO and vary the size of your browser window. Each page has basic instructions. The numbers are to show centering within the browser window. Note: The fixed headers and footers do not require any additional html or css. This may also work with X5 so if you try it, please post back on here with the results. Joe

Checking it out now

EDIT:Clever way of doing it... I think page "2" is the most useful (to me)

[Clitheroe Kid]

Originally Posted by TAE Checking it out now EDIT:Clever way of doing it... I think page "2" is the most useful (to me)

Thanks TAE,

I think its an easier method and quicker to set up than the X6 method.

Joe

[Clitheroe Kid]

Originally Posted by Clitheroe Kid This may also work with X5 so if you try it, please post back on here with the results. Joe

BUMP

To possibly help X5 users, is there anyone with X5 who could spend ten minutes to try this method and post back the results?

Joe

[TAE]

Originally Posted by Clitheroe Kid BUMP To possibly help X5 users, is there anyone with X5 who could spend ten minutes to try this method and post back the results? Joe

I gave X5 away to a friend (well I said I wanted it back, but that was 2-3 months ago ), but if I can get it back, I'll try it!

[grovesie]

Originally Posted by Clitheroe Kid BUMP To possibly help X5 users, is there anyone with X5 who could spend ten minutes to try this method and post back the results? Joe

Joe,

I haven't tried your method, but have used similar in a couple of templates I created in X5 using a panel (about 2500 x 250) centralised on the master page and a picture the same size as the panel and placed on it..

So, in answer to your question, yes it will work in X5.

Steve

[Dijenga]

I would use the "supersized" scroller with a single image for the background image on that . . . would make the whole thing hold together a bit better IMO.

Otherwise, I would still plan for the navigation to fall within an area of no more than 1024 pixels wide.

In my shop, most of the computers brought in for service are still running screen resolutions of 1024 x 768 or smaller.

[Clitheroe Kid]

Originally Posted by grovesie Joe, So, in answer to your question, yes it will work in X5. Steve

Hi Steve,

Thanks for that. At least we now have a simple alternative we can suggest as an alternative to the coded version.

Joe

[Ali]

Originally Posted by Clitheroe Kid Hi Steve, Thanks for that. At least we now have a simple alternative we can suggest as an alternative to the coded version. Joe

Thanks to both of you for your efforts here - I have added this solution to my ever-growing OneNote Notebook on WebPlus hints and tips!

[Clitheroe Kid]

Originally Posted by Dijenga I would use the "supersized" scroller with a single image for the background image on that . . . would make the whole thing hold together a bit better IMO.

Supersized is a great background plugin and I have a Tut for it on the forum. The only downside to it, is that it does not get along with the WP lightbox. I have three alternative lightbox scripts that do.

Originally Posted by Dijenga Otherwise, I would still plan for the navigation to fall within an area of no more than 1024 pixels wide. In my shop, most of the computers brought in for service are still running screen resolutions of 1024 x 768 or smaller.

I agree but as you know, this forum generates questions about every known (and some unknown) topics in the web design universe.

Joe

[Dijenga]

Originally Posted by Clitheroe Kid Supersized is a great background plugin and I have a Tut for it on the forum. The only downside to it, is that it does not get along with the WP lightbox. I have three alternative lightbox scripts that do.

I wish you hadn't told me that . . . so far they've been playing well together on one of my sites but then again, I have no changing images, just a single static image.

[zenriko]

Hi

I have been searching the forums and ended up here. I am trying to achieve the above but I don't really have knowledge of html or what your actually doing here to achieve the end result.

My main questions are- will Scrollable 'stretch' to compensate for more content. If so, where specifically within stylesheet am I to post that code? Or even better is that an actual 1-2-3 tutorial anywhere? I am properly novice at this.

-
For example my end goal ishttp://s2.postimage.org/qdxmwsjyx/Untitled.png

Disregard my comment about the panels, I realize what has to be done, just need clarification on where exactly to paste the html code, thanks!

edit2: Assuming I am modifying the background of the panel with the actual design of the header - I am getting bizarre outcomes trying to incorporate gradients. Debating whether to just delete and start again..

[Clitheroe Kid]

Originally Posted by zenriko Hi I have been searching the forums and ended up here. I am trying to achieve the above but I don't really have knowledge of html or what your actually doing here to achieve the end result. My main questions are- will Scrollable 'stretch' to compensate for more content. If so, where specifically within stylesheet am I to post that code? Or even better is that an actual 1-2-3 tutorial anywhere? I am properly novice at this. - For example my end goal ishttp://s2.postimage.org/qdxmwsjyx/Untitled.png Disregard my comment about the panels, I realize what has to be done, just need clarification on where exactly to paste the html code, thanks! edit2: Assuming I am modifying the background of the panel with the actual design of the header - I am getting bizarre outcomes trying to incorporate gradients. Debating whether to just delete and start again..

Hi zenriko,

Copy this css, then on your page Right Click>Attach HTML scroll down the page until you come to /*Master Page StyleSheet*/ Place your cursor at the right hand end and hit enter a couple of times, and paste the css there.

 
html, body {overflow-x: hidden;}

Place your panels on the center line at the top and bottom of the master page. Highlight the bottom panel and from the top menu bar Arrange>Attach To Bottom Of Page.

For the gradients you can use quickshapes and place them on your panels along with a nav bar and any other images.

Joe

[zenriko]

Thanks, however when I put gradient on some of the shapes, when i commit changes and OK it just revers those panels to solid colours?

Will the code also stop any images logos and alike from stretching the full 2000x width?

Failing all this, there is a template that's master page is only 300 height yet it appears to adapts to the size of whichever page it is applied to - can i copy this master page and inject it into my site? I really need a quick fix on this i'm getting roasted.

Thanks

http://s9.postimage.org/axic9odtr/Untitle1d.png

The two black and white gradients are those which revert to solid black.
I also don't see where to add nav bar (no physical icons on the toolbars) I had just planned to 'lay it over the top' of the blue strip.

[Clitheroe Kid]

Originally Posted by zenriko Thanks, however when I put gradient on some of the shapes, when i commit changes and OK it just revers those panels to solid colours? Will the code also stop any images logos and alike from stretching the full 2000x width? Failing all this, there is a template that's master page is only 300 height yet it appears to adapts to the size of whichever page it is applied to - can i copy this master page and inject it into my site? I really need a quick fix on this i'm getting roasted. Thanks http://s9.postimage.org/axic9odtr/Untitle1d.png The two black and white gradients are those which revert to solid black. I also don't see where to add nav bar (no physical icons on the toolbars) I had just planned to 'lay it over the top' of the blue strip.

Respond to this and attach a one page .wpp file with your images using the paperclip icon.

Joe

[zenriko]

Ok, the custom background is what I want my website to look like (the black space in header will incorporate logo etc - just not got that far yet).

The panel and quick shape in the middle of the page is basically a combination of mush in my brain trying to workout this full width stuff.

[gdhiman12]

Thnx for this wonderful post......

in second example you have shown both header and foter scrolls with page...wud u be kind enough to tell that what should we do if we have scroll only footer while header remains fix....
thnx in advance....

[gdhiman12]

im looking for this kind of effect in my pannels


http://windows.microsoft.com/en-IN/w...ontact-support

[Clitheroe Kid]

Originally Posted by gdhiman12 Thnx for this wonderful post...... in second example you have shown both header and foter scrolls with page...wud u be kind enough to tell that what should we do if we have scroll only footer while header remains fix.... thnx in advance....

On the top panel Right Click > Edit Panel and check the 'Align to Browser Window' box, use Top and Center in the drop downs.

Joe

[gdhiman12]

Thnx 4 replying

I had tried this also .....but browseris diplaying scroller bar at the bottom