[Pro] Making a HTML item into a CSS Item

Freeway
1

I bought all the Softpress Marketplace templates to try to understand how you implement CSS with Freeway Pro (7).

Talk about totally confusing, incredibly difficult and totally buggy! :frowning:

If I create my website based on one of the templates (say Floral) and lose some of the contents in a CSS HTML Item (say a BodyWrapper), if I try to copy the contents from another CSS HTML item in the file or a copy of the Floral template file, the copied objects become plain HTML items when I paste them into the BodyWrapper (CSS HTML Item).

Likewise, if I add a HTML item into an existing CSS HTML item,
I cannot see how I turn my HTML Item back into a CSS item so they can be properly managed.

Hope this makes sense?

Martin

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

2

Hey, Martin – I’m having trouble interpreting some of the terms you are
using…

Strictly, CSS is a type of code for describing HTML items – how big they
are, what colors they are, borders, backgrounds, their position and how
they react to other items nearby. We also call it “Style Code” or just
Styles.

I guess what I’m saying is that Freeway uses CSS to describe the HTML
output of your page - especially in CSS Layout mode. So, can you help me
understand more clearly what you are trying to do?

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

3

The easiest way is to look at the templates Softpress provides.

  1. Create a new site from the ‘free’ Esperanto template.
  2. In the ‘Home’ page select the ‘BodyWrapper’ HTML Item.
    (You will see this HTML Item has a ‘CSS’ check box).
  3. Now find the ‘About’ HTML Item in ‘BodyWrapper’
  4. Select this and you will see the ‘About’ HTML also has a CSS check box.
  5. Copy the ‘About’
  6. Select the BodyWrapper HTML item and paste the ‘About’ into it.
  7. The pasted ‘About’ HTML item is renamed to ‘item1’, the item also no longer has a ‘CSS’ check box and is now a basic(?) HTML Item.

How do I get the new ‘item1’ have the same ‘CSS’ settings as about such that the ‘item1’ can be placed below ‘About’?

Hope this is clearer?

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

4

Thanks - it is a little clearer, maybe.

First, Freeway has two layout modes… CSS Layout and Table Layout. You can
switch back and forth and have bot CSS positioned HTML items and Table
positioned HTML items. The mode is controlled at the top of the workspace -

If the mode is set to CSS Layout, then new items will be positioned using
CSS. If set to Table Layout, new items will be positioned within an
invisible table.

PS… I NEVER use Table Layout mode.

Now the CSS checkbox you’ve noticed in the Inspector is telling you how
that item was added - checked if in CSS mode, and not checked if in Table
mode. Checking and unchecking that box switches how Freeway will position
it in the browser output.

My guess is that you are in Table Layout mode when you paste items. My test
shows that even in Table mode, HTML items that are pasted inflow INTO other
items still show up as CSS layout items. HTML items that are pasted ONTO
other items are blue-bordered Table layout items.

Hope this helps you some.

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

5

I’m not in Table Layout.

My steps are literally as described and have not changed anything. I am seeing the HTML items I paste lose the ‘CSS’ mode options in the Esperanto template.

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

6

I’m not in Table Layout.

My steps are literally as described and have not changed anything. I am
seeing the HTML items I paste lose the ‘CSS’ mode options in the Esperanto
template.

If you select an item that does not have the CSS box ticked, then select it
and manually tick it. Then it will become a CSS Layout item.

Does this only happen in the one template? Have you tried recreating the
issue manually? (I have, and can’t)

I don’t have that template, but I cannot imagine what would cause the
behavior you are seeing - and that’s not because I lack imagination (or
experience). If you truly think you are using it correctly and achieving an
incorrect result, then you should take it up with Softpress support (email
support at softpress dot com). I fear that I would need to be over your
shoulder to spot the issue

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

7

If you first select “BodyWrapper”, and then click at the point you want your “Item 1” box to appear in-line inside BodyWrapper", resulting in a cursor blinking inside BodyWrapper, and then paste, it should stay as a CSS Item and become part of the template’s in-line layout. It will become a “child” to the BodyWrapper box, and in the left column of items appear indented under BodyWrapper.

If you you just select “BodyWrapper” and paste, Item 1 will we pasted onto the page as a table item and exist as an element unconnected to the in-line template components including BodyWrapper, and will likely appear near the top of the list of items on the left, not indented.

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

8

Select this and you will see the ‘About’ HTML also has a CSS check box.

Copy the ‘About’

Select the BodyWrapper HTML item and paste the ‘About’ into it.

The pasted ‘About’ HTML item is renamed to ‘item1’, the item also no longer has a ‘CSS’ check box and is now a basic(?) HTML Item.

I also don’t have the Esperanto (or any other of the FW7 templates)

Are you essentially trying to duplicate the About HTML item below the existing About item?

If so then I would select my About item and copy it.

Next I would use the right arrow key to move the cursor after the original About item and paste in the duplicate. That should give you what you want.

But I may be misinterpreting your aim.

David

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

9

