Topic: Perhaps new colors for hyperlink text?

Posted under General

In all themes save for the two Hexagon themes, it's very difficult to see hyperlink text. Pony and Serpent are slightly visible but much less so than the Hexagons. The hyperlink text in Bloodlust is basically the same color as normal text and in the Hotdog theme it's exactly the same. If possible, could these colors be changed to make them stand out for these themes?

Updated

Yeah, I usually use Hexagon Clean, but after trying them out I have to agree.

BTW: In firefox, 'RightClick->Inspect this element' brings up the page inspector on the element you clicked on, which lets you edit content and styling information, which is nice for providing specific color suggestions.

For example, hotdog is fairly tough to come up with a decent link color for, but I'd suggest #248 (was #000)

For serpent, #063 looks like an improvement (was #050)

Updated by anonymous

savageorange said:
Yeah, I usually use Hexagon Clean, but after trying them out I have to agree.

BTW: In firefox, 'RightClick->Inspect this element' brings up the page inspector on the element you clicked on, which lets you edit content and styling information, which is nice for providing specific color suggestions.

For example, hotdog is fairly tough to come up with a decent link color for, but I'd suggest #248 (was #000)

For serpent, #063 looks like an improvement (was #050)

I've tried that before but I don't know how to get it to save the changes. Is there a way or would I have to change it each time?

Updated by anonymous

mccool37 said:
I've tried that before but I don't know how to get it to save the changes. Is there a way or would I have to change it each time?

Try making a user stylesheet: https://e621.net/forum/show/154626

Instructions are different for Firefox and Chrome

Your user stylesheet will override hexagon.css and skin-NAME.css if another theme is used (such as skin-pony.css)

a:link {
color: #063; text-decoration: none;
}

Making it work for every theme will be trickier...

edit here

Updated by anonymous

Lance_Armstrong said:
Try making a user stylesheet: https://e621.net/forum/show/154626

Instructions are different for Firefox and Chrome

Your user stylesheet will override hexagon.css and skin-NAME.css if another theme is used (such as skin-pony.css)

edit here

Alright, I found and saved the stylesheet but it saved as a .txt on the computer. Do I have to restart Firefox to have the changes take effect or is there something I'm missing?

Updated by anonymous

mccool37 said:
Alright, I found and saved the stylesheet but it saved as a .txt on the computer. Do I have to restart Firefox to have the changes take effect or is there something I'm missing?

Your Firefox's "chrome" folder will contain a file called userContent.css

You have to save the file as .css not .txt. In Windows Notepad go to Save As, select "All Files" and enter userContent.css

You have to have it in the "chrome" directory:

http://brugbart.com/custom-style-sheets

Let's change the style sheet too:

a:link {
color: #063 !important; text-decoration: none;
}

or if you want underlined links:

a:link {
color: #063 !important; text-decoration: underline !important;
}

Updated by anonymous

Lance_Armstrong said:
Your Firefox's "chrome" folder will contain a file called userContent.css

You have to save the file as .css not .txt. In Windows Notepad go to Save As, select "All Files" and enter userContent.css

You have to have it in the "chrome" directory:

http://brugbart.com/custom-style-sheets

Let's change the style sheet too:

a:link {
color: #063 !important; text-decoration: none;
}

or if you want underlined links:

a:link {
color: #063 !important; text-decoration: underline !important;
}

I tried to locate the Chrome folder as per the instructions on this site but there is no Chrome folder in the location.

Edit:I've downloaded ChromEdit plus and I'm going to try to add the CSS to the Chrome folder I added in, thank you for the help.

Updated by anonymous

Look again (there might be multiple profiles), or make a chrome folder in that location, add the css file in it, see if it works

@-moz-document domain("e621.net") {
a:link {color: #063 !important; text-decoration: none;
}}

Updated by anonymous

Lance_Armstrong said:
Look again (there might be multiple profiles), or make a chrome folder in that location, add the css file in it, see if it works

@-moz-document domain("e621.net") {
a:link {color: #063 !important; text-decoration: none;
}}

As I'm seeing there's only the one profile but from what I've seen this is something that happens.

Updated by anonymous

If you find the folder where chrome should be according to the instructions, make a chrome folder in it and put userContent.css in there

Updated by anonymous

Wow these link colors are terrible. Added to my todo list.

Updated by anonymous

For future generations
@-moz-document domain("e621.net") {
body:has(#user_css:has(option[value="hexagon,skin-pony"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-bloodlust"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-serpent"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-hexagon-clean"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-hotdog"]:checked)) a:link {color: #248 !important; text-decoration: none;}
}

https://drafts.csswg.org/selectors-4/#relational

(It would be great if this worked in the next 5 years)

Updated by anonymous

Lance_Armstrong said:
If you find the folder where chrome should be according to the instructions, make a chrome folder in it and put userContent.css in there

It has worked, thank you for the help.

Updated by anonymous

parasprite said:
Wow these link colors are terrible. Added to my todo list.

Lance_Armstrong said:

For future generations
@-moz-document domain("e621.net") {
body:has(#user_css:has(option[value="hexagon,skin-pony"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-bloodlust"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-serpent"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-hexagon-clean"]:checked)) a:link {color: #063 !important; text-decoration: none;}

body:has(#user_css:has(option[value="hexagon,skin-hotdog"]:checked)) a:link {color: #248 !important; text-decoration: none;}
}

https://drafts.csswg.org/selectors-4/#relational

I should also note that if it's a link that's been visited then that has to be changed with "a:visited"
In page links aren't affected through the "a:visited", but anything that changes page is (the edit button for example).

Updated by anonymous

mccool37 said:
I should also note that if it's a link that's been visited then that has to be changed with "a:visited"

Don't use the code I put "For future generations" btw. It's how I would make it change based on the current theme... if CSS 4 was out.

Updated by anonymous

Lance_Armstrong said:
Don't use the code I put "For future generations" btw. It's how I would make it change based on the current theme... if CSS 4 was out.

Makes sense

Updated by anonymous

Lance_Armstrong said:
Don't use the code I put "For future generations" btw. It's how I would make it change based on the current theme... if CSS 4 was out.

Here's the formatting I have to get both standard and visited links and keep the individual colors for the different tag types (artist, character, copyright, and species):
@-moz-document domain("e621.net") {
a:link {
color:#AD0000 !important;
text-decoration:none;
}
a:visited {
color:#FF9000 !important;
}
.post-count {
color:#AAA;
}
.tag-type-artist>a,a.tag-type-artist,a.tag-type-1 {
color:#f2ac08!important;
font-weight:bold;
}
.tag-type-artist>a:hover,a.tag-type-1:hover {
color:#9093FF;
}
.tag-type-character>a,a.tag-type-character,a.tag-type-4 {
color:#0A0!important;
font-weight:bold;
}
.tag-type-character>a:hover,a.tag-type-4:hover {
color:#9093FF;
}
.tag-type-copyright>a,a.tag-type-copyright,a.tag-type-3 {
color:#D0D!important;
font-weight:bold;
}
.tag-type-copyright>a:hover,a.tag-type-3:hover {
color:#9093FF;
}
.tag-type-species>a,a.tag-type-species,a.tag-type-5 {
color:#ED5D1F!important;
font-weight:bold;
}
.tag-type-species>a:hover,a.tag-type-5:hover {
color:#9093FF;
}

Thank you for the help here.

Edit-added individual coloring for the different tags types. Without that they all change to the same color as what the link color is set to be. Colors can be changed individually for them.

Updated by anonymous