Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 20th May 2014, 08:36 PM   #121
MarkJC
Regular Member
 
Join Date: Feb 2013
Location: Reno, NV
Posts: 52
MarkJC is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
I have attached a modified copy of your file.

On the Home page I've added a panel header as discussed a couple of posts ago. The image for the header is in File Manager. The panel covers part of the slider.

Joe
Thanks so much. I don't know why I couldn't do that!
One more question if it is ok: can the header be set to scroll with page?
Do I add "position..."

Mark C
MarkJC is offline  
Old 20th May 2014, 11:47 PM   #122
MarkJC
Regular Member
 
Join Date: Feb 2013
Location: Reno, NV
Posts: 52
MarkJC is on a distinguished road
Default Re: Fluid (Full Width) Slider

sorry, double post...

Last edited by MarkJC; 21st May 2014 at 12:16 AM. Reason: Did not refresh and double posted.
MarkJC is offline  
Old 21st May 2014, 06:34 AM   #123
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: Fluid (Full Width) Slider

Quote:
Originally Posted by MarkJC View Post
Thanks so much. I don't know why I couldn't do that!
One more question if it is ok: can the header be set to scroll with page?
Do I add "position..."

Mark C
If you want the appearance as shown on the second page but using your header, do the following.

Remove the panel.
Remove the cover statements that you have entered in page body style.
Remove the style statement for the panel.

Joe
Clitheroe Kid is offline  
Old 23rd May 2014, 09:52 PM   #124
MarkJC
Regular Member
 
Join Date: Feb 2013
Location: Reno, NV
Posts: 52
MarkJC is on a distinguished road
Default Re: Fluid (Full Width) Slider

How do I hyperlink some of the text in the slider?
I tried putting a website address into the code but still didn't hp.
I think this is where I have to input the code:
(<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins %2Fcamera%2F&amp;charset=%28detect+automatically%2 9&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">

This is what is originally there.
Also, can I change the color of the hyperlinked text?
MarkJC is offline  
Old 24th May 2014, 06:19 AM   #125
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: Fluid (Full Width) Slider

Quote:
Originally Posted by MarkJC View Post
How do I hyperlink some of the text in the slider?
I tried putting a website address into the code but still didn't hp.
I think this is where I have to input the code:
(<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins %2Fcamera%2F&amp;charset=%28detect+automatically%2 9&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">

This is what is originally there.
Also, can I change the color of the hyperlinked text?
The hyperlink you are refering to is in the caption. The wording thats clickable is at the end, and in their instance is in brackets. Remove the brackets if not required.

(<a href="http://www.yoursite.com" target="_blank">click here<a/>)

Joe
Clitheroe Kid is offline  
Old 17th June 2014, 03:21 PM   #126
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Joe,

I have been playing with this slider and it works great. I increased the height to 845px in order to fill the screen and I would like to add a navigation bar on the top of the page. I also would like to add a fluid bar with transparency behing the navigation bar.
The effect that I'm trying to achieve is similar to this website: http://www.ciamaritima.com.br/

The probelm is that the the fluid bar is not showing in front of the slider. I tried to change the z-index but that didn't work. I used the following code for the fluid bar that you once posted here for a fluid header:

#bg {
top: 450px; /* change height from top of page */
background: black; /* change colour, use black, blue etc, or use hex #8f2946 */
opacity:0.35;
filter:alpha(opacity=10);
height: 50px; /* change background height */
width:100%;
position:absolute;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
background-position: center center;
z-index:11;
}

Can you please help me?

Thanks in advance,
Bruno

PS: I noticed now that a vertical scrollbar appears on the page even setting the page and master page height to match the slider height (850px). Is it possible to "hide" the vertical scrollbar (like in the website example I provided)?

Last edited by bruno; 17th June 2014 at 03:40 PM.
bruno is offline  
Old 17th June 2014, 06:36 PM   #127
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: Fluid (Full Width) Slider

Quote:
Originally Posted by bruno View Post
Joe,

I have been playing with this slider and it works great. I increased the height to 845px in order to fill the screen and I would like to add a navigation bar on the top of the page. I also would like to add a fluid bar with transparency behing the navigation bar.
The effect that I'm trying to achieve is similar to this website: http://www.ciamaritima.com.br/

The probelm is that the the fluid bar is not showing in front of the slider. I tried to change the z-index but that didn't work. I used the following code for the fluid bar that you once posted here for a fluid header:

#bg {
top: 450px; /* change height from top of page */
background: black; /* change colour, use black, blue etc, or use hex #8f2946 */
opacity:0.35;
filter:alpha(opacity=10);
height: 50px; /* change background height */
width:100%;
position:absolute;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
background-position: center center;
z-index:11;
}

Can you please help me?

Thanks in advance,
Bruno

PS: I noticed now that a vertical scrollbar appears on the page even setting the page and master page height to match the slider height (850px). Is it possible to "hide" the vertical scrollbar (like in the website example I provided)?
The site in the link you have provided has a full screen gallery and not the slider as you are using. You need something that is fluid depending on the screen size. See "Supersized" in my sig below. That will change with screen size and should be easier to insert a header and footer.

Joe
Clitheroe Kid is offline  
Old 18th June 2014, 04:38 PM   #128
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
The site in the link you have provided has a full screen gallery and not the slider as you are using. You need something that is fluid depending on the screen size. See "Supersized" in my sig below. That will change with screen size and should be easier to insert a header and footer.