On 2 Dec 2014, 7:28 pm, Peter Laundy wrote:

If you first select “BodyWrapper”, and then click at the point you want your “Item 1” box to appear in-line inside BodyWrapper", resulting in a cursor blinking inside BodyWrapper, and then paste, it should stay as a CSS Item and become part of the template’s in-line layout. It will become a “child” to the BodyWrapper box, and in the left column of items appear indented under BodyWrapper.

If you you just select “BodyWrapper” and paste, Item 1 will we pasted onto the page as a table item and exist as an element unconnected to the in-line template components including BodyWrapper, and will likely appear near the top of the list of items on the left, not indented.

Thanks that’s sorted it. I would have thought if you select “BodyWrapper” and paste the ‘Item 1’ would be placed at the top AND become a child of BodyWrapper box. Instead of this unexpected behaviour.

One question remains. Can you force in HTML item which has become a table item, a child of the CSS item which it has been embedded into?

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

10

Don’t fully understand the question. But I think you can select a table item, then click the CSS button in the menu bar and it will convert it to CSS.

Also, you can make children of children of children by simply clicking into the “generation” of box you want to add something to.

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

11

I would have thought if you select “BodyWrapper” and paste the ‘Item 1’ would be placed at the top AND become a child of BodyWrapper box. Instead of this unexpected behaviour.

Unless you have a flashing Text Cursor the item you paste will become an absolute positioned item with no easy way to change that into a relatively positioned one.

If you select the Body Wrapper item in the Page sidebar and hit the Enter key then you will get your cursor inserted in the Body Wrapper for you. Pasting at that point will give you what you want.

D

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

12

Thanks all. There’s been a lot of useful tips here, the Enter key is particularly useful to ensure I am selecting the right place for my pasted items.

I cannot find any useful documentation on this responsive work. Perhaps I’ve missed it… A real shame, it has taken me so long to figure it out in Freeway.

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

13

On 2 Dec 2014, 8:29 pm, Martin Spenceley wrote:

On 2 Dec 2014, 7:28 pm, Peter Laundy wrote:

If you first select “BodyWrapper”, and then click at the point you want your “Item 1” box to appear in-line inside BodyWrapper", resulting in a cursor blinking inside BodyWrapper, and then paste, it should stay as a CSS Item and become part of the template’s in-line layout. It will become a “child” to the BodyWrapper box, and in the left column of items appear indented under BodyWrapper.

If you you just select “BodyWrapper” and paste, Item 1 will we pasted onto the page as a table item and exist as an element unconnected to the in-line template components including BodyWrapper, and will likely appear near the top of the list of items on the left, not indented.

Thanks that’s sorted it. I would have thought if you select “BodyWrapper” and paste the ‘Item 1’ would be placed at the top AND become a child of BodyWrapper box. Instead of this unexpected behaviour.

One question remains. Can you force in HTML item which has become a table item, a child of the CSS item which it has been embedded into?

Really Martin? Did this actually answer your original question? Because as I read it, it didn’t. You can do this to get an item inside of a BodyWrapper item, with the same CSS characteristics, but you can’t paste one into the PageWrapper, and you can’t drag one out of an existing BodyWrapper, so this actually isn’t an answer at all. It does eliminate the conversion to a html item, but it doesn’t solve the question. The main point here is, how does one create a NEW BodyWrapper item with the proper CSS attributes and add it so that it is inline on the page within the BodyWrapper. How do you do that in ANY of the Filemaker Templates? Or is there a limit of 4 BodyWrappers allowed on a page?

Martin asked the question perfectly. I have the exact same issue. There has been no answer presented here.

Martin, if you actually figured this out, or think you have an answer, please share.

Everybody else: No one on this thread understood the question and/or answered it. Sorry. None of the things on this page address the problem presented. Re-stating it in a different form (either the correct question, or the wrong answers) won’t make a difference. I would really like to have this answered. I have even asked Freeway tech support and not received a correct answer. It is like no one understands how the software actually behaves.

The answer to the original question is that either a BodyWrapper can be copied into the PageWrapper at the same level as the pre-existing BodyWrappers without changing its characteristics (and if this CAN be done, please explain in detail how, because none of the solutions presented above work) or that a new PageWrapper can be created from scratch by doing steps a,b, and c (and then please explain exactly what those steps are).

Before posting a solution, please try it yourself prior and verify that it actually works. Many of the answers above make assumptions that ignore the information provided in the original question.

Thank you for your interest and response to this question. Please excuse my tone. Once again I have lost hours trying to come up with answers about Freeway Pro and they simply don’t exist anywhere. This should not be so hard.

Proper documentation, tutorials and instruction would go a long way to improving this product and the service backing it up.

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

14

The terms you are using here (BodyWrapper?) are likely specific to the individual template, and they don’t have any specific meaning to Freeway or even HTML or CSS. That said, when you see the CSS checkbox in the Inspector after selecting an element on the page, that tells you two things: CSS Positioning is on in the document, and the element you have selected is an INLINE child of another HTML element. This is known as relative positioning, and it refers to elements which are peers, which reserve space for themselves relative to their peers, and which will nudge one another out of the way as they grow (or shrink) based on their contents.

