[Pro] Page border

To create a border on a page do I have to put an html box on the page or master. I was thinking I could add a border to the page itself with a tag… but I can’t seem to target the page?

I was doing some updates to my old site and I haven’t worked with FW in awhile.

Thanks!


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

Helloo… anyone? I asked a simple question? Do I have to draw an html box on the page background to add a border to it? Can this be done with css by extended items or whatever… I’ve added a border with a body tage but it adds it to the background not the page? Er, this would be easy, but for some crazy reason I was trying to do this in Freeway to restest V6. I must be crazy…


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

Libby - what would help me understand your question, is if you had an
example that you could point to of what you want.

It is a recurring problem among Freeway Users that we all have difficulty
agreeing on terminology made fuzzy by the app itself. Freeway Pro does not
give us a “page” – it gives us a “workspace” which in the app looks like a
page, with defined edges and all. Only, that’s not what we see in the
browser is it?


Ernie Simpson

On Tue, Mar 5, 2013 at 12:11 AM, dhrose email@hidden wrote:

Helloo… anyone? I asked a simple question? Do I have to draw an html box
on the page background to add a border to it? Can this be done with css by
extended items or whatever… I’ve added a border with a body tage but it
adds it to the background not the page? Er, this would be easy, but for
some crazy reason I was trying to do this in Freeway to restest V6. I must
be crazy…


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… Dan Rose here. My question was if I want a border on the main content area div. What looks like the “page” in Freeway. I was experimenting with adding styles to extended markup and noticed that the border tag applies to the background (body) but not the content area. Is there a way to target the main content area? I can add an html box to the master page, but then I can’t put a shadow on it… Only a graphic box. Pretty basic shadow on container thing…

I was trying to see if I should upgrade to V6 so I started looking at Freeway again to see what’s up.

That’s it.


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

You can try adding this style to the head of your page and see what you see. You may not find it useful, though, depending on how your page is constructed.

<style type="text/css">
	#PageDiv { border: 12px solid red }
</style>

That’s just to show you where the border really is, I don’t expect your page to go out in public like that :sunglasses:

The thing is, for a normal absolute-positioned Freeway page layout, it is completely possible for the “page” to have no height at all, and for all of the positioned elements within it to be hanging out below the actual page element (the PageDiv – which is the outermost parent of all elements on a Freeway-generated page).

There is also a body tag outside of that, and you can style it if you like, but the body is usually the same size as the browser window, so you won’t see any border.

Walter

On Mar 5, 2013, at 8:19 AM, dhrose wrote:

Hi Ernie… Dan Rose here. My question was if I want a border on the main content area div. What looks like the “page” in Freeway. I was experimenting with adding styles to extended markup and noticed that the border tag applies to the background (body) but not the content area. Is there a way to target the main content area? I can add an html box to the master page, but then I can’t put a shadow on it… Only a graphic box. Pretty basic shadow on container thing…

I was trying to see if I should upgrade to V6 so I started looking at Freeway again to see what’s up.

That’s it.


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

Hey Dan, sorry that I confused you with Libby –

It sounds like something that is achieved with a certain layout to me, but
it helps to be sure before I go off and explain how to do something.

I’m assuming you want a layout more like this:
http://cssway.thebigerns.com/products/silverscreen/

The kind of layout you make depends on several factors, actually… if I
wanted a faux “page” in FWP5 I would

1, Make sure my page was “centered”

  1. Make sure my page was set to HTML Layers

  2. Draw an html item box on top the workspace to define this “page” area.
    This is the thing to give your border to.

  3. Put all your “page” contents inside that box

Pro 6 has very different (and much better) control over items - and for
inline layouts it has many benefits. So the above steps change a bit to
take advantage of that.

I think upgrading to 6 is a good thing - it’s better to get started
learning new stuff now. If you do, don’t go too deep too fast - search the
forum for plenty of practical advice (run both versions, 5 and 6, so you
can work and practice at the same time).


Ernie Simpson

On Tue, Mar 5, 2013 at 8:19 AM, dhrose email@hidden wrote:

Hi Ernie… Dan Rose here. My question was if I want a border on the main
content area div. What looks like the “page” in Freeway. I was
experimenting with adding styles to extended markup and noticed that the
border tag applies to the background (body) but not the content area. Is
there a way to target the main content area? I can add an html box to the
master page, but then I can’t put a shadow on it… Only a graphic box.
Pretty basic shadow on container thing…

I was trying to see if I should upgrade to V6 so I started looking at
Freeway again to see what’s up.

That’s it.


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

Hmmm… a body tag (with border) in extended markup puts a border around the “window” not the content? Also does the extended dialog accept standard css selector tags? I noticed that I had to input rgb values to set specific colors? Won’t take hex…

