Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 12th August 2012, 01:26 PM   #1
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Share: Use panels for full width Headers and Footers

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
Clitheroe Kid is offline  
Old 12th August 2012, 01:30 PM   #2
TAE
Senior Member
 
TAE's Avatar
 
Join Date: Nov 2010
Location: Glasgow, (GCU)
Posts: 2,824
TAE is well on the road to greatness
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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)
TAE is offline  
Old 12th August 2012, 06:53 PM   #3
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by TAE View Post
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 is offline  
Old 14th August 2012, 07:40 PM   #4
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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
Clitheroe Kid is offline  
Old 14th August 2012, 09:07 PM   #5
TAE
Senior Member
 
TAE's Avatar
 
Join Date: Nov 2010
Location: Glasgow, (GCU)
Posts: 2,824
TAE is well on the road to greatness
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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!
TAE is offline  
Old 14th August 2012, 09:55 PM   #6
grovesie
Senior Member
 
Join Date: Mar 2009
Location: Mid Wales
Posts: 4,914
grovesie has much to be proud ofgrovesie has much to be proud ofgrovesie has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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
grovesie is offline  
Old 15th August 2012, 01:54 AM   #7
Dijenga
Senior Member
 
Dijenga's Avatar
 
Join Date: May 2009
Location: Crossett, Arkansas, USA
Posts: 1,313
Dijenga is an unknown quantity at this point
Default Re: Share: Use panels for full width Headers and Footers

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.
__________________
Join us at FULLY PIXEL FORUM!
Dijenga is offline  
Old 15th August 2012, 10:28 AM   #8
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by grovesie View Post
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
Clitheroe Kid is offline  
Old 15th August 2012, 10:29 AM   #9
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 23,983
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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!
__________________
Ali
Win 10 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win 10 Pro 64-bit | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM

Ali is offline  
Old 15th August 2012, 10:45 AM   #10
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Dijenga View Post
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.


Quote:
Originally Posted by Dijenga View Post
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
Clitheroe Kid is offline  
Old 15th August 2012, 01:42 PM   #11
Dijenga
Senior Member
 
Dijenga's Avatar
 
Join Date: May 2009
Location: Crossett, Arkansas, USA
Posts: 1,313
Dijenga is an unknown quantity at this point
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by Clitheroe Kid View Post
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.
__________________
Join us at FULLY PIXEL FORUM!
Dijenga is offline  
Old 16th January 2013, 09:29 AM   #12
zenriko
Regular Member
 
Join Date: Jan 2013
Posts: 63
zenriko is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

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..

Last edited by zenriko; 16th January 2013 at 10:33 AM.
zenriko is offline  
Old 16th January 2013, 11:10 AM   #13
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by zenriko View Post
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.

Code:
 
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
Clitheroe Kid is offline  
Old 16th January 2013, 11:18 AM   #14
zenriko
Regular Member
 
Join Date: Jan 2013
Posts: 63
zenriko is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

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.

Last edited by zenriko; 16th January 2013 at 11:24 AM.
zenriko is offline  
Old 16th January 2013, 11:30 AM   #15
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by zenriko View Post
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
Clitheroe Kid is offline  
Old 16th January 2013, 11:36 AM   #16
zenriko
Regular Member
 
Join Date: Jan 2013
Posts: 63
zenriko is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

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.
Attached Files
File Type: wpp LTPS.wpp (50.6 KB, 203 views)
zenriko is offline  
Old 27th January 2013, 05:31 AM   #17
gdhiman12
New Member
 
Join Date: Nov 2012
Posts: 16
gdhiman12 is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

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 is offline  
Old 27th January 2013, 05:35 AM   #18
gdhiman12
New Member
 
Join Date: Nov 2012
Posts: 16
gdhiman12 is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

im looking for this kind of effect in my pannels


http://windows.microsoft.com/en-IN/w...ontact-support
gdhiman12 is offline  
Old 27th January 2013, 07:28 AM   #19
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Share: Use panels for full width Headers and Footers

Quote:
Originally Posted by gdhiman12 View Post
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
Clitheroe Kid is offline  
Old 28th January 2013, 05:48 AM   #20
gdhiman12
New Member
 
Join Date: Nov 2012
Posts: 16
gdhiman12 is on a distinguished road
Default Re: Share: Use panels for full width Headers and Footers

Thnx 4 replying

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

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
WebPlus X6: Got my new shiny x6 - How to create full width headers and footers ? 240zpaul WebPlus 12 18th January 2013 09:45 PM
WebPlus X6: Full width headers and footers joeelderofmcap WebPlus 7 17th June 2012 12:34 AM
WebPlus X6: Full width headers and footers in X6 danh30 WebPlus 1 30th May 2012 09:19 PM
Full width headers and footers - another method nfc212 WebPlus 29 8th February 2012 06:04 AM
WebPlus X5: Full width headers and footers lkschuster WebPlus 3 5th February 2012 04:22 AM


All times are GMT +1. The time now is 08:20 AM.