I’d like to learn how to do links like they have on this page in my freeway documents.
I think I might need to do some fancy CSS tricks in the extended attributes area. Has anyone tried something similar that could give me a kick start?
Thanks!
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’d like to learn how to do links like they have on this page in my freeway documents.
This is fairly easy, depending on how well you understand Links and how they work. There are many ways to style links in Freeway… the easiest being the Links section of the Page Appearance Inspector.
With nothing selected (which would mean the Page is selected) click the Paintstick icon of the Inspector and check out the Links Pane. You will see the four link states, a button to set the underline state of the text-decoration property. The More button will bring up the Links Style Editor, which is what you will want… but first click the underline button of the Normal link state to disable the text-decoration:underline property.
After you open the Link Styles Editor window, Freeway confusingly switches the order of the styles and renames the Normal style to link, which is the correct html term. Let’s focus on this style for a moment.
To get an effect like the example page, set the Color of the link by choosing a color from the Character Attributes toggle. Next we want to set an underline which isn’t an underline, but a bottom border-- something we can only do with an extended style. Open the Extended Link Styles window and create a new property border-bottom.
The value requires specific syntax to describe the property… I write it in shorthand like this:
2px solid #ffa36e
This means the border is 2px wide, solid style, and the last is the color in hex format. You can get the hex format of any Freeway color from the Edit Colors window in Freeway.
That takes care of the Normal Link style. The next to set is the Hover link style. ( You can often ignore the other two link styles if you’re not a perfectionist. )
You do not have to set the Color of the hover style unless you want the text to change from the Normal style when the cursor hovers over it. Since it doesn’t in the example, just don’t bother setting it as it’s inherited.
But do set the Background Color in the Character Attributes toggle and choose or create a color for that. We also want to remove the bottom border to match the example, and for that I have a special trick.
Like the Normal (link) style, we open the Extended Link Style window to do this. We could simply set the the border-bottom property with a value of none to do the job, and it would cancel out the bottom border when the link is hovered. But, I’ve found changing border properties can sometimes create shifts in text, so here is another way to describe the border-bottom property for this style…
2px solid transparent
This draws the same border as before-- physically taking up the same space, but the color is transparent. It’s valid CSS and doesn’t seem to cause any problems with any of the normal browsers.
Now, I know your going to ask about the Menu links, and I am going to beg off of that because I just don’t mess with the Menu action. The principles, however, are still the same… so I am confident you can eventually puzzle that out.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ernie,
Thank you for your detailed explanation! You address many of the issues I’ve had in the past with shifting text and strange behavior regarding how FW handles link underlines.
I look forward to carefully working through your instructions in FW!
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Your directions were awesome! I’ve learned a couple of things and I have a question.
It does seem when you make changes to link styles via the inspector pallet those changes take over other elements on the page. As you mentioned, I had to manually select my CSS Menu and apply the “reverse” of what I just applied to the page links
This formatting is taking over all links, including graphic picture links. I just wanted fancy text links. I don’t want my graphics changed at all. Is there a way to tell FW to apply these link styles only to text?
For example, I have a graphic on my banner header which includes a link back to the homepage. After I applied the changes we’ve discussed, that graphic had a bottom border and a hover color. I was able to reverse this this same way I did w/ the CSS Menu, but I don’t want to do this manually for all of the photo links in my document.
Thanks a bunch, Ernie! I love the new options this offers for link styling!
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This formatting is taking over all links, including graphic picture links.
To only apply this to a specific html item then set the link styles only on that item by selecting the parent item and then make the changes in the Link styling section.
Ernie’s instructions were to set a Page link style - which you have found affects all links on the page but it can be done on an item by item basis.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Most of my designs are all done inline these days (box model). So, I should be able to apply this to a container wrapper. I think I’m going to wait for my next project, however, and start this from the beginning.
I’ve noticed another thing on some sites lately that I think might also be CSS. When I highlight the text on the page it is a specific color. For example, highlight some of the text on this page and note the greenish color overlay that results (rather than the typical blue).
How’d they do that? And can I replicate it in FW??? 
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
They are using a CSS selector called ‘selection’. I’d seen this before, but never investigated it, so thanks for bringing it up!
To do this, make a new style using the Styles palette. In the Tag field, enter this:
::selection
Make sure the Name field is empty (remember to press the Tab key after you empty it, so Freeway takes note of the fact that you want it to be empty). Then set the background-color property to whatever you want the highlight color to be.
This will now affect all text selections on the entire page. If you want to make this a different color in certain parts of the page, then you need to choose a parent object, note what its ID is, and add that to the selector you placed in the Tag field:
#item42 ::selection
Now only the text inside of the page element with the Name/ID set to item42 will gain the color setting you chose in your newly-restricted style rule.
Walter
On Mar 15, 2015, at 2:34 PM, Doty email@hidden wrote:
Most of my designs are all done inline these days (box model). So, I should be able to apply this to a container wrapper. I think I’m going to wait for my next project, however, and start this from the beginning.
I’ve noticed another thing on some sites lately that I think might also be CSS. When I highlight the text on the page it is a specific color. For example, highlight some of the text on this page and note the greenish color overlay that results (rather than the typical blue).
How’d they do that? And can I replicate it in FW???
Doty
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
Cool Walt! Thanks for looking into it. I can’t wait to experiment!
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ernie uses it quite often in his examples
http://cssway.thebigerns.com/workbench/css-even-column-cookoff/
That example uses
::selection {
color: #000;
background-color: #ffc50d;
text-shadow: none;
}
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I wonder if i could find a wordpress plugin to do this
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can use the Text Selection Color Action (http://actionsforge.com/actions/view/300-text-selection-color) to change the colour of selected text on the page. The styles are changed on a page by page basis. I could easily add a version that does this for sections of a page although I’m not sure users would thank you for changing the selection colour for every element.
Regards,
Tim.
On 15 Mar 2015, at 18:34, Doty wrote:
I’ve noticed another thing on some sites lately that I think might also be CSS. When I highlight the text on the page it is a specific color. For example, highlight some of the text on this page and note the greenish color overlay that results (rather than the typical blue).
How’d they do that? And can I replicate it in FW???
FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Ernie,
Tried to give the underline a different color then the font color as you explain in the topic above, somehow my border stays grey but the Hexcolor in my extended code is green (2px solid #B9D249)
Any idea why it isn’t working as aspect?
http://bodenza-gietvloeren.nl/over-bodenza-gietvloeren.html
thx
Erik
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Tried to give the underline a different color then the font color as you explain
Where on that page are you trying to use this?
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Dave,
Somehow its working as aspected now, Maybe I forget to refresh my browser. Anyway thx for your reaction!
Erik
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Now I see another thing,
http://bodenza-gietvloeren.nl/zekerheid.html
When visit this page in Safari the underline of the links are grey (they meant to be green) when visit in Firefox they are green?
Is this fixable?
Thx
Erik
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Erik,
They’re green on my version of Safari (5.1 – old cuz I’m still on Snow Leopard). And, FYI, they’re green on Chrome.
HTH,
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at: