Known Participant

Question

Change only footer link colors

Forum|Forum|8 years ago
March 6, 2017
2 replies
2635 views

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.

This topic has been closed for replies.

Nancy OShea

Community Expert

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

X

xoxoyazyxoxoAuthor

Known Participant

Nope... didn't work.

Jon Fritz

Community Expert

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

Jon Fritz

Community Expert

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.

X

xoxoyazyxoxoAuthor

Known Participant

<!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.

Nancy OShea

Community Expert

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;

}

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

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded