Userscript, to replace icons on Stack Exchange pages, spams background images where the icons should be
I'm trying to write a user script to fix the problem that highlighted editor icons have the wrong colour in the new Stack Exchange design (at least on sites which use a different primary colour, such as tex.stackexchange, described in more detail in https://meta.stackexchange.com/a/317581/237989)
I tried the following code
// ==UserScript==
// @name StackExchange TEX, adjust css
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button{
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
but this results in
css userscripts tampermonkey
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
migrated from superuser.com Nov 20 '18 at 19:17
This question came from our site for computer enthusiasts and power users.
add a comment |
I'm trying to write a user script to fix the problem that highlighted editor icons have the wrong colour in the new Stack Exchange design (at least on sites which use a different primary colour, such as tex.stackexchange, described in more detail in https://meta.stackexchange.com/a/317581/237989)
I tried the following code
// ==UserScript==
// @name StackExchange TEX, adjust css
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button{
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
but this results in
css userscripts tampermonkey
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
migrated from superuser.com Nov 20 '18 at 19:17
This question came from our site for computer enthusiasts and power users.
add a comment |
I'm trying to write a user script to fix the problem that highlighted editor icons have the wrong colour in the new Stack Exchange design (at least on sites which use a different primary colour, such as tex.stackexchange, described in more detail in https://meta.stackexchange.com/a/317581/237989)
I tried the following code
// ==UserScript==
// @name StackExchange TEX, adjust css
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button{
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
but this results in
css userscripts tampermonkey
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
I'm trying to write a user script to fix the problem that highlighted editor icons have the wrong colour in the new Stack Exchange design (at least on sites which use a different primary colour, such as tex.stackexchange, described in more detail in https://meta.stackexchange.com/a/317581/237989)
I tried the following code
// ==UserScript==
// @name StackExchange TEX, adjust css
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button{
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
but this results in
css userscripts tampermonkey
css userscripts tampermonkey
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
edited Nov 20 '18 at 20:26
Brock Adams
68.3k14155213
68.3k14155213
asked Nov 20 '18 at 18:01
samcarter
15018
asked Nov 20 '18 at 18:01
samcarter
15018
asked Nov 20 '18 at 18:01
samcarter
15018
15018
migrated from superuser.com Nov 20 '18 at 19:17
This question came from our site for computer enthusiasts and power users.
migrated from superuser.com Nov 20 '18 at 19:17
This question came from our site for computer enthusiasts and power users.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Note:
That script is styling the wrong node. The page source (Link to typical example) is like:
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
<span style="background-position: -80px 0px;"></span>
</li>
So, nominally, you would style
.wmd-button > span, But...
You want to play nice with other brilliant scripts/extensions (Example), so use
.wmd-button[id] > spanto reduce side-effects.Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.
So your script would become:
// ==UserScript==
// @name Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button[id] > span {
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it isstrike, ordelor whatever.
– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400030%2fuserscript-to-replace-icons-on-stack-exchange-pages-spams-background-images-wh%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Note:
That script is styling the wrong node. The page source (Link to typical example) is like:
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
<span style="background-position: -80px 0px;"></span>
</li>
So, nominally, you would style
.wmd-button > span, But...
You want to play nice with other brilliant scripts/extensions (Example), so use
.wmd-button[id] > spanto reduce side-effects.Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.
So your script would become:
// ==UserScript==
// @name Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button[id] > span {
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it isstrike, ordelor whatever.
– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
add a comment |
Note:
That script is styling the wrong node. The page source (Link to typical example) is like:
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
<span style="background-position: -80px 0px;"></span>
</li>
So, nominally, you would style
.wmd-button > span, But...
You want to play nice with other brilliant scripts/extensions (Example), so use
.wmd-button[id] > spanto reduce side-effects.Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.
So your script would become:
// ==UserScript==
// @name Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button[id] > span {
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it isstrike, ordelor whatever.
– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
add a comment |
Note:
That script is styling the wrong node. The page source (Link to typical example) is like:
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
<span style="background-position: -80px 0px;"></span>
</li>
So, nominally, you would style
.wmd-button > span, But...
You want to play nice with other brilliant scripts/extensions (Example), so use
.wmd-button[id] > spanto reduce side-effects.Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.
So your script would become:
// ==UserScript==
// @name Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button[id] > span {
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
Note:
That script is styling the wrong node. The page source (Link to typical example) is like:
<li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
<span style="background-position: -80px 0px;"></span>
</li>
So, nominally, you would style
.wmd-button > span, But...
You want to play nice with other brilliant scripts/extensions (Example), so use
.wmd-button[id] > spanto reduce side-effects.Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.
So your script would become:
// ==UserScript==
// @name Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match *://tex.stackexchange.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.wmd-button[id] > span {
background-image: url("https://svgshare.com/i/9T3.svg") !important;
}
` );
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
answered Nov 20 '18 at 20:21
Brock Adams
68.3k14155213
68.3k14155213
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it isstrike, ordelor whatever.
– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
add a comment |
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it isstrike, ordelor whatever.
– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
1
1
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
And again your are my hero! Thanks a lot! About 2. You are totally right, I would not want to break such a brilliant script by such a great author :) 3. In reality I just have my files locally for my own use, but in order to make a short transportable example, I replaced them by the svgshare link, but thanks for your concerns!
– samcarter
Nov 20 '18 at 20:30
1
1
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
You're welcome; glad to help.
– Brock Adams
Nov 20 '18 at 20:37
1
1
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it is
strike, or del or whatever.– samcarter
Nov 20 '18 at 20:43
Actually I have to thank you one more time: thanks for mentioning the kbd script - I just installed it and especially the strike through button is a fantastic idea! I tried a million times to remember the syntax, but I'll always confuse myself if it is
strike, or del or whatever.– samcarter
Nov 20 '18 at 20:43
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
@samcarter glad you like it -- and that you haven't asked me to change the hover color ;) .
– Brock Adams
Nov 20 '18 at 20:47
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
Luckily your code is much easier to read than the code from stackexchange, so finding the orange was no problem :)
– samcarter
Nov 20 '18 at 21:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400030%2fuserscript-to-replace-icons-on-stack-exchange-pages-spams-background-images-wh%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
