another webyeb question

is it possible to create a graphic or button that can have a link added to it in webyeb? In my example I would like a button or graphic for ‘Book Now’ that would allow the user to add a page link to - rather than just html text.

Again, thanks

http://sergeantdesign.com/testing2.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Noel
you can use a WebyYep image as a link or alternatively style the link to make it look like a button using css… that would probably be the easiest

speak soon max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Max, as ever.

But, without sounding like a complete numpty, how does one go about “styling the link to make it look like a button using css”? Is this like css menus - and how would that transfer to webyeb. This is my best effort so far - made the “book now” rich text so the client can make it a link

http://www.stokefilmtheatre.org.uk/screenmonday.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Since WebYep isn’t in my skillset yet, I’m not qualified to say more than
it requires less of an action approach (at least currently) and more of
manually extend FWP CSS approach.

Here, with the Learn More button
http://industrialmarketing.com.au/index.html

and again here, with the Request Information button
http://industrialmarketing.com.au/drillrigs/ref3457.html

I used this resource to generate the CSS codes
http://www.cssbuttongenerator.com - though there are others.

If you can, dig into the css code of my pages and see how it is applied to
the anchor and hover tags. I’m not much help at the moment but if you can
manage custom styles in FWP it isn’t too advanced.

…how does one go about “styling the link to make it look like a button
using css”?


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Basically, what you do is mess with the browser’s expectations of how an A tag (link) should look. Usually, they are inline elements, so they shrink around their contents, and they have an underline and they don’t contribute any height to their content, etc. Compare these two links, and see what is going on in the styles:

Read the CSS part, and look where I said “this is where the link gets styled”. This is just very basic stuff, there are lots more things you can add – shadows, inner shadows to make the edges seem beveled, text-shadows to make the chiseled inset text – this is just flat.

Walter

On Aug 7, 2013, at 6:45 PM, Noel Sergeant wrote:

Thanks, Max, as ever.

But, without sounding like a complete numpty, how does one go about “styling the link to make it look like a button using css”? Is this like css menus - and how would that transfer to webyeb. This is my best effort so far - made the “book now” rich text so the client can make it a link

http://www.stokefilmtheatre.org.uk/screenmonday.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ern, I have done a button at http://www.cssbuttongenerator.com - all very marvellous.

However I become a bit unstuck when attempting to place the created code into freeway. Made html box, insert markup item - nothing happens! When uploaded just blank - obviously doing something wrong!

cheers


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

However I become a bit unstuck when attempting to place the created code into freeway

Posting a link to your online example would help us to diagnose your problem.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

in the keyline box I put the markup item of was I thought was a button

http://www.stokefilmtheatre.org.uk/screenmonday.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I put the markup item of was I thought was a button

What you have put in there is the style declaration to make an item look like a button

The following code should be added to your Page>HTML Markup in the before section.

You then select your item on the FW page (item13) and use Item>Extended to add the name/value pair of class: classname (no colon)

<style type="text/css">
.classname {
 -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
 background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
 background-color:#79bbff;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #84bbf3;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:1px 1px 0px #528ecc;
}.classname:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
 background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
 background-color:#378de5;
}.classname:active {
 position:relative;
 top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

Quick example at http://www.deltadesign.co/FW6Test/newscycle.html

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

got another step forward!

so the code that is generated by button generator has to be added to the page and to the html box. I can see it generate the value ‘classname’ - but where does ‘pair of class’ come from to go in ‘name’ column in the extended box.

Another minor detail is that the button should say ‘Book Now’ but has no text.

All part of the learning experience!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you click into an HTML box on the page (so you see a blinking text cursor) and you choose from the main menu: Insert / Button (under Form Items at the bottom of the list), then you would click once on the button itself and look in the Inspector for the rest of these steps.

  1. Switch to the Output tab (third from the left) and change the Type picker to Button.
  2. In the Value field, enter the text you wish to have appear in the button.
  3. While the button is still selected, choose Item / Extended from the main menu, click Add or New (depending on the version of Freeway) and in the sub-sub-dialog that appears, enter class in the Name field and classname in the value field. (If you have renamed the style, change classname to whatever you renamed the style, minus the leading dot.)

Walter

On Aug 12, 2013, at 7:54 AM, Noel Sergeant wrote:

got another step forward!

so the code that is generated by button generator has to be added to the page and to the html box. I can see it generate the value ‘classname’ - but where does ‘pair of class’ come from to go in ‘name’ column in the extended box.

Another minor detail is that the button should say ‘Book Now’ but has no text.

All part of the learning experience!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

just getting back to this - apologies

managed to get the button and for it to have ‘book now’ on it, just great so far

http://www.stokefilmtheatre.org.uk/aboutus.html

next step, however, is where I am stuck

how do I incorporate this into webyeb and for the end user to apply a link to it (how would I apply a link to it, if that is not a completely stupid question, as you cannot assign a link to it via the ‘link’ at bottom of freeway)

thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Buttons are form elements. They do not carry URLs at all, and if you want them to perform some sort of navigation, you will need a server-side form handler to hold that logic. If you want a button-shaped object on the page that can carry a link, try using a picture of a button. Those can be wrapped in a link, and work just as any other image-based link would.

Walter

On Aug 13, 2013, at 2:27 PM, Noel Sergeant wrote:

just getting back to this - apologies

managed to get the button and for it to have ‘book now’ on it, just great so far

About Us

next step, however, is where I am stuck

how do I incorporate this into webyeb and for the end user to apply a link to it (how would I apply a link to it, if that is not a completely stupid question, as you cannot assign a link to it via the ‘link’ at bottom of freeway)

thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Erm… a bit lost now. So whilst I have been learning from the lessons here on how to create a css buttons, they are basically no good as a stand alone graphic and have to be used as part of a form and cannot be integrated (easily) into webyeb.

Well, at least I can create css buttons now - just need a form to put them in!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Noel, if it was just the copy that needed the link and not the whole button in WebYep then you could try:

<LINK:http://www.stokefilmtheatre.org.uk/booknow Book Now>

(or whatever your bookings.co.uk page is called) in your WY edit window and only the ‘Book Now’ copy would be shown. Note the gap between the URL and the copy you want to display.

Trev

On 13 Aug 2013, at 21:37, Noel Sergeant wrote:

Erm… a bit lost now. So whilst I have been learning from the lessons here on how to create a css buttons, they are basically no good as a stand alone graphic and have to be used as part of a form and cannot be integrated (easily) into webyeb.

Well, at least I can create css buttons now - just need a form to put them in!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options