[Pro] read more action item

Freeway
1

I’m trying to get a response so sorry if I’ve posted this question before, but how can I format freeway action item read more ? I’d like to add text color, alignment and a pointer to it. Please help me !
thanks so much

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

2

If you can post a link to the page, one of us can probably give you some CSS to paste into your page head or construct in your Styles palette that will do whatever you like. The link is (if I recall correctly) marked up with an unique classname, so it should be simple to make a link style that works for you.

Walter

On Feb 12, 2014, at 9:43 AM, AW wrote:

I’m trying to get a response so sorry if I’ve posted this question before, but how can I format freeway action item read more ? I’d like to add text color, alignment and a pointer to it. Please help me !
thanks so much

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

3

my images are missing–I don’t think I uploaded the whole page but you can see the read more action item.
Thanks for your help

http://www.annieweatherwax.com/temporar/theoryteaching.html

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

4

Could you please try again to use the Action? Do it on a plain blank page, with nothing else on it except one HTML box containing a large run of text, interrupted by the ReadMore Action inline at the point where you want the paragraph to break?

This page has so many issues in its construction that I’m not sure how to help untwist it.

Walter

On Feb 12, 2014, at 10:27 AM, AW wrote:

my images are missing–I don’t think I uploaded the whole page but you can see the read more action item.
Thanks for your help

http://www.annieweatherwax.com/temporar/theoryteaching.html

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

5

Just to double-check, here’s the instructions for using this Action:

  1. Make a single large HTML box that holds all of the content for a single story – both the initially-visible teaser, and the remainder (the “more”).
  2. At the end of a paragraph in the content, while you have a flashing text cursor, choose Insert / Action Item / Read More from the main menu.
  3. In the Actions palette, make the settings you need. Change the more… link text as you like, choose whether the popup should show both the overflow text and the initial teaser text, or not, and set the width for the overlay window that will show the additional text.

The Action works by splitting the content in the container it finds itself in into two parts, and hiding the second part. In your layout, it seems as though you have a lot of content in the same box, running inline. If you need to use this Action in that context, you’re going to need to insert an inline HTML element for each story, and split the text within each inline HTML box with an instance of the Action. One shortcut when you get to doing this – once you have made the settings you like in the Actions palette for the first story, you can copy the inline Action item from your layout, then double-click (to get a text cursor) and paste in each subsequent story. But remember, each story must be within a single HTML element for this Action to work.

Once you have the content working correctly, you can move on to the styling question. To make your more… link have a particular style, you need to create a style with the Tag set to .more and nothing in the Name field. You can change the color, alignment, underline, etc. of the fake link using the normal Freeway style tools. To give the fake link “the finger”, you can also use the Extended attributes in the Edit Style dialog to add cursor: pointer to your .more style.

The .more element is not actually a link (it’s a P), so you can’t use the Link Style segment of the Inspector to make this style. If you want the fake link to have a hover attribute, you can create a second style named .more:hover with the specific style changes that you want the link to undertake (color, boldness, whatever).

Walter

On Feb 12, 2014, at 10:55 AM, Walter Lee Davis wrote:

Could you please try again to use the Action? Do it on a plain blank page, with nothing else on it except one HTML box containing a large run of text, interrupted by the ReadMore Action inline at the point where you want the paragraph to break?

This page has so many issues in its construction that I’m not sure how to help untwist it.

Walter

On Feb 12, 2014, at 10:27 AM, AW wrote:

my images are missing–I don’t think I uploaded the whole page but you can see the read more action item.
Thanks for your help

http://www.annieweatherwax.com/temporar/theoryteaching.html

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

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

6

http://www.annieweatherwax.com/temporar/untitled1.html

here it is:
Also this I found this
http://actionsforge.com/actions/view/252-readmore

but it does not explain how to do it.

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

7

can you send me a screen shot or instructions on how to create a style with the Tag set to more?

I have broken up the stories into separate html boxes and that’s all working fine. I just can’t figure out the style piece of it.

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

8

Okay, so you know the Action works in a single-story context. Now, to make the layout you’re trying to make, with one story stacked above another, you need to do this:

