Link Color

C

Citylady505

New to FP and struggling, like other newbies on the board, with link colors.
I need white links on the links bar, given our brand's background color of
blue, but want regular blue hyperlinks on all pages. Oddly, link bar links
show white in my design and preview view modes, but as you'll see, are purple
against blue in a browser. URL is www.guerrillamarketresearch.com.

Also have type in the middle box showing 12p in design view, but displays in
10p. in a brower and in preview mode. Can't figure that out either.

SOS, please.
 
C

Citylady505

I need the link bar to stay white all the time. Don't want bar to have
purple.

All I see at View/Text Size is increase, decrease and normal?
 
C

Citylady505

Thanks for taking the time to answer, but I'm real green. I know CSS is a
style sheet, and I just pasted your code into a new one, but don't know what
to do from here. How do I attach it to my DWT?
 
S

Steve Easton

All you would paste into the style sheet is:

a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}

You then "attach" the style sheet by placing this in the head section of "any / all"
page(s) you want to use it.
( between <head></head> )

<link href="stylesheetname.css" rel="stylesheet" type="text/css">

with stylesheetname being what you named the file when you saved it.

You really don't have to attach it to the dwt, just the pages that use the dwt, or any
page you want the style applied to.


--
Steve Easton
Microsoft MVP FrontPage
FP Cleaner
http://www.95isalive.com/fixes/fpclean.htm
Hit Me FP
http://www.95isalive.com/fixes/HitMeFP.htm
 
M

Murray

If you pasted his code into a stylesheet it won't work.

Try opening your page and changing this -

</head>

to this -

{steve's markup}
</head>

That will give you an embedded stylesheet on that page. If you want to make
it into an external stylesheet, then you would have to remove the HTML from
his suggestion -

<style type="text/css">

and this

</style>

do not belong in an external stylesheet.
 
C

Citylady505

Thanks for sticking with my, guys. Now I need to know if i paste this code
inside or outside the editable region.

And when I cut and paste, I get those little sideways v's. (I hear you
laughing) I assume I delete them? Make them go the other way?
 
C

Citylady505

Well, there's good and bad news. Good news, the links in the link bar are
white, using CSS. Thanks.

The bad news is all the rest of the links on all pages are also white, so
now invisible. I need them to stay "hyperlink" blue.

What now?
 
D

David Berry

The way you have it now applies a global style to all the links on the page.
What you want to do is just apply a style to some of the links on the page.
One way to do this is to use inline styles. For example, if you want some
links to be white with no underline you'd create them like this:

<a style="color: white; text-decoration: none"
href="Page1.htm">Hyperlink</a>

For the other links you'd leave out the style = part and they'll appear
normal.

NOTE: For this to work you'll need to remove the stylesheet code that Steve
and Murray gave you otherwise it will over ride this.

Another way is to create a style for just white links in the same manner
that Steve and Murray were showing you. For that you'd take out the

a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}

and replace it with:

a:{
text-decoration: none;
}
..WhiteLinks {
color: white;
text-decoration: none;
}

This means that all hyperlinks will have no under lines and then for the
ones that you want white you'd do this:

<a href="Page1.htm" class="WhiteLinks">Hyperlink</a>

The class = part refers to the style you created above. NOTE, the style has
a PERIOD in front of it but when you use it in class = you don't put the
period.

Both ways should work for you. There are some older browsers that have
issues with inline styles so it really depends on what browser you're coding
for.

HTH

Dave
 
C

Citylady505

David or others out there,

Before I put in this CSS code, I want to be clear that I am talking about
the link bar on the top level template, thus link bars on every page, and my
only DWT. Any change on that page affects everything. If I change it on
that template (which has no other copy besides the link bar and heading), how
do I avoid messing up links on all pages?
 
M

Murray

No!

a:{ text-decoration: none; }

This is incorrect. It should be this - a { text-decoration:none; }
(no ":")

The best bet would be to create a container for your special links, e.g.,

<div id="special">...put all of your special links in here...</div>

Then use these styles -

#special a { your styles for the special links }
#special a:hover { your hover style for the special links }
a:link { your styles for all the rest of the links }
a:visited { ditto }
a:hover { ditto }
a:active { ditto }
There are some older browsers that have issues with inline styles so it
really depends on what browser you're coding for.
Click to expand...

Name them? I believe that any such browsers (if they existed) are long
extinct).
 
D

David Berry

No!
a:{ text-decoration: none; }
Click to expand...

Not sure what you mean here. There IS not period in front of that. I was
referring to the period in front of the .WhiteLinks class I was using as an
example.
Name them? I believe that any such browsers (if they existed) are long
extinct).
Click to expand...

I did say OLDER browsers, such as Netscape, and believe it or not, some
people still use them, especially in corporate offices.
 
D

David Berry

The nice thing about style sheets is that you can use them globally to
effect all elements on a page or use them to effect only certain elements.
If you use the class = example or the inline style example you'll only
effect those elements that you add the tag to. If you use a DIV container,
as Murray suggested, you will only affect the elements inside of the <div>
</div> tags
 
C

Citylady505

Thanks, guys for trying to help me out. I'm swimming over my head.

Just where are my "special links."? The names on the link bar seem to be
coming from outside the code on this page, Tell me EXACTLY where to paste
this copy, please. Below the header tag, I assume, in editable regions? I
also deleted the CSS sheet, because I assume we are now working on page code.

I also cleaned out my themes folder, which had lots of trial and error in
it. Only file in there now is "blank." I also reset page property
hyperlinks (on this DWT) to blue, from automatic. Now, of course, I have
all blue link bar links on a blue background. But at least the hyperlinks on
all editable regions of other pages are blue again.
 
D

David Berry

This is incorrect. It should be this - a { text-decoration:none; }
(no ":")
Click to expand...

Sorry Murray, I though you had a period there. I didn't notice it was a
colon. I was tying too fast again. Thanks for the correction.
 
D

David Berry

When Murray said special links he meant the ones that you want to look
different (white) that the others.

Regardless of which method you choose, you would paste the code before the
</head> tag (or in an external stylesheet) and the you'd either add the
inline style - style = or the class = directly to the hyperlink. If you
prefer Murray's suggestion then you would put the <div id="special"> before
your links and then a </div>. So it would look like this:

<div id="special">

links

</div>

Special is just the name he gave the style. You could call it anything
you'd like. In my example I called it WhiteLinks.

Dave
 
M

Murray

I prefer to use contextual selectors rather than presentational selectors.
It's ever so much easier to come back to the page after a year or so and
figure out where styles have been used when you do.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Link Bar - Font Color Not Publishing 2
Design view hyperlinks shortcut 1
Link Bar on Index.html page missing 4
FrontPage 2003 Navigation Link Bar Poetic Design 2
inoperable link. 1
how to change color gradients in a bar chart 0
link bar 6
.htm file extension showing in link bar 3

Top