Change only footer link colors

Report · Mar 06, 2017

Okay so I don't know how to fix this...

No matter what I change, it changes all the links, or it doesn't change it at all.

See how the footer is all white because of the link? I need it to be black, while keeping the rest of my links white.

Report · Mar 06, 2017

It's hard to say exactly what you should do without seeing your code, but you can target specific links on your page by creating a selector in your css that applies only to items within their parent element, something like...

#footer_id a {

color:red;

}

(only affects <a> tags within an element with the id="footer_id")

Replace #footer_id with the id of the container holding those links and add in the color you want.

Report · Mar 06, 2017

<!DOCTYPE html>

<head>

<title>../../files/9cf0c44f-4a85-4301-9ad8-0ae0972b754c/generated-html-html.html</title>

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #FFFFFF;

}

a:hover {

text-decoration: none;

color: #FFFFFF;

}

a:active {

color: #FFFFFF;

}

</style>

<br/>

<!--

p {margin: 0; padding: 0;} .ft10{font-size:17px;font-family:Arimo;color:#000000;}

.ft11{font-size:12px;font-family:Arimo;color:#52a1bd;}

.ft12{font-size:37px;font-family:Arimo;color:#212121;}

.ft13{font-size:21px;font-family:Arimo;color:#212121;}

.ft14{font-size:21px;line-height:31px;font-family:Arimo;color:#212121;}

-->

</style>

</head>

<p style="position:absolute;top:199px;left:310px;white-space:nowrap" class="ft10">CHECK OUT OUR NEW ARRIVALS</p>

<p style="position:absolute;top:942px;left:300px;white-space:nowrap" class="ft12">SPRING IS HERE</p>

<p style="position:absolute;top:1040px;left:200px;white-space:nowrap" class="ft14">Read on to find more about our latest collection and <br/>GemGem news! Don't forget to connect with us on our <br/>social media platforms.</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>../../files/9cf0c44f-4a85-4301-9ad8-0ae0972b754c/generated-html-html.html</title>

<br/>

<!--

p {margin: 0; padding: 0;} .ft20{font-size:14px;font-family:Arimo;color:#ffffff;}

.ft21{font-size:12px;font-family:Arimo;color:#faf9f6;}

.ft22{font-size:24px;font-family:Arimo;color:#ffffff;}

.ft23{font-size:24px;line-height:35px;font-family:Arimo;color:#ffffff;}

-->

</style>

</head>

<p style="position:absolute;top:504px;left:34px;white-space:nowrap" class="ft23">Take a peek <br/>at the latest </p>

<p style="position:absolute;top:576px;left:29px;white-space:nowrap" class="ft22">arrivals from </p>

<p style="position:absolute;top:612px;left:43px;white-space:nowrap" class="ft22">our recent </p>

<p style="position:absolute;top:648px;left:45px;white-space:nowrap" class="ft22">collection!</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>../../files/9cf0c44f-4a85-4301-9ad8-0ae0972b754c/generated-html-html.html</title>

<br/>

<!--

p {margin: 0; padding: 0;} .ft30{font-size:27px;font-family:Arimo;color:#faf9f6;}

.ft31{font-size:17px;font-family:Arimo;color:#ffffff;}

.ft32{font-size:27px;line-height:39px;font-family:Arimo;color:#faf9f6;}

-->

</style>

</head>

<p style="position:absolute;top:194px;left:62px;white-space:nowrap" class="ft32"><a href="https://www.egemgem.com/collections/apparel/products/chevron-intarsia-sweater">LULULALA <br/>SALE IS <br/>HAPPENING <br/>RIGHT NOW! <br/>DON'T MISS <br/>OUT ON <br/>THESE <br/>GREAT <br/>DEALS! </a></p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>../../files/9cf0c44f-4a85-4301-9ad8-0ae0972b754c/generated-html-html.html</title>

<br/>

<!--

p {margin: 0; padding: 0;} .ft40{font-size:27px;font-family:Arimo;color:#faf9f6;}

.ft41{font-size:21px;font-family:Arimo;color:#ffffff;}

.ft42{font-size:17px;font-family:Arimo;color:#ffffff;}

.ft43{font-size:27px;line-height:39px;font-family:Arimo;color:#faf9f6;}

-->

</style>

</head>

<p style="position:absolute;top:125px;left:586px;white-space:nowrap" class="ft43">READY FOR <br/>SPRING: <br/>GET YOUR<br/>LATEST <br/>SPRING <br/>ACCESSORIES <br/>NOW!</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>../../files/9cf0c44f-4a85-4301-9ad8-0ae0972b754c/generated-html-html.html</title>

<br/>

<!--

p {margin: 0; padding: 0;} .ft50{font-size:32px;font-family:Arimo;color:#faf9f6;}

.ft51{font-size:37px;font-family:Arimo;color:#212121;}

.ft52{font-size:14px;font-family:Arimo;color:#212121;}

-->

</style>

</head>

<p style="position:absolute;top:72px;left:92px;white-space:nowrap" class="ft50">WE ARE NOW A MEMBER OF BABYCCINO </p>

<p style="position:absolute;top:120px;left:338px;white-space:nowrap" class="ft50">BOUTIQUES</p>

<p style="position:absolute;top:997px;left:251px;white-space:nowrap" class="ft51">CONNECT WITH US</p>

<p style="position:absolute;top:1138px;left:173px;white-space:nowrap" class="ft52">To ensure delivery, please add info@egemgem.com to your address book.</p>

<p style="position:absolute;top:1172px;left:227px;white-space:nowrap" class="ft52"><a href="http://www.egemgem.com/">Gemgem | 17145 Von Karman Ave #109, | Irvine, CA 92614 </a></p>

<p style="position:absolute;top:1195px;left:372px;white-space:nowrap" class="ft52"><a href="http://www.egemgem.com/">www.egemgem.com </a></p>

</div></div></div>

</body>

</html>

CSS

footer {

a:link {color:black};

a:visited {color:black};

a:hover, #footer a:active, #footer a:focus

{color:black};

}

The reason there is so little css is because this was a pdf I converted to html.

Report · Mar 06, 2017

Have you defined a site in DW yet?

Define a site |

Without that first step, you're going to run into huge problems using DW, especially when you upload your site because the program is using the absolute path to your images/pages on your computer, rather than document relative links that it will need when the site goes live.

The CSS should be written as...

footer a:link {

color:black;

}

footer a:visited {

color:black;

}
footer a:hover, footer a:active, footer a:focus {

color:black;

}

Report · Mar 06, 2017

Well this HTML formatting is not helping matters any. Get rid of it.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 06, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
Well this HTML formatting is not helping matters any. Get rid of it.
<body bgcolor="#A0A0A0" vlink="blue" link="blue">

I count 4 doctype declarations.

I'm baffled, Shoot me again!

Report · Mar 06, 2017

uh what? Anyways again, that's probably because it was converted from a pdf file... I made it with Canva and didn't know it could only be exported as image files or pdf until after I finished so I've been trying to convert/fix it all in html. Or it's because there are 4 separate pages.

Report · Mar 06, 2017

Why don't you start over with a clean, HTML5 document? What you have now is not worth salvaging.

Be sure to define your local site folder first. Site > New Site.

Then, go to File > New > Starter Templates. Pick a layout and hit Create button. SaveAs some filename.html

Post back if you have any problems.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 06, 2017

Got rid of it.

Report · Mar 06, 2017

If you're using HTML5 tags,

footer a {

color: black;

}

If your tag selector is anything but <footer>, adjust CSS accordingly. Also move the footer link style to the bottom of your stylesheet, below all the other link styles.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 06, 2017

Nope... didn't work.

Report · Mar 06, 2017

The info I posted above only works if you have used the <footer> element in a valid html document, and would go into the <style> tag in the <head> of the document, or into an external .css stylesheet.

It looks like you've pasted several complete documents together into one, that's probably going to cause issues in your viewer's browsers as well.

Take a moment to familiarize yourself with html and css, DW requires an understanding of those as well as some javascript to make the most of the program.

http://www.w3schools.com/html
http://www.w3schools.com/css

Report · Mar 06, 2017

I have it in between