I want to do multiple a:link colors in external CSS

I want to do multiple colors for my Links/URLS (a:link). I am
using an external .css file. Am i forced to embed some styles
within html in parallel to having an external CSS file? can someone
help answer this and/or show examples? thank you.

Put this in your External CSS:
.newlink:link{ /*unvisited*/
color:#990000;
text-decoration:none}
.newlink:visited{ /*visited*/
color:#9999FF;
text-decoration:none}
.newlink:hover{ /*mouseover*/
color:#990000;
text-decoration:underline}
.newlink:active{ /*selected*/
color:#FFCC00;
text-decoration:none}
.newlink:focus{ /*optional, same as hover, but with tab key*/
color:#990000;
text-decoration:underline}
Put this list of links inside your HTML code:
<ul>
<li><a class="newlink" href="#"> Link
1</a></li>
<li><a class="newlink" href="#"> Link
2</a></li>
<li><a class="newlink" href="#"> Link
3</a></li>
</ul
Does this help?
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"domerdel" <[email protected]> wrote in
message
news:g3e951$kk5$[email protected]..
> I want to do multiple colors for my Links/URLS (a:link).
I am using an
external
> .css file. Am i forced to embed some styles within html
in parallel to
having
> an external CSS file? can someone help answer this
and/or show examples?
thank
> you.
>

Similar Messages

Link to an external CSS style sheet

This question was posted in response to the following article: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e1ca.h tml

I am assuming you're working within a Defined Local Site Folder. If not, go to Site > Manage Sites > New...
For further details:
http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html
How to attach external CSS files to your HTML pages.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Change text "link" color only in Spry Tab content area

