turlough: Frank Iero asking a question, art by theopteryx ((mcr art) excuse me?)
[personal profile] turlough posting in [community profile] pinboard
I've almost finished updating my Pinboard userstyle but I've run into a problem I don't seem to be able to solve myself. Almost certainly because I'm completely self-taught when it comes to CSS (and know nothing about javascript). It's particularly annoying since everything else is fixed so if it wasn't for this I could already have posted the update version.

What I'm having problems with is #show_all_link and show_unbundled_link on the Editing Tag Bundle page. I'm sure there must be some very simple way to get the highlighted variable to show the colour I want and not the site's colour choice, but I can't for the life of me figure out how. I can't find anything about it in the site CSS and the info I get from Webdeveloper is incomprehensible to me*.

If anyone knows how to code this, please, please, PLEASE tell me!!

* What does onclick = tp.filterByProperty('unbundled');unhilight('show_all_link');hilight('show_unbundled_link'); mean?? And how can I apply it to CSS??

ETA at twenty minutes past ten the same evening: [personal profile] murklins came to my rescue! It is indeed all due to a bit of javascript so if I want to be able to style that element I need to mail maciej about it.

ETA at twenty minutes past eleven the same evening: [personal profile] murklins is a complete darling and managed to work out a way to make CSS work for this!

Date: 2012-08-19 06:54 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
If you want custom colours on those two links, I think you might need to poke maciej for a tiny code change.

The functions unhilight and hilight are defined in the code like so:

function hilight(v)
{
    node = Pin.Node.get(v);
    node.style.background = '#ffffaa';
}
function unhilight(v)
{
    node = Pin.Node.get(v);
    node.style.background = '#fff';
}


The part that is messing you up are the bits with "node.style.background = '#ffffaa';" and "node.style.background = '#fff';" -- anytime you click either link, those functions get called and those pieces of the code jam those inline background colours right on the links themselves. But if your css is overriding those colours, like with #show_all_link{ background-color: red!important;}, then the highlighting code will still be in effect but the inline colours being applied by the javascript will have no effect, because your !important is overriding them.

Perhaps he could change things so that the functions instead add/remove or just change a style class? Then the class colours could be customized and the colours wouldn't have to be applied inline.

Date: 2012-08-19 08:36 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
Oh, hey, I did think of a way in CSS to maybe make it work? I am pretty terrible at CSS (I used to be ok... in 2001, but it's kind of changed since then and I can't keep up at all) but I think now in a lot of browsers you can select elements based on the contents of any attribute, right? So you should be able to pick out which link actually has that #ffffaa colour applied to it, and then replace that colour:

#show_all_link[style*="#ffffaa"]{
background-color: red!important;
}

#show_unbundled_link[style*="ffffaa"]{
background-color: red!important;
}


Might work, might not, worth a shot while you wait for maciej to change the code?

Date: 2012-08-19 08:42 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
Or this version might work better (according to my test with Stylish in FF 14.0.1):

#show_all_link[style*="rgb(255, 255, 170)"]{
background-color: red!important;
}

#show_unbundled_link[style*="rgb(255, 255, 170)"]{
background-color: red!important;
}


Didn't work entirely, since when the page first displays neither link gets highlighted, but when I click either link, the new red highlighting kicks in.

Date: 2012-08-19 08:52 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
Aaaaand, this is my best version so far! It sets up the show_all_link to default to the new highlight colour (red in this example code), then uses css selectors to override that when inline colours are applied, allowing a flip between red and white.

#show_all_link{
background-color: red!important;
}

#show_all_link[style*="rgb(255, 255, 170)"]{
background-color: red!important;
}

#show_unbundled_link[style*="rgb(255, 255, 170)"]{
background-color: red!important;
}

#show_all_link[style*="rgb(255, 255, 255)"]{
background-color: white!important;
}

#show_unbundled_link[style*="rgb(255, 255, 255)"]{
background-color: white!important;
}


But I cannot guarantee it will work in many browsers? Have no idea how well this kind of selector is supported, and also other browsers may not use the rgb() colour notation style when they embed inline styles... so the actual practical application of this may be very limited. But I had fun!

Date: 2012-08-19 09:32 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
But the first one needs to use white!important, not red.

Oops. Um, details! :)

Re: the rgb() notation, it's not so much whether it's supported or not that concerns me (although that is of course important!), it's more that in maciej's code, he specifies "node.style.background = '#ffffaa';" but when my version of Firefox actually applies that style rule to the link, it uses "background: none repeat scroll 0% 0% rgb(255, 255, 170);". So who knows what other browsers might do -- keep the #ffffaa notation, shorten to #ffa, switch to rgb(), etc? So it's definitely a good thing this is a Stylish style that only needs to work in FF. :D

Date: 2012-08-19 09:58 pm (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
I probably went with defaulting the show_all_link to highlighted because it does that with the original styling, but yeah, you get to choose. Looking forward to seeing the finished style!

Date: 2012-08-21 06:40 am (UTC)
murklins: white woman with elephant head (Default)
From: [personal profile] murklins
Oh my gosh, so rounded and pretty! <3

Profile

pinboard: A white silhouette of a pushpin against a shiny blue background (Default)
Pinboard Users on Dreamwidth

September 2014

S M T W T F S
 123456
78910111213
141516 17181920
21222324252627
282930    

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 21st, 2017 12:06 pm
Powered by Dreamwidth Studios