Hi,
Just like the bigerns website how can I get a browser window to fill with a background image. Using Freeway Pro 5.6
Cheers,
MMc
http://portfolio.thebigerns.com/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I don’t know how Ernie did his but this is one way
http://actionsforge.com/actions/view/234-background-supersizer
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think the BGSupersizer action works well for animating multiple
backgrounds, but that wasn’t what I needed.
What I did was to take advantage of some simple but over-looked CSS
attributes. Here’s how I did it:
Step 1: Made my background image as a 1600 x 1200 pixel optimized jpeg.
Step 2: In Freeway Pro, I used the Page palette to set the
background-image, no repeat, aligned vertically top and horizontally center.
Step 3: Using the Style Editor, I created a new Tag style called ‘body’.
The body element is actually where FWP styles the window background. Then
on this ‘body’ style I set 2 custom extended styles:
NAME: background-attachment VALUE: fixed
NAME: background-size VALUE: cover
That last one can still use browser-specific fallbacks, so can be written
in FWP Extended styles as:
NAME: -webkit-background-size VALUE: cover;-moz-background-size:
cover;-o-background-size: cover;background-size: cover
This last may seem complicated, but trust me that FWP will write the style
without problem as long as the hyphens, colons and semi-colons are
preserved (except in NAME: and VALUE: obviously, that’s just WHERE those
things go)
There is no need to replicate the styling for other pages as they will
effect automatically. Just use the Page palette to place the background
image as previously.
Best wishes,
–
Ernie Simpson
On Wed, Jul 10, 2013 at 1:16 PM, McKenzie Photography <
email@hidden> wrote:
Hi,
Just like the bigerns website how can I get a browser window to fill with
a background image. Using Freeway Pro 5.6Cheers,
MMc
http://portfolio.thebigerns.com/
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
Hi Ernie,
expected this cool and extended answer and have an additional one:
Have you ever tried or do you know a method of adding class(es) to the body instead of direct tackling it. I could think of very handy ways to do such as:
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
or probably:
to be pedantic 
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can edit the body tag using the Page / Extended dialog. Any properties you add there will be part of the body tag.
Walter
On Jul 10, 2013, at 4:53 PM, Thomas Kimmich wrote:
or probably:
to be pedantic
Cheers
Thomas
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
Thanks for the reply!
Actually, I downloaded the trial version from softpress and the option to import is grayed out. Is there any other way to import the psd file?
Also, is it possible to use a psd layout without slicing in freeway pro and place the headers, content areas, links, navigation etc over top of the layout to create the code and then slice the psd according to that design and add links to the images outside of freeway pro to avoid any change/low-res to the images, even if using png-24 (millions)? I worry since my layout is super high color quality, and loaded with gradients etc.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 10 Jul 2013, 8:59 pm, waltd wrote:
You can edit the body tag using the Page / Extended dialog. Any properties you add there will be part of the body tag.
Walter
On Jul 10, 2013, at 4:53 PM, Thomas Kimmich wrote:
or probably:
to be pedantic
Cheers
Thomas
Me fool. I was convinced trying this several times and was under the impression that this would add it to the #PageDiv, so thanks Walter for clarifying.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Try placing the PSD file in a normal graphics box. (Draw a graphics box on the page, while it is selected and its handles are showing, choose File / Import from the main menu.) You can create your slices by duplicating this image and then cropping the duplicate in place. Once you have gotten your layout the way you like it, you will be able to duplicate those slices in Photoshop later. Freeway doesn’t ever change the original image, it works exactly like QuarkXPress or InDesign when making a layout.
Walter
On Jul 10, 2013, at 5:07 PM, MumtazG38 wrote:
Thanks for the reply!
Actually, I downloaded the trial version from softpress and the option to import is grayed out. Is there any other way to import the psd file?
Also, is it possible to use a psd layout without slicing in freeway pro and place the headers, content areas, links, navigation etc over top of the layout to create the code and then slice the psd according to that design and add links to the images outside of freeway pro to avoid any change/low-res to the images, even if using png-24 (millions)? I worry since my layout is super high color quality, and loaded with gradients etc.
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
how can I get a browser window to fill with a background image. Using Freeway Pro 5.6
Here is something I was working on for another FW user using Ernie’s background-size: cover and the Sequence Timer action
http://www.deltadesign.co/fullbgtest/
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Actually, I downloaded the trial version from softpress and the option to
import is grayed out. Is there any other way to import the psd file?
For background images you should NOT use psd files, use only web graphic
files (jpg, png etc). I use photoshop to prepare images and export them to
web graphic format using the ‘Save for Devices’ method.
About slicing images - sorry but I have no comment as I do not support that
way of design. However, best of luck to you.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Guys,
Thanks for the input, replies and info, just what I needed.
MMc
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi all, new to FW and building websites so a lot to learn.
DeltaDave, followed the instructions for building the background images but do not understand how to construct the opaque title header. Please can you advise.
Tks, SO
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
followed the instructions for building the background images but do not understand how to construct the opaque title header
That was just a little extra that wasn’t included in the instructions.
Simply it is a 100% width item which has its Background applied using the Graphic Effects section in the inspector set with an 0.6 opacity.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Simply it is a 100% width item which has its Background applied using the Graphic Effects section in the inspector set with an 0.6 opacity.
D, Assume you mean a Graphic item rather than HTML as it appears there is no opacity control for HTML colour? How does the item appear ‘constant’ as the images change below? Is the item repeated for each image or is there just one item? If I construct it as a graphic item it only appears over one image not the whole set, cant see where I am going wrong.
Thanks, S
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
No - it is an HTML Item
Settings as below
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hello Ern,
I just wanted to check these lines from what you had written egads the extended style.
"That last one can still use browser-specific fallbacks, so can be written
in FWP Extended styles as:
NAME: -webkit-background-size VALUE: cover;-moz-background-size:cover;-o-background-size: cover;background-size: cover
"
Does the line “cover;-o-background-size: cover;background-size: cover” ton in as the others in the extended part of the style for the body?
Just trying to understand the effect of the instructions on the browser window.
Thanks for your input and support.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 30 Jan 2015, 11:52 am, tonzodehoo wrote:
Hello Ern,
I just wanted to check these lines from what you had written regards the extended style.
"That last one can still use browser-specific fallbacks, so can be written in FWP Extended styles as:
NAME: -webkit-background-size VALUE: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover
( It was earlier last year when I wrote this, and since then it seems these vendor prefixes for this code are no longer needed. background-size: cover; is now standard for current browsers, so all you have to worry about is
NAME: background-size VALUE: cover
Yet, let me continue anyway explaining this technique of mine to force Freeway to write CSS properties in order, for the sake of future questions.
The order in which CSS code gets written is very important-- it’s part of what is called The Cascade Order. When CSS code is written out of the Cascade order, it can weaken or even change the intent of the code.
Since Freeway does not let us set the order in which our custom CSS is written, we have to find ways to do this on our own. This bit of code you’re pointing at is using what are called vendor prefixes to tell specific browsers how to interpret this code.
Vendor prefixes and browser “hacks” follow the same logic CSS code writers have been using since forever to control the flow of styles to the user. It’s like saying
“Here’s a style code, and if you don’t understand it, here’s another style code… and if you didn’t get that one, here’s yet another variation…”
essentially until all conditions are met the way the designer intends for them to be. I would write the CSS for this like
.mystyle {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
In this order, the style starts with webkit browsers, like Safari and Chrome… then moves on to mozilla browsers (e.g., Firefox), then Opera. The final fallback is to the official style designation… so that browsers that don’t recognize the official standard are taken care of first, and anything that does recognize the standard CSS is left unambiguously and unconflicted in its instruction.
Traditionally, each of these vendor-prefixed style declarations can be entered separately into Freeway’s Extended Style interface-- which is how we extend most styles. One property, one value… Freeway adds the colons, semicolons, and brackets for us. But the order in which Freeway writes each declaration is not something we can control this way. So the traditional way may well screw us over.
But we know that Freeway will put a colon after the property name… we know that Freeway will put a semicolon after the value we’ve entered (unless it’s the last value in the style definition, then Freeway lazily leaves it off, grumble, grumble) and finally, that Freeway will place brackets around the whole definition for that style.
So my technique here proposes that we add the extra properties and values in the Value field-- including the proper punctuation which Freeway will faithfully include like a good little robot-- and Freeway will write it down in the order we tell it to.
NAME:
-webkit-background-size
VALUE:
cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover
Bingo. As long as you’ve used proper CSS syntax, punctuation and spelling, Freeway is none the wiser and writes the final output code EXACTLY the way you want (except for that lazy last missing semicolon). The true beauty in this method is that you can now move on to more powerful orders of code magic without resorting to <head> code or extra external stylesheets.
Not only can you get away with multiple style declarations in one Freeway Extended Style declaration, but you can also include whole other style definitions-- provided you’re not code shy. Face it, if you’re concerned about Cascade order, you’re not code shy.
Here’s an example of what I mean… I make a new style ovalshadow and in the Extended Style window make a new attribute (only one, and only in the Extended window):
NAME:
text-align
VALUE:
center; }
.ovalshadow:hover { cursor: pointer; }
.ovalshadow:hover:after { bottom: 5px; }
.ovalshadow:after { z-index: -1; content: ''; width: 80%; height: 50%;
position: absolute; bottom: 10px; left: 0; right: 0; margin: auto;
background: none; border-radius: 50%; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
-webkit-transition: bottom 0.3s; -moz-transition: bottom 0.3s;
-o-transition: bottom 0.3s; transition: bottom 0.3s
There, I’ve not only defined my Freeway applicable style, but three others as well and Freeway will write them exactly in that order-- creating perfectly good code, placing a closing bracket at the end of the last definition thinking it’s still working with just the one.
Let’s be clear… this is an advanced technique, requiring some code skill and the unflinching will to jump Freeway through the flaming eyes of needles without a safety harness. It is an opportunity for World Class Disaster… but also for discovery, of a level of Freeway use that is unimaginable until you’re at that summit.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options