I want to replace that close box with a close box of my own choosing (specifically, so I can make it Retina optimized). Where is that graphic located so I can swap it out?
Thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
The image is in the CSS – it’s easily overridden at the page level, since it is in an external CSS file. To figure out the selector, control-click on the close button and choose Inspect Element from the contextual menu. You will see that it is named #_closer. If you define a style with the Tag set to #_closer in your page, and add only these two attributes to it:
background-image: [choose your image in the Freeway interface]
background-size: cover
you will be all set. I believe background-size is now exposed in the Freeway interface, but if not, you can add it through Extended.
Walter
On Jan 28, 2016, at 9:21 PM, JDW email@hidden wrote:
I want to replace that close box with a close box of my own choosing (specifically, so I can make it Retina optimized). Where is that graphic located so I can swap it out?
For the love of Pete. It never fails that I come to Freewaytalk, type my message, then click SEND, only for the site to give me the “Welcome Back” message and cast all my typing into oblivion! Clicking the BACK button doesn’t bring back my post from the dead either. If there is one wish I have for this site, it would be PLEASE SAVE OUR POSTS!
In reply to what you wrote, Walter, I found a problem.
NOTE: If you see <> marks surrounding the URL in my code above, please note that is FreewayTalk doing that. Those marks are not surrounding the URL in my code. Strange.
I added the above code to the page’s HTML Markup, in the Before section. But when I preview in Safari, the old 72ppi close box remains in view. And when I then view the page’s HTML, I see the two errors shown in this screenshot:
The “Invalid CSS Property declaration” error seems to be on the code your ScriptyLightBox3 action generates. And the “Unexpected CSS Token” error is flagging my code.
So this indicates that my code is in fact NOT overriding your Action’s code, correct?
I did not use the Freeway UI to add my PNG file. I just made that 144ppi pic and manually uploaded it to the root directory of my site via the Transmit app. But that shouldn’t have anything to do with the errors we are seeing.
Further thoughts?
Thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I just tried your suggested code, Walter. But the 72ppi close box still shows (even after I restarted the browser), and the same exact 2 errors remain when I view the page HTML in Safari.
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Like I said, the first bit of code you see in my screenshot is nothing I created. I think your action is creating it. My code is shown lower in that same screenshot.
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I see a duplicate of the code I added in page Markup. But I assure you, that duplicate is NOT my doing. Freeway or your action is doing it. And yes, I restarted Safari and checked again.
–James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
ScriptyLightbox3 does not write any CSS into the page head. It uses an external stylesheet, linked from my CDN.
Dave is correct, you have some mangled CSS in there – you can’t nest one selector inside another in CSS. Not sure where it’s coming from, but I guarantee it’s not the Action.
Walter
On Jan 31, 2016, at 8:28 PM, JDW email@hidden wrote:
Correction, now I see 2 of the SAME ERROR when I use your suggested Code and then view the HTML in Safari, as shown here:
I see a duplicate of the code I added in page Markup. But I assure you, that duplicate is NOT my doing. Freeway or your action is doing it. And yes, I restarted Safari and checked again.
Okay, I finally fixed the duplicate. Not sure how it got there, but it’s gone now. Problem is, I’ve got one “Unexpected CSS Token” error remaining, flagging the following line:
background-size: cover;
I tried the following code too, but I get the same error:
background-size: 27px;
I am confounded by CODE!
James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
But I still get a stupid “Unexpected CSS Token” error on the “height” line. Deleting that line completely rids me of the error, but through it all, that 72ppi close box persist. I’ve never seen my 144ppi close box appear once. Not once!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I typed my message again and clicked SEND, only for this site to eat it!
!@#$%^&!
I am furious! I absolutely loath this forum for that reason.
Ahhhhhh!
Dave,
I’ve solved the problem. I grew weary of waiting for a solution here so I hacked Walter’s Action. That became easy after I learned what file carried all the magic — scripty_lightbox_3.css. I merely hacked that CSS file, put it on my server, then hacked the 2 instances in Walter’s Action that linked to that CSS file so they would link to my server, and then I updated the Action’s version number and installed it. Works great now.
I’ve no idea how to accomplish this in Freeway though. Again, the solution I used is an Action hack, but it works, so I am satisfied.
Hopefully, the Action will be updated in the future with Retina 144ppi graphics so the rest of you can benefit from it.
Best,
James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
In your initial attempts I think it would be likely that you would need to add the !important declaration to make sure the CDN style was being overwritten ie
An alternative method is to use a Media Query for Retina devices
<style type="text/css">
/* CSS for high-resolution devices */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#_closer {
background-image: url(http://www.kiramek.com/closebox144.png) !important;
background-size: cover;
background-repeat: no-repeat;
}
}
</style>
What didn’t help was that there was an error in my original code snippet