Joe
Ok Joe, I replaced the slider by the Supersized slideshow.
However, my initial question remains. If I would like to insert a bar as background to the navigation bar (as the mentioned website has) how do I make it full width?
bruno is offline  
Old 18th June 2014, 05:00 PM   #129
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: Fluid (Full Width) Slider

Quote:
Originally Posted by bruno View Post
Ok Joe, I replaced the slider by the Supersized slideshow.
However, my initial question remains. If I would like to insert a bar as background to the navigation bar (as the mentioned website has) how do I make it full width?
What version of webplus are you using?
Do you want the navbar and background fixed so the page scrolls underneath it?

Joe
Clitheroe Kid is offline  
Old 18th June 2014, 05:05 PM   #130
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
What version of webplus are you using?
Do you want the navbar and background fixed so the page scrolls underneath it?

Joe
I'm using X6. I would like it to work the "normal" way, fixed navbar and background.

I tried to design a background and add it to the page properties as a header but it doesn't show.

Last edited by bruno; 18th June 2014 at 05:18 PM.
bruno is offline  
Old 18th June 2014, 05:42 PM   #131
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: Fluid (Full Width) Slider

Quote:
Originally Posted by bruno View Post
I'm using X6. I would like it to work the "normal" way, fixed navbar and background.

I tried to design a background and add it to the page properties as a header but it doesn't show.
Have you looked at "Panels for Headers/Footers" in my sig below.

Joe
Clitheroe Kid is offline  
Old 18th June 2014, 06:12 PM   #132
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
Have you looked at "Panels for Headers/Footers" in my sig below.

Joe
Joe, that's the effect I'm looking for Thank you very much!
bruno is offline  
Old 27th June 2014, 06:46 PM   #133
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Joe,

I'm using you're "Panels for Headers/Footers" tutorial but I can't figure out how to place the navigation bar where I want it.
I'm trying a fixed header (that doesn't scroll with the page) and if I insert my navigation bar inside the header panel the navigation bar scrolls with the page but the header panel remains in place.
The option is to convert the navigation bar to a panel and align the postiion to centre and top of the page, but this way I don't have the flexibility of placing the nav bar more to the right or left.
Is there a way of doing this?
How did you placed correctly the nav bar on your "Panels for Headers/Footers" website?

Regards,
Bruno
bruno is offline  
Old 27th June 2014, 07:17 PM   #134
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: Fluid (Full Width) Slider

Quote:
Originally Posted by bruno View Post
Joe,

I'm using you're "Panels for Headers/Footers" tutorial but I can't figure out how to place the navigation bar where I want it.
I'm trying a fixed header (that doesn't scroll with the page) and if I insert my navigation bar inside the header panel the navigation bar scrolls with the page but the header panel remains in place.
The option is to convert the navigation bar to a panel and align the postiion to centre and top of the page, but this way I don't have the flexibility of placing the nav bar more to the right or left.
Is there a way of doing this?
How did you placed correctly the nav bar on your "Panels for Headers/Footers" website?

Regards,
Bruno
If the header is on the master page you should be able to place the navbar on top of the header. Drag the navbar off the page, release it, grab it again and drag it onto the panel.

For a reason I cant remember, the navbars on the demo are on each page. The master page is not used.

Joe
Clitheroe Kid is offline  
Old 29th June 2014, 11:39 PM   #135
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
If the header is on the master page you should be able to place the navbar on top of the header. Drag the navbar off the page, release it, grab it again and drag it onto the panel.

For a reason I cant remember, the navbars on the demo are on each page. The master page is not used.

Joe
Ok Joe, I will try it.

How do I insert captions/titles for the photos? I see on the code that there is a line "slide captions" where it says : (Pull from "title" in slides array). I don't know the code that I have to write to activate the slides captions...
I also noticed on the original Supersized jQuery plugin demo page that the navigation arrows are more distant from the centre than in your version. How can I change the arrows position?

Thanks Joe!
bruno is offline  
Old 30th June 2014, 07:13 AM   #136
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: Fluid (Full Width) Slider

Quote:
Originally Posted by bruno View Post
Ok Joe, I will try it.

How do I insert captions/titles for the photos? I see on the code that there is a line "slide captions" where it says : (Pull from "title" in slides array). I don't know the code that I have to write to activate the slides captions...
I also noticed on the original Supersized jQuery plugin demo page that the navigation arrows are more distant from the centre than in your version. How can I change the arrows position?

Thanks Joe!
Enter a 1 to make titles available, and enter titles where shown.

Code:
slide_captions          :   1,        //Slide caption (Pull from "title" in slides array) on=1/off=0
slide_links             :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides                     :      [  // Slideshow Images                                             
{image : 'img/bg001.jpg', title : 'Image Credit: test 1'},     {image : 'img/bg002.jpg', title : 'Image Credit: test 2'},
Cant help you with the position of arrows.

Joe
Clitheroe Kid 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: Full width slider in WPx6 with html code masasa WebPlus 10 16th December 2013 08:53 PM
WebPlus X6: Full width slider load times TheOldFart WebPlus 6 10th January 2013 07:59 PM
WebPlus X6: Full page width thebigman WebPlus 9 31st July 2012 12:27 PM
WebPlus X5: full screen width bar Roberto Muscia WebPlus 4 1st May 2012 11:22 PM
WebPlus X5: presenting as full width ericpope WebPlus 6 24th August 2011 02:57 PM


All times are GMT +1. The time now is 05:40 PM.