Gradient writes CSS, and there are several ways to integrate external CSS into your Freeway page. Which one you choose depends a lot on how you plan to use the resulting gradient. Let’s say you just want to add an orange gradient to a single element on a single page. You would use the simplest thing that could actually works: an inline style declaration in the of your page. Click once on the element you want to have that gradient, note its Name/ID from the Inspector, and then open up the Page / HTML Markup / Before dialog. Type the opening style tag and selector, like this:
<style type="text/css">
#theNameIdYouNeed {
(The leading # mark means that this is an ID-based style, theNameIdYouNeed is where you would enter the Name/ID value you noted earlier. The opening curly brace means that this is the beginning of the attributes hash, which you will paste in from Gradient.)
Now, on the next line, you would paste the output from Gradient (click the Copy button at the bottom of that interface to load the gradient CSS into your clipboard).
background-color: #df8d36;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(223, 141, 54)), to(rgb(254, 236, 226)));
background-image: -webkit-linear-gradient(top, rgb(223, 141, 54), rgb(254, 236, 226));
background-image: -moz-linear-gradient(top, rgb(223, 141, 54), rgb(254, 236, 226));
background-image: -o-linear-gradient(top, rgb(223, 141, 54), rgb(254, 236, 226));
background-image: -ms-linear-gradient(top, rgb(223, 141, 54), rgb(254, 236, 226));
background-image: linear-gradient(top, rgb(223, 141, 54), rgb(254, 236, 226));
Finally, close the style tag by typing this on the next line:
}
</style>
That’s it, your box will now have an orange gradient background. (Be sure that you have not specified any background at all in Freeway – set the Background to None using the Inspector – otherwise that will override what you just created.)
Now if you wanted to apply this style to more than one thing, or on more than one page, you might want to use a different approach. Instead of creating an ID-based style, you would use a Class-based style. The selector (the part outside of the curly-braces) would change from beginning with an octothorp (#) to beginning with a dot (period, full-stop). So you might write this as the first block instead:
<style type="text/css">
.orangeGrad {
Everything else would be the same. Back in the regular Styles palette, you would create a new empty style with the Name set to orangeGrad
. You wouldn’t need to do anything in that style except create it. And you would single-click on the element you wanted to apply the orange gradient to and click once on that .orangeGrad style in the Styles palette to apply it to that box. You could do this on as many items as you wanted to, and they would all get the gradient.
Finally, if you wanted to use this style on multiple pages, you would create the Class-based style on your Master page(s). Any page where you applied the .orangeGrad “marker” style to an HTML element would consume this one master style definition and you would see the result.
Note that in none of these cases would you see the gradient while designing. That’s one of the limitations of Freeway w/r/t hand-coded CSS, since the Freeway interface does not read or even understand HTML or CSS at all. You have to flip over to Preview mode or preview in a browser to see the combination of Freeway-generated CSS and external CSS such as that created by Gradient.
Walter
On May 28, 2013, at 11:13 AM, Steve Ainsworth wrote:
Hi All,
I need to create some gradient backgrounds and purchased some software - http://www.gradientapp.com/
How or can I - Copy the code into a freeway page ?
If you can then how do i go about doing it?
Many thanks for the help
Steve
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