Hi,
I updated my CSS files and commented out the existing code, it's much easier to read now
styles_color.css
a.autolink:link,
a.autolink:visited {
color:#000000;
/*SB remove background color - background: #DDDDDD; <-- removed background colour as this makes it hard to read*/
}
a.autolink.glossary:hover {
cursor: help;
/*SB add background colour*/
background: #DDDDDD; /*<--- now background colour exists on mouseover*/
}
Similarly for styles_layout.css
/* style for glossary auto links*/
a.autolink:link, a.autolink:visited
{
background-color: #fff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
border-bottom-width: 1px; /*<-- changed size of dotts - it's much more subtle*/
/*border-bottom-width: 2px;*/
border-bottom-style: dotted;
border-bottom-color: #ffcb44;
}
So as per my previous post I've reduced the amount of times glossary terms (are repeated) appear on a page, I've also made the highlighted glossary terms much easier to read using CSS styling.
Here's an example of what the style now looks when doing some glossary terms tests.
We use a lot of health and safety terminology and it's quite repetative within course text.
- You'll notice the word Safety appears a number of times but only the first word 'safety' term is highlighted.
- The dotted underline is not as prominent making reading easier.
- The hover on mouse over changes the background colour to grey
(this only happens on mouseover, again much easier to read as this background previously was always visible before the changes to css)
Terms after css change
Terms before css change (for comparison)
As you can see making changes to the css style really helped with readability! Imagine this in an A4 sized page stuff with glossary terms.... it's very difficult to read.
I hope it helps someone, it's just a simply tweak and it's much easier on the eyes.
Steve