[Pro] Setting link state opacity higher for hover than link

Freeway
1

Using the style palette, I created a class hover style with an opacity less than the default 1.0. In the tag field I entered the style:

a.button-name:hover

…and using extended assigned it an opacity less than one. I then applied the class “button-name” to the hyperlink using the hyperlink dialog box. It works fine: opacity changes from full to the specified opacity on hover.

However, I want the button to get stronger rather than weaker when hover happens to indicate it has been selected.

So, using the same class, I created an accompanying link style:

a.button-name:link

…giving it a lower opacity than the hover opacity.
The result is that the specified link opacity works but the hover opacity doesn’t. It seems that a hover specification can override a default link state opacity but not a specified link state opacity.

Any suggestions on how to fix this or another way to attack it?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Just use a.button-name {styling} for the normal state

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Using a.button-name in “tag” and “opacity” and “0.7” in extended worked. Which I think is what you suggested.

So depending on the default to set the styling to the link state allows one to then specify an adjusted styling setting for the “hover” state .

But specifying the state as “link”, which also works to set the preferred styling to the link state, prevents you from altering the styling when specifying “hover”?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Hi Peter,

Freeway has it’s own way of sorting the styles we make, which can prove troublesome for things like link styles which require a specific order of appearance in the style list.

When you make link styles using the links pane of the inspector, Freeway of course will write those styles in proper order. I’ve long wished that Freeway users could have more control over how the stylesheet is written.

There is a somewhat complicated hack to get Freeway to write custom styles in a specific order, but there is also a less complicated approach, depending on what you hope to achieve. If you are only concerned about the normal and hover states-- :link and :hover-- then leave off the :link pseudo and just name your styles

a.button-name
a.button-name:hover

Freeway will write them in the proper order so they each work as advertised. It’s not the “official” way to write CSS links, but it’s reliable. Think of it as shorthand. The more complicated approach requires an involved discussion of how to exploit the property/value pairs of custom styles and make Freeway write more than one style within the user-controllable confines of the custom value dialog. See what I mean?… the other method is much easier.

On the matter of how you are styling your link, I think that the opacity property is somewhat troublesome… I think it’s better to use tints of color to create emphasis between states. If opacity is truly required, then I recommend rgba color:

color: rgba(0, 0, 0, 0.7)
background-color: rgba(66, 66, 66, 0.4)

You can over-ride Freeway’s color and background color in the Extended style dialog of the Style Editor.

I think that color shades would be better performance than opacity-- that’s my opinion though.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

I see. With “link” added it would alphabetically be listed after the “hover”, and to be in proper sequence, must come before.

Thanks for the additional advice r/e opacity. FYI, the opacity styling I was using I picked up from your workbench, as a post of mine had prompted you to very kindly make this:

http://cssway.thebigerns.com/workbench/css-display-tables/

In it you had added a hover effect to the add-to-cart buttons using opacity

I never did fully grasp the need to use css display tables, as the straightforward box model was giving me the formatting tools I needed, this was my first foray into extensive use of the anonymous action combined with CSS Styles that produce a WYSI Not WYG Freeway file that you taught me.

In case you are interested in how this page has come out, here it is:

http://www.brockmanfamilyfarming.com/teresas-plant-starts

It was quite a labor of love, as it has a quite geographically limited audience and is used only for a few spring months each year, and of learning, not only in your approach to using Freeway but in my first foray using Mals.

Would have been lovely to be able to take the shopper back from cart to ordering page at the anchor point they were at, with the disclosure they were perusing open, and to allow them to specify quantities and see how many items were in their cart from the ordering page, but achieving those things were beyond my current capabilities.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

I believe there is another trick, if you use the Tag field to create the entire style selector, and don’t use the name field at all, then you can “pad” the beginning of the tag field with spaces to force the sort order. Leading spaces sort to the top of the list, so adding two spaces sorts above one space.

Walter

On Mar 5, 2016, at 7:31 PM, The Big Erns email@hidden wrote:

The more complicated approach requires an involved discussion of how to exploit the property/value pairs of custom styles

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

And I think there is even another one:

Creating two HEX colors of the same color-family.

Grab a color create the two states via inspectors link style procedure.

ADVANTAGE:

No style fiddling and even if you (or the client) change your mind, it’s much easier and quicker to adjust. On plus, cross-browser compatibility down to older browsers. It’s simply too much she-shi and la-la for a desktop browser exclusive “effect”.

A set of colors can be found here:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/color.html

Pretty sure you find a matching theme.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options