We go back to default.css. First, the h tags need promotions.
Line 65 shows the assigned foreground color for that. The lines before:
h1, h2, h3 {
background-color : inherit;
color: #A03E19;
}
becomes altered from some red to some gray:
h1, h2, h3 {
background-color : inherit;
color: #bbb;
}
The view now is ...
Some red is vanished, but there is more. The titles in the main content are just a red, but those are links. So, looking in default.css for links, found some below at line 71 together with h1 ...
h1 a {
text-decoration : none;
}
h1 a:hover {
background-color : inherit;
color : #CB572D;
}
... and some else more above at line 52
a:link, a:visited {
text-decoration : none;
background-color : inherit;
color: #A03E19;
}
a:hover, a:active {
text-decoration : underline;
background-color : inherit;
color: #000;
}
That is the battlefield of change. I first change links to a golden color
a:link, a:visited {
text-decoration : none;
background-color : inherit;
color: #ec6;
}
Looks better, I think. But when touching the links, they look different:
The title link "Web Page Demo Section" has a hover effect to text color black with underline ...
... while the link title "Web Page Demo" hovers to red underline ...
To have a common design, the changes are (line 58) from:
a:hover, a:active {
text-decoration : underline;
background-color : inherit;
color: #000;
}
... to ...
a:hover, a:active {
text-decoration : none;
background-color : #ec6;
color: #446;
}
and the same with line 75, before ...
h1 a:hover {
background-color : inherit;
color : #CB572D;
}
... may vanish from function by changing to rather nothing:
.h1NOP a:hover {
background-color : inherit;
color : #CB572D;
}
The look when touching a link now is:
A next step is to influence borders.
eZine
