Link color

Link color

Mark Penny
Vastuste arv 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.

Keskmine hinnang: -
Vastuses Mark Penny

Changing autolink colors in CSS

Mark Penny

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

Vastuses Mark Penny

Updated file

Mark Penny

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

Vastuses Mark Penny

Re: Updated file

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

Vastuses Jeff Mehring

Re: Updated file

Frank Ralf
Hi Jeff,

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

hth
Frank

PS:
Use Firebug for analyzing and testing.
Vastuses Frank Ralf

Re: Updated file

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

Vastuses Jeff Mehring

Re: Updated file

Frank Ralf
Hi Jeff,

depending on your display settings for this forum this might be very well the "screenshot below" silmapilgutus - 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
Vastuses Frank Ralf

Re: Updated file

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

Vastuses Mark Penny

Re: Changing autolink colors in CSS

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

Manus Screen shot 2011-05-27 at 1.01.55 PM.png
Vastuses Jeff Mehring

Re: Changing autolink colors in CSS

Joseph Rézeau
Core developers pilt Particularly helpful Moodlers pilt Plugin developers pilt Testers pilt Translators pilt

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

Vastuses Joseph Rézeau

Re: Changing autolink colors in CSS

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

Vastuses Jeff Mehring

Re: Changing autolink colors in CSS

Joseph Rézeau
Core developers pilt Particularly helpful Moodlers pilt Plugin developers pilt Testers pilt Translators pilt

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

Vastuses Joseph Rézeau

Re: Changing autolink colors in CSS

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

Vastuses Joseph Rézeau

Re: Changing autolink colors in CSS

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

Vastuses Andrea Souza Simoes

Re: Changing autolink colors in CSS

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.