Link color

Link color

by Mark Penny -
Number of replies: 16

I'm building an English learning website with a large number of autolinked words on every page. That's a lot of blue blobs and patches mixed in with the black. I'm about to look into altering the color of links in general for my site, but it would be nice if Glossary settings would allow Glossary autolinks to be colored separately from other links, which may need to be more striking.

Thanks a lot for this very useful module. I plan to make use of it pretty well everywhere on my site.

Average of ratings: -
In reply to Mark Penny

Changing autolink colors in CSS

by Mark Penny -

Open the attached file and follow the instructions to alter the color of autolinks in your Moodle installation.

In reply to Mark Penny

Updated file

by Mark Penny -

Same file with additional info and anchor pseudo-classes ordered in accordance with CSS convention.

In reply to Mark Penny

Re: Updated file

by Jeff Mehring -

Hi Mark,

Thanks for the code to help with glossary linking.

I am trying to add color text on my Moodle but since I am using the glossary linking none of the colors show up, only black or grey. Even unlinked words show up in black or grey. Is there a way to make the text more colorful and keep the glossary linking?

I'm using Moodle 2.0 and orangepop theme(but I have tried on many themes with the same result).

Jeff

In reply to Jeff Mehring

Re: Updated file

by Frank Ralf -
Hi Jeff,

Try using !important to give your own CSS rules a bit more punch wink See screenshot above.

hth
Frank

PS:
Use Firebug for analyzing and testing.
In reply to Frank Ralf

Re: Updated file

by Jeff Mehring -

Hi Frank,

Thanks I will try !important.

What screenshot are you refering to when you say "See screenshot above."?

I installed Firebug but have never used it before for analyzing and testing. Looking forward to giving it a try.

Thanks again,

Jeff

In reply to Jeff Mehring

Re: Updated file

by Frank Ralf -
Hi Jeff,

depending on your display settings for this forum this might be very well the "screenshot below" wink - see http://moodle.org/mod/forum/discuss.php?d=168066&parent=785178

Firebug really is the Swiss army knife for web development, you definitely should give it a try.

Cheers,
Frank
In reply to Frank Ralf

Re: Updated file

by Jeff Mehring -

Hi Frank,

I tried !important and had mixed results. For words that are linked to the glossary I was able to make them stand out more when the cursor hovers about them. This I really like since before they would go from black to a light grey. Sometimes it was difficult to tell. Now they go from black to bright red.

As far as keeping the colors typed in the TinyMICE for instructions, labels, etc, it did not work for glossary linked words, only words not in the glossary. For example:

The bird flew through the window.

If bird was in the glossary and flew was not, flew would stay blue but bird would flip back to black because it is in the glossary. Any ideas on where !important should be placed? I tried it in various places to no avail.

I am just starting with web development so thanks for the tip on Firebug. I have just begun using it.

Thanks again for the help!
Jeff

In reply to Mark Penny

Re: Changing autolink colors in CSS

by Jeff Mehring -

Hi Mark,

Thanks for the simple file. Made life very easy.

Why are all the linked words underlined? (See attached pic). Does this have to do with the glossary module or is it part of the CSS and autolink? It only happens with a few of my themes so I can not figure it out.

Using Moodle 2.0.2

Thanks,

Jeff

Attachment Screen shot 2011-05-27 at 1.01.55 PM.png
In reply to Jeff Mehring

Re: Changing autolink colors in CSS

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Jeff "... It only happens with a few of my themes so I can not figure it out."

It would be so much easier for us to help you if you gave the names of those themes where autolinks are underlined!

Joseph

In reply to Joseph Rézeau

Re: Changing autolink colors in CSS

by Jeff Mehring -

Hi Joseph,

Right now I am experiencing this problem with:

discuss

zebra

arctic

aardvark makeover

Not with:

lamplite

serenity

darkb

boxxie

simplespace

moodlebook

Thanks,

Jeff

In reply to Jeff Mehring

Re: Changing autolink colors in CSS

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Jeff,

1.- Surely you are not using all of those 10 themes at once on your moodle site?!

2.- The 4 themes you mention as having glossary autolinks underlined do not belong to the moodle 2 standard installation.

3.- I do not notice underlined glossary autolinks in the discuss and artic themes. Are you absolutely sure of what you are seeing? Do you clean the themes cache after you switch themes?

4.- In the zebra theme, all links are underlined throughout the moodle site/course that uses that theme. So this is not a problem with the glossary autolinks only.

If you do not want glossary autolinks to be underlined, then simply do not use a theme that underlines them.

Joseph

In reply to Joseph Rézeau

Re: Changing autolink colors in CSS

by Jeff Mehring -

Hi Joseph,

Thanks for the information.

1) I do use different themes for different courses. To have the same theme running throughout each course is one, boring for the student to look at and two makes it difficult for students and myself to remember which course we are in without looking at the top of the screen for reference. Do most Moodlers only use 1 theme throughout their site and courses? I thought with Moodle 2.0 and the My Moodle page, people would be allowed to choose different themes according to their choice.

2) I understand these are not standard Moodle Themes. I uploaded them from Moodle.org.

3) Discuss and Artic do have underlined glossary words, even after purging the site and going directly to that theme. The glossary words could be underlined due to the non-standard themes on my site.

4) Thanks for the this, I did not realize it and it could be a cause of #3 as well.

I am going to contact the developer of these themes but will probably just choose different themes, it is what I have done in the past but I was hoping there would be a way around it.

Thanks,

Jeff

In reply to Joseph Rézeau

Re: Changing autolink colors in CSS

by Andrea Souza Simoes -

Hi Joseph,

Is there a way to have a color for links for glossary and a different one for links for websites or files?

I think the Autolinks Color.txt changes both of them, doesn't it?

Thanks,

Andréa

In reply to Andrea Souza Simoes

Re: Changing autolink colors in CSS

by Frank Ralf -
Hi Andrea,

The glossary autolink feature adds some classes to each link (e.g. class="glossary autolink glossaryid3") which you can use to style each kind of link separately.
hth
Frank

PS:
CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming. And use Firebug for analyzing and modifying a webpage's CSS.