Ernie: Yea, that’s about what I was looking for except I was going to float the content area in the window and add a shadow. Which I can do with a graphic box (png) but it seems kind of clunky to be able to drag the background off the screen to the desktop? Ha!

I’m trying to see what I can add with extended and insert markup and where it ends up.

Thanks!


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

Hmmm… again. Seems like they should add a default container #id just to style the main container at the outset… then you could go all freeway and throw stuff in there however. But the main content area would have some constants… border, shadow etc. Has anyone tried adding a shadow with moz border and radius in Freeway?

Cheers!


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

James Wages has done extensive work (and had some really frustrating results) doing just this.

Just to emphasize the solution here: a normal “draw things where you want them” Freeway layout will make this incredibly difficult for you, because absolute positioned elements do not reserve space for themselves within their parent elements. Your PageDiv could be 1px tall or 1000px tall, it would not make any difference to the way your site looked in a browser.

But if you are trying to create the look of a page-within-a-page, and you are styling the PageDiv to give it that look, you will want the PageDiv to be (and remain) the height of its contents, even when font size changes force the page to become taller than you intended it to be.

The only solution to this is an inline layout (or the RPL Action, which automates the process of converting an absolute layout into an inline layout). An inline layout uses the dimensions of elements above a given element to position that element, so any growth (the visitor resizes text in her browser) pushes all other elements down to compensate, rather than overlapping and making layout salad.

Walter

On Mar 5, 2013, at 9:22 AM, dhrose wrote:

Hmmm… again. Seems like they should add a default container #id just to style the main container at the outset… then you could go all freeway and throw stuff in there however. But the main content area would have some constants… border, shadow etc. Has anyone tried adding a shadow with moz border and radius in Freeway?

Cheers!


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

I’ll try and adding some divs etc. with insert markup and see what happens… Is there any defined set of commands that the extended box understands? Is the syntax the same as standard css selectors?

And I remember an external stylesheets action. Is that still around and does it work with V6. I never upgraded my v5 to 5.5 so they’re telling me I have to spend $129. now. Trying to figure out whether it’s worth it as I have Dreamweaver and a couple of Squarespace sites already. Er, and a Wordpress site too… I need to get rid of something! Ha!

Thanks…


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

On another note… I forgot how insanely hard it was to move a grouped object! What the? Maybe I’m forgetting something, but don’t rollovers have to be grouped… and if so how the heck would one move these things around on the page. Seems like I used to select them in the inspector but that’s not doing anything. Freeway, how I doth protest.


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

Try hovering your mouse over one or another of the edges of the group. Watch the cursor carefully. When it changes to a hollow (white) pointer with a tail, click down and drag. You have a 1 x N (or N x 1) pixel click target, so it’s very fiddly. I hate this too…

Walter

On Mar 5, 2013, at 11:05 AM, dhrose wrote:

I forgot how insanely hard it was to move a grouped object! What the?


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

Okay, here is a downloadable v5.6.5 file with the “page” look built both
with layered and with inline layouts.

Not tested with RPL, but knock yourself out.

http://cssway.thebigerns.com/workbench/du_jour/faux-page-v5/index.html


Ernie Simpson

On Tue, Mar 5, 2013 at 9:17 AM, dhrose email@hidden wrote:

Hmmm… a body tag (with border) in extended markup puts a border around
the “window” not the content? Also does the extended dialog accept standard
css selector tags? I noticed that I had to input rgb values to set specific
colors? Won’t take hex…

Ernie: Yea, that’s about what I was looking for except I was going to
float the content area in the window and add a shadow. Which I can do with
a graphic box (png) but it seems kind of clunky to be able to drag the
background off the screen to the desktop? Ha!

I’m trying to see what I can add with extended and insert markup and where
it ends up.

Thanks!


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 Ernie, I’ll check it out and see what’s what!


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

Hmmm… I just realized I have v5. I guess I can’t go to 5.5 at this point… So What’s going to happen to this file if I open it in v6? Is 6 worth upgrading to, or should I just stay on 5 since I can’t go to 5.5 now…


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

Well, I don’t know what to say. I converted it to 6 and ironed it out nice
and neat
http://cssway.thebigerns.com/workbench/du_jour/faux-page-v6/index.html


Ernie Simpson

On Tue, Mar 5, 2013 at 2:45 PM, dhrose email@hidden wrote:

Hmmm… I just realized I have v5. I guess I can’t go to 5.5 at this
point… So What’s going to happen to this file if I open it in v6? Is 6
worth upgrading to, or should I just stay on 5 since I can’t go to 5.5
now…


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