I need to have multiple text link colors in my site for light
and dark background colors. The only regions in my site that have a
white background are in the Spry Tab Panel content area. I can't
figure out how to change the text color for text links in the spry
content only. I tried to add a:link ..etc... to the style sheet,
but it did not effect anything
(I also need to clean my style sheet (s). But that comes
next.
Here
is a Link to a Sample Page in my site
null

Here is the SpryTabbedPanels style sheet in my site. I can't
seem to figure out the changes I need to make to effect the content
area.
I tried to add the following (see .TabbedPanelsContentGroup
below)
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
float: right;
clear: none;
width: 82%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCCC99;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #99CC33;
color: #000000;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
border-bottom: 1px solid #EEE;
color: #000000;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #FFFFFF;
color: #000000;
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #CCCC99;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #CCCC99;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;

Visited link color is not changing when there is no page redirection

Visited link color is not changing when i just open a popup on clicking the hyperlink.. whereas visited link color gets changed when i redirect to a new page on clicking the hyperlink
I want to have my visited link color to change even if i show a popup on clicking the hyperlink
This works fine with IE..

Hi,
Have a look at the user status table TSOCM_STAT_PROP and see if there are any unwanted PROCESS_TYPE <> STSMA combinations.
For your process type there should only be one kind of status schema assigned.

Visited Links - Override all link colors

Hi,
I'm using RH8 in WebHelp and IE. I read all the former postings regarding people having the same problem and some mentioned a fix in a .css but the .css wasn't available with the posting of March 25, 2008.
My visited link color seems to override all other link colors. Originally I had the link colors in a style sheet and changed the colors in the .css. That didn't work and all colors still were the visited link color. I deleted the link colors from this .css and added the link colors via the RoboHelp Edit Styles. Either way doesn't seem to work and all link colors are my visited color. I've tried clearing my cache several times and this doesn't work, neither does deleting the history.
Can anyone shed some light on this? Thanks very much for any help you can provide.

Hi Leon,
Here is all the code with "a" type styles in the .css. Again, I also have the links also in the mini-TOC but didn't see a way via the Format Placeholder to change
this. Currently, most of my links are showing up as the "visited" color -- grey. I'm going to revisit this link issue again very soon but have to get a ton of content in now. I really appreciate your efforts.
Thanks,
Sue
A.expandspot {
cursor: hand;
font-style: italic;
font-size: 10pt;
font-family: Verdana;
color: #800000;
text-decoration: none;
SPAN.expandtext {
font-style: italic;
font-weight: normal;
color: #ff0000;
font-family: Verdana;
font-size: 8pt;
A.dropspot {
cursor: hand;
color: #008000;
font-style: italic;
font-size: 10pt;
text-decoration: none;
A.glossterm {
cursor: hand;
font-size: 10pt;
font-family: Verdana;
font-style: italic;
color: #0000ff;
text-decoration: none;
SPAN.glosstext {
font-style: italic;
font-weight: normal;
color: #0000ff;
font-family: Verdana;
font-size: 10pt;
OL,
UL {
margin-top: 0px;
margin-bottom: 0px;
p.breadcrumbs {
font-size: 8pt;
x-on-hover: fontchange(bold=on);
x-next-class: breadcrumbs;
x-next-type: p;
A.breadcrumbs {
font-size: 10pt;
A:link {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
A:visited {
font-size: 10pt;
font-family: Verdana;
color: #808080;
text-decoration: underline;
A:hover {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
A:active {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
A.popupspot {
font-size: 10pt;
font-family: Verdana;

How can I change the link color css in one module but not the whole site?

I have a site built in muse but using modules from BC. I changed the link color in the css for the online store and blog but of course it is applying it to everypage. Is there a way to change the link color in an individual BC module instead of the whole site.? I'm new to CSS obviously.
Thanks
Josh

I don't think you can do it right in Muse but you can easily if you have access to the code of the page and the css file.
You need to create a css class something like:
.secondLink a { /* secondLink can be any class name, I just chose that randomly
color: #990000; /* of course substitute your color code in there
Then in your code add:
class="secondLink"
to your link's <a> tag. This will give any links with the class of secondLink the color assigned. Hope that helps get you started.

Frustrated with external css link

I had an external css link that was working in edge version 2014.0, then I upgraded to 2014.1 and edge will no longer link to the external css link that it would before. (The reason I have an external css is that I have some elements that I am adding thru javascript to the stage later so that I don't clutter up the stage - these elements added later were then styled with my external css but now it doesn't work). I was able to get the css to link before by manually adding the css in the edge_Preload.js:
aLoader = [
      { load: "edge_includes/jquery-2.0.3.min.js"},
      { load: "edge_includes/edge.4.0.0.min.js"},
      { load: "js/rollarCoasterQuestionsMain.js", user: true },
      { load: "js/rollarCoasterQuestion1.js", user: true },
      { load: "js/rollarCoasterQuestion2.js", user: true },
      { load: "js/rollarCoasterQuestion3.js", user: true },
      { load: "js/rollarCoasterQuestion4.js", user: true },
{ load: "css/rollarCoasterQuestionsMain.css"},                 //this was the added line that worked before
      { load: "js/jquery.cookie.js", user: true },
      { load: "rollarCoasterR1_edge.js"},
      { load: "rollarCoasterR1_edgeActions.js"}];
It no longer works allowing me to add the external stylesheet this way... so I'm looking for a new way but going through the forum I've found the following examples that I haven't gotten to work:
Putting this in the stage code (technically is in the edgeActions.js file): sym.$("<link rel='stylesheet' type='text/css' href='css/rollarCoasterQuestionsMain.css'>").appendTo("#Stage");   //couldn't get this to work
Then tried putting this in my external javascript file just to try it another way but it diddn't work either (in my js/rollarCoasterQuestionsMain.js file):
$( "#Stage" ).append( "<link rel='stylesheet' type='text/css' href='../css/rollarCoasterQuestionsMain.css'>" );   // but this didn't work either
Please help

Actually in most of my Edge projects I'm using webfonts.
When doing this I also add an external stylesheet like below. (Located in the library, fonts tab)
Once done the stylesheet works too, without any other coding.
I hope this helps.
Kind regards,
Lester.

Have a simple External .css link, but it is overridden by basic & agl-styles css?

Hello
Have just ?up-graded? to GoLive 9. Yes I have CS3 DW. I'm to old to change at this point.
Long time user with many websites, designed with GoLive 7. Most of these sites I have created, using one external "textMaster.css". All is fine.
I've created a simple new Golive 9 site with one "index" page. Imported one of my External.css, and placed this file in the CSS folder that GL9 creates.
On this index page I link to my external css, as in GoLive 7. Now I add a Grid layout, add a text box, and type some text. Once I'm finished, I select all the text and at the top menu bar assign [H1] to my text. In Golive 7, this would then use the [H1] text font,size,colour,etc. When I do this with GoLive 9, a two new external css are generated.
agl-styles.css
basic.css
The font size now seems to follow the agl-styles css, which for some reason has a font size of 66px assigned to [H1]???
If I delete the above two css files, the font DOES assign MY textMaster.css correctly. However as soon as I create another text box and then assign [H1] to it. All the text boxes on the page once again go to 66px. Also in the external css window, these two unwanted css files are back. In the "code" view, they are also now there.
What am I doing wrong?
I have also tried this with a small existing GoLive7 website, that I opened and updated in GoLive 9. Same story.
I have looked in the GoLive9 pdf manual to find out what a "agl-styles.css" file is, and how to stop it from being generated. No luck.
Thanks in advance for any direction.

Thanks Nate for your answer.
It's a VERY SAD SAD DAY, when one of the only reasons I was going to update from 7 to 9 was for a more up to date .css implementation.
SO VERY SAD to see, the most very basic one external text css, not work on a page.
I'm back to V7, got a refund from 9. Soon this forum which I have used for 7 years, will look like the hallways of the Vancouver airport at 11:47pm.
Thanks Nini, Nate, etc. I'll still be visiting this forum until it dies.
SAD SAD SAD! I'm sorry sir, there is now only one brand of car, it comes in one model and you have no options.

Multiple Link Colors

Hi, I am quite new to Dreamweaver, and this is the 1st time I've joined a forum. I would like to have multiple link colors on the same page, within the same section (the main body) of a document. I went to some tutorials to learn how to make different sections have different link colors (i.e. navigation bar vs main body), but I cant find any instruction on how to make some of the links in the same section of the doc use different link colors. I have set up default link colors for the main body of the docs, and separate link colors for the nav bar. Then I tried to set up a 3rd link color to use when I dont want the default link color in the main body, but that doesnt seem to work.
Also, once I've figured this out, can the stylesheet with these link rule colors be attached to a template, and it will update any existing pages already made off that template?
Thank you so much for any help anyone can provide.

This is very straightforward with CSS if you understand the basic concepts.
I'm not sure how familiar you are with CSS but, as a first step, are you able to follow this tutorial?:
http://www.projectseven.com/tutorials/css/pseudoclasses/page3.htm
If you find yourself struggling, please post a link to your site as it stands.

I want to use multiple colors in the same box - Pantone plus process. I am trying to create a support plate of cyan under a PMS.

I want to use multiple colors in the same box - Pantone plus process. I am trying to create a support plate of cyan under a PMS.

How is the external drive formatted?
Allan

Don't want button images to show active link color

I made hover buttons and when I link to them to the appropriate pages it creates a box with the link color around the whole button. So this changes the look of the button with an ugly blue border. I looked at the options in the page properties under links but not seeing anything to help. How do I have an active link but deactivate the box and color that identifies it as such? I primarily create my sites in the design mode as my CSS skills are not very strong. Thank you in advance.

Use CSS.
Add
a img { border: none; }
to your CSS stylesheet.

Multiple file links in a single page: A better way to/efficient way to handle ?

Aloha Everyone!
I would like to ask the community how they have handled multiple file links in a single page. Sort of a pseudo database of files.
Here is the webpage I have been working on:http://huichawaii.org/
Here is what I have done to show files so far:
old version:http://huichawaii.org/proceedings---2012-education%2c-math---engineering-technology.html
new version: http://huichawaii.org/ahs2013-proceedings.html
The website works best in Chrom or Firefox, still have to convert the flash header to an edge animate .
Mahalo in advance for everyone's input!

Depending on what other text you might have, you could use the data list component.
To get the text to have underlines, you will need to edit the repeated item. You can also adjust colors and fonts as well. The default rollover and selected states will probably not be the UI that want, so make sure you change those as well.
Now for the interactivity, select the datalist, and use the interactions panel, choose "On Select", then "Go To Url", the trick is to make sure the "When a specific item is selected" is also set. Here are the basic settings to get your links working:
Add new interactions for each item you want to be functional.

Link Color

If you want to make multiple links in different colors, how
do you do that? I don't see anything in the link preferences. There
must be a way.

On Fri, 13 Jul 2007 03:25:49 +0000 (UTC), "PeacefulHarry"
<[email protected]> wrote:
>If you want to make multiple links in different colors,
how do you do that? I don't see anything in the link preferences.
There must be a way.
<style>
.navOne a:link { color:blue; }
.navOne a:visited { color:purple; }
.navOne a:hover { color:red; }
.navOne a:active { color:navy; }
.navTwo a:link { color:green; }
.navTwo a:visited { color:blue; }
.navTwo a:hover { color:gray; }
.navTwo a:active { color:purple; }
</style>
</head>
<body>
<ul class="navOne">
<li><a href="one.htm">One</a></li>
<li><a href="two.htm">Two</a></li>
<li><a
href="three.htm">Three</a></li>
</ul>
<p>Ullamco laboris nisi excepteur sint occaecat eu
fugiat nulla
pariatur. Sed do eiusmod
</p>
<ul class="navTwo">
<li><a href="six.htm">Six</a></li>
<li><a
href="seven.htm">Seven</a></li>
<li><a
href="eight.htm">Eight</a></li>
</ul>
~Malcolm N....
~

Link color issue

Hi
I've set the color for linked texts on "page properties"
which is fine. However, on one page the linked text color and
background color are the same and I cannot see the linked text! Is
it possible to override the command on these occasions (keeping the
general command intact) and how?
Thanks
Mike

> I've set the color for linked texts on "page properties"
which is fine.
It's only fine if you want one link style throughout your
site - which is
rare.
For multiple link styles, you use CSS (Cascading Style
Sheets).
Follow this tutorial carefully:
http://www.projectseven.com/tutorials/css/pseudoclasses/index.htm
Regards
John Waller

Spry Menu Bar link colors not consistent

I have a horizontal Spry menu bar set up with 4 items in it.
The first item is the Home link and does not have a submenu, but
the other 3 items do. What I want is when you roll over the main 4
items the text link color will be purple (#583399). When an item
has a submenu the rollover text link on the submenu links will be
green (#89b11a).
My current code almost works, but the problem I am having is
that the Home link
without the submenu changes to a green color instead of
purple like the other 3 main links. If I add a test submenu to the
Home link then it turns purple like the other links. How can I get
the Home link to change to purple like the others without having a
submenu attached to it?
Here is my html code that refers to the menu:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html"
class="MenuBarItemSubmenu">HOME</a></li>
<li><a href="about.html"
class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a
href="services.html">services</a></li>
<li><a
href="bios.html">bios</a></li>
<li><a
href="news.html">news</a></li>
</ul>
</li>
<li><a href="work.html" class="MenuBarItemSubmenu"
>WORK</a>
<ul>
<li><a href="design.html">design</a>
</li>
<li><a
href="advertising.html">advertising</a></li>
<li><a href="casestudies.html">case
studies</a></li>
</ul>
</li>
<li><a href="contact.html"
class="MenuBarItemSubmenu">CONTACT</a>
<ul>
<li><a href="#">.</a></li>
<li><a
href="location.html">location</a></li>
<li><a
href="opportunities.html">opportunities</a></li>
</ul>
</li>
</ul>
Here is the Spry CSS code that pertains to the links:
/* Menu items are a light gray text with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
/* Menu items that have mouse over or focus have green text
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #89b11a;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemHover,
color: #583399;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #583399;
And
here
is a link to my test file so you can see what I am talking
about.
Thanks for any help and let me know if you need anything else
to help with it.

Anyone??

I want to do multiple a:link colors in external CSS

Similar Messages

Maybe you are looking for