Custom Background Color for 'Open in New Window'

**SheriLynn** · 01-13-2015, 04:23 PM

I think I still need help with anchors. Here's what I have in my stylesheet:

Code:

a:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
a:close {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

I added the 'close' anchor, hoping it would match my other links. Then, I have this in the doc:

<div id="img1" class="hide"><img src="gs013.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

I'm still getting a small hover on the 'close window' text. Clearly, my talent lies elsewhere...but I really want to understand this and this is my only stumbling block right now.

**Beverleyh** · 01-13-2015, 04:50 PM

OK - here's how you target the link with a "close" class (using your example);

Code:

a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

You can separate multiple selectors with a comma to apply the same CSS to each;

Code:

a.link, a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited, a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover, a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active, a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

Hope that helps

**SheriLynn** · 01-13-2015, 05:07 PM

I added option one code, as option two code changed all my link font sizes and colors to huge and weird (what?!), but option one doesn't seem to work either. I know you have probably spent more time on this than you care to, but would you please look at my source code for:

http://www.katiebuglove.com/Tutorial...urtaintut.html

and tell me if you see anything from preventing the 'close window' text from displaying correctly? I even cleared my browser cache twice....

Additionally, this is what I have added to my stylesheet for open new window:

Code:

div.close {width:100%; height:100%; display:block; position:absolute;}

and

Code:

.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; margin:0; text-align:center; color:#000; background:rgb(255,204,204); background:rgba(255,204,204,.75);) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%; 
	-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%) 
	}
.hide { display:none }

**Beverleyh** · 01-13-2015, 06:13 PM

My mistake on the close link CSS - it should look like this (no :link needed);

Code:

a.close {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

Also, I'm not sure why you have this line - it isn't being applied to anything so you can take it out;

Code:

div.close {width:100%; height:100%; display:block; position:absolute;}

**SheriLynn** · 01-13-2015, 06:41 PM

Done and done!

Thank you for all your help, I appreciate it so much. Now go do something fun, unless this is fun for you, then, just keep on doing this....