Page Link Design Advice Needed

Hey guys. I need your help. I’m trying to decide on how to best format my page links for this site so it doesn’t take away from the design.

I’m thinking a simple underlined rule the same color as the text area, but that would mean I’d have to have different colored links. I’m also not sure if there is a “best practice” for links. In other words, should all links have the same styling throughout the website or is it acceptable to change the visual cue depending on the page design?

Any help is appreciated.

http://rcb.idealynx.com/index.php


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

Simple is good. I suggest a thick bottom-border line (3px?) the same color
as the text but semi-transparent

  .link a { border-bottom: 3px solid rgba(0,0,0,0.5); }

Then full opacity or no border-bottom on the hover.


Ernie Simpson

On Wed, May 15, 2013 at 6:33 PM, RavenManiac email@hidden wrote:

Hey guys. I need your help. I’m trying to decide on how to best format my
page links for this site so it doesn’t take away from the design.

I’m thinking a simple underlined rule the same color as the text area, but
that would mean I’d have to have different colored links. I’m also not sure
if there is a “best practice” for links. In other words, should all links
have the same styling throughout the website or is it acceptable to change
the visual cue depending on the page design?

Any help is appreciated.

http://rcb.idealynx.com/index.php


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


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

Thanks for the advice Ernie. I hate to keep doing this to you, but I’m still fuzzy on how to add code for things like this in Freeway Pro.


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

There’s a few different ways to add this sort of code to your page. You could use the Styles palette to create this style, putting the entire selector .link a in the Tag field and putting the body of the style in the Extended sub-dialog. (You put everything to the left of the colon in the Name field and everything to the right in the Value field. You skip the curly-braces entirely when you do this, letting Freeway assemble the resulting style rule.)

As long as you clear the value from the Name field and tab out of it before you save the style, you will end up with what I refer to as a “Tag-only style”. Freeway publishes these to all pages (or the global stylesheet, if you’re using external stylesheets) without you ever needing to add it manually or assign it to any element. It exists, and applies itself through the power of CSS selectors.

Another, perhaps more direct way would be to add this rule to a block in the Before /head section of the Page / HTML Markup dialog. So that would look like this:

<style type="text/css">
	.link a { border-bottom: 3px solid rgba(0,0,0,0.5); }
</style>

If you already have some other styles in that portion of that dialog, you don’t need to add another style tag, just insert the entire rule (the selector, the braces, and the content of the braces, which may span multiple lines if each line is properly terminated with a semicolon) inside the style block.

Finally, you may end up with so many overrides that it makes sense to use a dedicated CSS editing tool (or just a syntax-aware programmer’s editor) to author an external stylesheet outside of Freeway. Then you would want to use my External Stylesheets Action to apply that extra sheet to your page or pages. This will have the benefit of managing the file – uploading a new version whenever you make any changes in that external file – so you don’t need to fracture your workflow and introduce another dependency (tracking changes manually and uploading with an FTP application).

Walter

On May 16, 2013, at 2:16 AM, RavenManiac wrote:

Thanks for the advice Ernie. I hate to keep doing this to you, but I’m still fuzzy on how to add code for things like this in Freeway Pro.


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


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

Thanks Walter. I think I’ll try the HTML Markup. What is the syntax for normal, hover, and visited. Also, do I need to use the normal tag?


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

Tried the HTML approach. I can’t seem to get it to work. Do I need to use the !important attribute?


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

Please publish a link to your page, so we can see precisely how you have tried to implement this. CSS is a game of shadows. What you think is going to have an effect can be entirely overridden by another rule somewhere else that is just a bit more specific. The Safari Web Inspector (enable the Develop menu in the Advanced tab of the preferences) will allow you to see the “cascade” as it applies, starting at the very bottom with the basic browser-level styles, and moving up the stack from the most weakly-applied (inherited from parent elements) rules up to the very most specific rule of all. Along the way, you will see many things that appear crossed-out, meaning they have been overridden somewhere. Possibly not where you think.

Walter

On May 16, 2013, at 10:31 AM, RavenManiac wrote:

Tried the HTML approach. I can’t seem to get it to work. Do I need to use the !important attribute?


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


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

Walter, here’s the page:

http://rcb.idealynx.com/index.php


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

Okay, I can see where you have created the .link a style in the head. That looks mostly correct, except for the link color. You have the word red in place of rgba in that definition, so that’s possibly why it won’t appear to work. Browsers ignore nonsensical values like that, and some will entirely ignore a rule that contains an error like that. (Sometimes everything up to that point will apply, and only the crazy bit will be ignored.)

But there aren’t any elements on this page that have the class=“link” attribute set. If you apply that classname to one or more HTML boxes on the page, then their child links will gain the style attributes defined in your style. You can do this using the Item / Extended dialog, or you can try my AddSelector Action for this.

Walter

On May 16, 2013, at 2:11 PM, RavenManiac wrote:

Walter, here’s the page:

http://rcb.idealynx.com/index.php


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


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