Looking for user-style code to replace Scratch News icons

darkness3560

EDIT: Thanks for everyone's help! I managed to create a user style which should do the job! Find out more here.

Hi,
I'm not sure if this is the right place to post this, but I'm looking for user-style code (for the Stylish browser extension) to replace Scratch News icons. I made an alternative icon set and want to use it. Just give me the code, and provide placeholder links to replace with links to my icons. Thanks.

Last edited by darkness3560 (Nov. 14, 2013 02:51:39)

PullJosh

darkness3560 wrote:
Hi,
I'm not sure if this is the right place to post this, but I'm looking for user-style code (for the Stylish browser extension) to replace Scratch News icons. I made an alternative icon set and want to use it. Just give me the code, and provide placeholder links to replace with links to my icons. Thanks.

I think what you need is a userscript. It is like a userstyle, but it runs javascript in the browser.

scratchisthebest

PullJosh wrote:
darkness3560 wrote:
Hi,
I'm not sure if this is the right place to post this, but I'm looking for user-style code (for the Stylish browser extension) to replace Scratch News icons. I made an alternative icon set and want to use it. Just give me the code, and provide placeholder links to replace with links to my icons. Thanks.
I think what you need is a userscript. It is like a userstyle, but it runs javascript in the browser.

CSS does more than you probably think it does.

I'll try to write one soon

scimonster

scratchisthebest wrote:
PullJosh wrote:
darkness3560 wrote:
Hi,
I'm not sure if this is the right place to post this, but I'm looking for user-style code (for the Stylish browser extension) to replace Scratch News icons. I made an alternative icon set and want to use it. Just give me the code, and provide placeholder links to replace with links to my icons. Thanks.
I think what you need is a userscript. It is like a userstyle, but it runs javascript in the browser.
CSS does more than you probably think it does.

I'll try to write one soon

CSS doesn't change img src attributes.

Hardmath123

http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

scratchisthebest

Alright, try this.

/* First item */
.event-list li a img {
    content: url('FIRST IMG');
 }
/* Second item */
.event-list li + li a img {
    content: url('SECOND IMG');
 }
/* Third item */
 .event-list li + li + li a img {
    content: url('THIRD IMG');
 }

This will always change the first, second, and third items, which may be desired.

This will change images by their, well, image. You will need to know the image filename on the server - for example, that funky lightbulb icon is at http://media.tumblr.com/605ff02fcf1417aa1b80b7f5febdaf11/tumblr_inline_mw7q5b9m0n1rbvd1k.png (tumblr???)

img[src*="OLD IMAGE URL (use web inspector)"] {
  content: url("NEW IMAGE URL");
}

…however you will need all the image urls, and sometimes new ones are added.

Enjoy.

(by the way, those news images are about 50 - 53px square and anything bigger will probably explode)

Last edited by scratchisthebest (Nov. 14, 2013 01:22:39)

Discuss Scratch