Link color

Link color

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.

評比平均分數: -
In reply to 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.

In reply to Mark Penny

Updated file

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

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

Frank Ralf發表於
Hi Jeff,

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

hth
Frank

PS:
Use Firebug for analyzing and testing.
In reply to 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

In reply to 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" 眨眼 - 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

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

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

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

Re: Changing autolink colors in CSS

Joseph Rézeau發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 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

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

Joseph Rézeau發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 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

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

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

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.



In reply to Frank Ralf

Re: Changing autolink colors in CSS

Frank Ralf發表於
Here's a screenshot which shows how to even change the link color only for terms from a certain glossary.

Frank
附件 Autolink-CSS.png