Well I did open it in the demo version of v6 but I was just checking to see since you mentioned above it was 5.6.5. No problem… there is some interesting stuff going on in there, I’m checking it out. I noticed you spec’d a color in hex, which when I did it, didn’t work? I had to use rgb(255,290,90)

Hmmm…

Thanks!


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

Once you see how I built it, I imagine that you can work out how to do it
in your version. If you are planning to upgrade to 6, I’d contact the
Softpress people and see if you can get the 5.6.5 version as well – as
running both 5.6.5 and the latest 6 build side-by-side seem to be the
strategy most Pro 6 upgrades are adopting.

Though v6 has added RGB sliders to the color tools, it still Freeway Pro
usually writes color in hex. If I am specifying a color via an Extended
option, I write it the way I need to. I think it would be wonderful for FWP
to be as flexible with its own color interface.


Ernie Simpson

On Tue, Mar 5, 2013 at 3:33 PM, dhrose email@hidden wrote:

Well I did open it in the demo version of v6 but I was just checking to
see since you mentioned above it was 5.6.5. No problem… there is some
interesting stuff going on in there, I’m checking it out. I noticed you
spec’d a color in hex, which when I did it, didn’t work? I had to use
rgb(255,290,90)

Hmmm…

Thanks!


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

In my own terminology, I would classify a solid and opaque “border” separately from a “shadow” gradient. But perhaps you really don’t know what you want, in such a case I can comment about “page shadow.” You can view how I’ve implemented page shadow on my Japanese site here:

If you view the HTML source of my page, you will see that most of the page contents are child items of the layered HTML box (DIV) “outerShadow”. That HTML box is the same dimensions as the page itself. The only two items that lie outside outerShadow are: (1) a 950 x 60px layered HTML box spacer, sitting in the pasteboard above the page, that gets positioned between the very bottom of the page and the bottom of the browser window via Paul Dunning’s MakeMeAFooter Action, and (2) the splash screen that you initially see the first time the page opens. You can download Paul’s Action here:

http://www.actionsworld.com/Actions/MakeFooter/index.php

Here’s the Page Shadow code I added via Page HTML Markup, Before :

<style type="text/css">
<!--
#outerShadow {
	-moz-box-shadow: 0 29px 24px 2px #000;
	-webkit-box-shadow: 0 29px 24px 2px #000;
	box-shadow: 0 29px 24px 2px #000;
	behavior: url("/PIE.htc");
}
-->
</style>

I downloaded the PIE.htc file and put it in the root level of my webserver to act as fallback for IE6/7/8. You can learn more about that here:

http://css3pie.com/documentation/getting-started/

What makes my shadow implementation unique is that I have it vertically offset. I did that on purpose because (1) it looks better to my eyes than a non-offset shadow on all 4 corners, and (2) because I’ve not seen anyone else do it (I dare to be different).

Offsetting the shadow vertically though makes it overshoot the footer in a way that I don’t like. I want the shadow width (from the edge of the page to the end of the shadow) to be the same for the left side, right side and bottom sides of the page. To fix the page bottom, I put the following code in Page HTML Markup, Before :

<script>
var outer=document.getElementById("outerShadow");
var inner=document.getElementById("PageDiv");
if (PageDiv && outerShadow){
	outerShadow.style.height = (parseInt(outerShadow.offsetHeight) -28) + "px";
}
</script>

The other Page Shadow caveat comes when you want to design pages using the RPL Action. I’ve extensively discussed that, with a solution here:

http://freewaytalk.net/thread/view/126417#latest

The only unaddressed issue is when you want to put my page shadow on an RPL page that is in turn hosted on a server other than yours AND you also want fallback for IE6/7/8. If you ditch the fallback, there are no issues. But if you want fallback, there is not a solution YET. That’s because you cannot use the PIE.htc implementation because you normally don’t have rights to upload that file to servers owned by other people (e.g., Atomz Search). So to solve that would require use of PIE.js, but I’ve never been able to figure that one out.

Hope this helps,

James Wages


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

Thanks James. I created my portfolio site in FW years ago, but moved on to Dreamweaver etc. I was thinking about updating it, and realized I hadn’t upgraded in awhile so the v6 was now the version and I was going to have to do that upgrade… so I thought I would revisit FW and see what’s changed and if I could remember some of the FW quirks etc. I have to say I never went too far outside of the “put it where you want it” back then, but I thought I’d look into the extended capabilities with a little more knowledge of the big picture now…

I have my original site with Have Host and I like the idea of having my own webserver space, as opposed to doing Squarespace etc. which I also have an account. So I’m looking to consolidate somewhat and get down to one site.

So how does this differ from putting a fx shadow on an html box in FW internally? Creating an id tag… I mean?


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