Another possible point of confusion: Freeway will not allow you to create invalid HTML, so if you were to copy and paste an element named BodyWrapper into the same page as the original, you would end up with an element named something like item42 rather than BodyWrapper, because no two elements may have the same ID in the same page.

To create an inline (relatively positioned) element, try following these steps in a blank new document, with CSS Positioning on.

  1. Draw an HTML box on the page somewhere. Give it a background color, or type some text inside it, so it has some presence within your design space.
  2. Cut it to to the clipboard.
  3. Draw another HTML box on the page, large enough to contain the first.
  4. Double-click inside the second box, so you see a flashing text cursor, and paste. (You can paste multiple times if you like – you will end up with some peer elements relatively positioned from one another.)

You now will see that the (first drawn) HTML box is inline within the second box (acting as if it was a single character of text) and if you click on it so that its corner handles appear, you will see the CSS checkbox is ticked in the Inspector.

You can also follow these steps to an element that is a child within the PageDiv (what you see when you double-click the page itself). So step 3 above is not strictly required, only the critical step 4 – gaining a text cursor before pasting. After you have followed these steps in a blank page, try repeating them in your template layout.

It is all too easy to end up with a positioned child of another element when you are working in Freeway, and that is not the same thing from a construction standpoint. A positioned child will not reserve space for itself within its parent element, so you could not have a positioned child which had text wrapping around it, for example, or which had another peer element held away from it by its geometry. For responsive or reactive design, positioned child elements are a serious problem. They can be worked around with enough CSS and head-scratching, but if you construct your page using a true inline (relative positioning) model, you will get most of what you need for free.

Walter

On Dec 2, 2014, at 11:02 AM, Martin Spenceley email@hidden wrote:

I bought all the Softpress Marketplace templates to try to understand how you implement CSS with Freeway Pro (7).

Talk about totally confusing, incredibly difficult and totally buggy! :frowning:

If I create my website based on one of the templates (say Floral) and lose some of the contents in a CSS HTML Item (say a BodyWrapper), if I try to copy the contents from another CSS HTML item in the file or a copy of the Floral template file, the copied objects become plain HTML items when I paste them into the BodyWrapper (CSS HTML Item).

Likewise, if I add a HTML item into an existing CSS HTML item,
I cannot see how I turn my HTML Item back into a CSS item so they can be properly managed.

Hope this makes sense?

Martin

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

15

Thank you Walter, but unfortunately this does not answer the question nor even address the issue being presented.

To begin with, the term may be specific to Freeway templates, but it is used in apparently all of them. They could be called anything I suspect. The name used, which makes sense given the item’s function in the page, is provided so that others with more knowledge than ourselves can look at the templates (any will do) and replicate the issue we are having. Then they may be able to provide some answers to the question(s) we are posing.

There are elements of the Freeway templates, which have a certain ‘personality’ within the inspector, i.e. a certain set of characteristics and controls, which change depending upon… what? And no, this is not a simple CSS vs non CSS issue. It would appear that there are (if the inspector is to be believed) different classes or types of CSS items, and what controls the inspector provides varies between them. Some of these types of items are supplied in FreeWay Pro Templates, and they apparently can’t be created or copied. Why?

None of the response comments in this thread address what we are seeing in Freeway Pro, and that is that the controls in the inspector for many of the elements in Freeway Pro Templates, are not available for self-created CSS items, and if one attempts to duplicate the supplied CSS items which do have the characteristics, then the controls change, (some of them disappear), and we are left with just another CSS item that we could have created ourselves.

We want to know what the differences are between these different CSS items, when to use them, how to create them, and why they can’t be copied, or if they can be, how to do so.

Is that really too much to ask, SoftPress?

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

16

I suspect that those among us who can answer these questions have never seen one of these Templates in the FW Flesh.

And because of that I have to hold my tongue and not say - Of course you can - when you suggest that these items cannot be copied/duplicated.

To suggest that there is a Black Art at work protecting them from replication seems absurd.

D

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

17

A very long time ago, when I was a boy, my dad put up a poster of different airplanes on my bedroom door. There was writing on that poster too, but I could not yet read. I remember looking at that poster and realizing that I could see all of it but only understand parts of it. That felt somehow wrong to me. I could not imagine what this mysterious hole in my perception meant.

Some time passed and I learned to read quite well. I remember a day when I stopped and looked at that old poster, still hanging on my door, and realized that I now understood it’s entirety. Looking at what once had been filled with unimaginable mystery, now I could not imagine seeing it without comprehension. Realizing the difference between those two moments was a profound experience for me.

When you buy a template and you see how someone else puts a Freeway project together-- especially if the author has advanced skills-- you may notice things which do not make sense to you because you do not yet understand them or have experience with them. These are not problems with the template or the author, but are actually holes in your understanding.

At least that’s what I think. Honestly, you’re making no sense otherwise.

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