+--------------------------+
|  outer box, flex height  |
| +----------------------+ |
| |  inner box, flex     | |
| |  height, first story | |
| |  lorem ipsum dolor   | |
| |  sit amet. [more...] | |
| |                      | |
| |  Lorem ipsum more .. | |
| |  content here...     | |
| +----------------------+ |
| +----------------------+ |
| |  inner box, flex     | |
| |  height, 2nd story   | |
| |  lorem ipsum dolor   | |
| |  sit amet. [more...] | |
| |                      | |
| |  Lorem ipsum more .. | |
| |  content here...     | |
| +----------------------+ |
| +----------------------+ |
| |  inner box, flex     | |
| |  height, 3rd story   | |
| |  lorem ipsum dolor   | |
| |  sit amet. [more...] | |
| |                      | |
| |  Lorem ipsum more .. | |
| |  content here...     | |
| +----------------------+ |
+--------------------------+

Each story needs to be inside its own box, with only one instance of the Read More Action in that box. The Read More Action must be positioned as the last “character” of the paragraph that you want to become the teaser. Wrap the whole collection of stories inside an outer HTML box, which will provide the collapsing structure you need for your page. Make all of these boxes flexible height, so they will look correct when the “more” content is hidden.

Walter

On Feb 12, 2014, at 11:10 AM, AW wrote:

http://www.annieweatherwax.com/temporar/untitled1.html

here it is:
Also this I found this
ReadMore - ActionsForge

but it does not explain how to do 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

9

For a start, try pasting this into your Page / HTML Markup / Before dialog:

<style type="text/css">
	.more {
		cursor: pointer;
		color: blue;
		text-decoration: underline;
		text-align: right;
	}
	.more:hover {
		color: purple;
	}
</style>

To do this in the Styles palette, follow these directions:

http://actionsforge.com/articles/view/9-tag-only-styles

Walter

On Feb 12, 2014, at 11:15 AM, AW wrote:

can you send me a screen shot or instructions on how to create a style with the Tag set to more?

I have broken up the stories into separate html boxes and that’s all working fine. I just can’t figure out the style piece of 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

10

flex height makes it impossible to change the height of my html item and hide the overflow. The html box expands to fit the text–did you mean fixed height and flex width.

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

11

When I draw the outer box and change it to fex height it collapses into a line because it does not see the other story lines as content. Am I doing something really wrong here?

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

12

You need to cut the other stories one at a time to the clipboard, then double-click inside the outer box and paste them inline, one after the other. Just layering them one over the top of another will not have the same effect.

Walter

On Feb 12, 2014, at 12:03 PM, AW wrote:

When I draw the outer box and change it to fex height it collapses into a line because it does not see the other story lines as content. Am I doing something really wrong here?

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

13

GOT it ! Thank you…for future reference is when you double click inside an html box and paste something in is this called an line item? Thank you for your patience. Now I just need to figure out how to format my read more item. Please look at this screen shot and tell me if I’m in the right place.
Screen Shot 2014-02-12 at 12.09.23 PM

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

14

Inline or in-flow. Yes.

Walter

On Feb 12, 2014, at 12:18 PM, AW wrote:

GOT it ! Thank you…for future reference is when you double click inside an html box and paste something in is this called an line item? Thank you for your patience. Now I just need to figure out how to format my read more item. Please look at this screen shot and tell me if I’m in the right place.
Screen Shot 2014-02-12 at 12.09.23 PM

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

Okay so now that I have my html boxes stacked ontop of one another inside another html box how do I create space between the boxes. Simply adding space with my curser doesn’t work and adding another html box also doesn’t work. Also I still don’t know how to add style to my read more. Can you give me more explicit instructions on either where to find the code or how to use the style pallet?

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

16

Click on one of the inline boxes, so its corner handles appear, and in the Inspector, look in the first tab, in the Dimensions segment, and pull down the Margin picker to Custom. Add some margin to the bottom field and okay out of the dialog. You should see the next box push away from the one you edited. Continue with the others.

As to the fake link style, did you try the CSS I posted a few messages ago?

Walter

On Feb 12, 2014, at 12:51 PM, AW wrote:

Okay so now that I have my html boxes stacked ontop of one another inside another html box how do I create space between the boxes. Simply adding space with my curser doesn’t work and adding another html box also doesn’t work. Also I still don’t know how to add style to my read more. Can you give me more explicit instructions on either where to find the code or how to use the style pallet?

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

17

sorry to be so new to this…but where to I paste the css ?

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

18

As Walter said:

…try pasting this into your Page / HTML Markup / Before dialog…

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

19

Thanks that worked ! If I wanted to change the colors how would I do that? Just write them in?

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

20

Yep, just change blue and purple to the hex code of the colors you want to use (e.g.: #7D9EB2).

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