Forum:Replace the "Edit" pencil icon

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
Forums: Yew Grove > Replace the "Edit" pencil icon
This page or section is an archive.
Please do not edit the contents of this page.
This thread was archived on 23 February 2017 by Liquidhelium.

I would like to replace the bitmap pencil that appears next to the "Edit this page" button and section "Edit" links with an SVG icon. The current pencil is ugly and unrefined (imo) and does not scale well on devices with high-DPI displays; an SVG will stay sharp at all sizes.

Before After
.editsection {
    text-transform: lowercase;

.editsection .sprite.edit-pencil {
    background-image: none;
    content: url('pencil-color.svg');
    padding-right: 2px;
    width: 11px;
    height: 11px;
    vertical-align: 0;

.wikia-menu-button .sprite.edit-pencil {
    background-image: none;
    content: url('pencil-white.svg');
    width: 11px;
    height: 11px;
    vertical-align: -1px;


yeah sign me up --Iiii I I I 08:25, February 11, 2017 (UTC)

Comment - I know you like "!important" a lot, but (without checking) I doubt it's necessary. --Saftzie (talk) 08:51, February 11, 2017 (UTC)

ok. Do you have anything useful to say? --Iiii I I I 09:08, February 11, 2017 (UTC)
I was trying to be polite, so I'll say it more explicitly. Using "!important" is poor CSS. There are 3 limited times to use "!important":
  1. The HTML has an inline style that needs to be overridden.
  2. The "upstream" style sheet is poorly written to include an "!important" that needs to be overridden. (Really you should fix the upstream sheet not to require "!important" downstream, but that's not always possible.)
  3. A general-purpose wrapper is designed without knowing the detailed DOM structure to which it might be applied (e.g., plainlinks for external hyperlinks and plainlist for ol and ul are relatively common cases).
Otherwise, if you use the correct specifier, you don't need "!important". Conversely, if you think you need "!important," either you're wrong or you're not using the correct specifier. --Saftzie (talk) 21:42, February 11, 2017 (UTC)
My fault - turns out this specific browser extension was adding CSS to the user stylesheet, so the author stylesheet was taking precedence. Switched to another extension and it works fine without !important. --Iiii I I I 22:38, February 11, 2017 (UTC)

Oppose - The svg is the same colour as the word "edit", whereas the current pencil stands out more. Replacing it with an always-sharp svg version in the current colours would be better. User_talk:Fswe1 Fswe1 Brassica Prime symbol.png 10:55, February 11, 2017 (UTC)

How does yellow on white stand out more than dark blue on white? --Iiii I I I 19:47, February 11, 2017 (UTC)
The word "edit" is also blue (I wouldn't call it dark blue, but anyway) so the pencil doesn't stand out as much as it does now. User_talk:Fswe1 Fswe1 Brassica Prime symbol.png 08:35, February 12, 2017 (UTC)

Support - I like it. --dDbvitC.pngScuzzy Betahib8CAd.png 20:57, February 11, 2017 (UTC)

Support - Actually suits the page better than the yellow pencil currently in use pjJ4pBM.png Abyssal vine whip.png 22:10, February 11, 2017 (UTC)

Sign me up Scotty Fetus -  Panjy16  23:10, February 11, 2017 (UTC)

Mixed - same reasoning as Fswe1. SVG good, proposed color bad. Also when it's one color it looks nothing like a pencil, just a weird pointer. JacerPPC (talk) 14:54, February 12, 2017 (UTC)

I see your point(er) about the pencil not being recognizable, and I think it does look better after trying it in color. I've changed the screenshot above. --Iiii I I I 23:50, February 12, 2017 (UTC)
Looks good. The other one at the top of a page has not been changed, though. On purpose? User_talk:Fswe1 Fswe1 Brassica Prime symbol.png 09:49, February 14, 2017 (UTC)

Support - I like what you've got! GOOD JOB! Korasi's sword.png Archmage Elune  TalkHS Void knight deflector.png fetus is my son and I love him. 15:18, February 12, 2017 (UTC)

Comment - The second set of pictures looks basically identical... --LiquidTalk 04:43, February 14, 2017 (UTC)

Support - I think the new color version of the pencil does look cleaner than the original. Personally, I quite like the white pencil on the blue button. To me it reads pencil and not "weird pointer", and it is just a sleeker look in all one color. In either case, I think it is an improvement and I support.  RS AdvLogMyles Prower  Talk 19:07, February 15, 2017 (UTC)

Support - The current "Edit this page" is ugly af, and therefore it gets more attention with quick glance, which is good, maybe some visitor will get bothered about the colors and will click on it, and get hooked on editing, it takes only one button press. /s The new ones fits the style we have, and imo they look prettier. Go on fam. Lucky chaotic claw.png Metal Angel cut your wrists sample text 01:40, February 16, 2017 (UTC)

Support - svco4bY.png3Gf5N2F.png 17:34, February 17, 2017 (UTC)

Closed - Edit pencil will be replaced as proposed. By someone other than me, obviously. --LiquidTalk 02:49, February 23, 2017 (UTC)