Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.

Load in Stylish button for my own site?

edited January 2009 in Stylish
Hi,

I was wondering if anyone could tell me how to replicate the Load in Stylish button used on Userstyles, or something similar....

I'm working on my onw personal space, so i'm going to host my styles there for times when Userstyles is down, which seems to be quite regular unfortunately, out of memory errors etc.... (no offense intended by the remark)...

Can anyone provide some code to do it, HTML, JS, or PHP.....i could just try and pull the code from userstyles pages (possibly), but i'd prefer not having to do that if possible...

Can anyone help?... I searched, and did not find anything...

I have a mysql database running and i can write custom tables/rows for it if necessary...
«1

Comments

  • edited January 2009
    Can anyone provide some code to do it, HTML, JS, or PHP.....i could just try and pull the code from userstyles pages (possibly), but i'd prefer not having to do that if possible...
    the code seems fairly easy to implement stylish-install.js then search for stylishInstall(event)
    you'd also need to add your domain to extensions.stylish.install.allowedDomains

    edit: or you could just host plain css files
  • edited January 2009
    Ok, so if i grab the JS and use Load into Stylish

    That should in theory give me a working solution with exception that it won't work until stylish has had the domain set in the users Firefox via...
    extensions.stylish.install.allowedDomains

    Ok so bearing that in mind, do you know if it would be possible to create a "Update allowed domains in Stylish" button.

    That way i can give the user a way to update the allowed domains, which removes the need for them to use about:config.... etc... as not everyone will feel comfortable doing it. Where as a simple button that does the job seems much more friendly...

    More importantly will firefox allow a button on a webpage to envoke the update to the allowed domains?

    T I A... ;)

    EDIT:: Didn't expect that button to show up, but hey.... still relevant... :-)
  • i'd assume the answer is no as it would be a pretty big security risk
  • Got as far as getting a show and load button, and had the show button working, but now the page hangs whenever i click either...

    Are there any examples of creating your own buttons for loading into stylish?
  • none for stylish that i know of. i don't know much of js, but i'll try messing around later
  • The JS file does look like it's calling quite alot on the page load....

    I'm just getting... "Sorry, an error occurred loading the code." when i click a button....

    I've allowed both mydomain.co.uk and www.mydomain.co.uk to be sure, tried both individually to...

    As far as i can tell the problem is related to the callback or one of the listener events, but the error console reports the same 2 errors shown on working pages here at userstyles, which of course works...

    There are one or 2 websites about that claimed to have working style buttons, but adding the domains and trying their buttons had the same effect, error loading the code..... as said, i'm adding the domains and testing them individually but Userstyles is the only site where the buttons seem to work for me...

    I must be missing something simple...
  • Gimme a link to a test page and I'll take a look.

    In addition to the JavaScript, you need to reference the elements that have the code, etc.

    <link rel='stylish-code' href='#stylish-code'/> <link rel='stylish-description' href='#stylish-description'/> <link rel='stylish-md5-url' href='http://userstyles.org/styles/96.md5'/> <link rel='stylish-update-url' href='http://userstyles.org/styles/96.css'/> <link rel='stylish-install-ping-url' href='http://userstyles.org/styles/install/96'/>

    I think only the code one is required.
  • Hi Jason,

    I've tried all sorts to get this working, including the above.... and i've been chopping and fiddling with code all over...

    I've tried hosting the JS, and linking to the one here (for testing sake).

    I'll create a fresh page with the code and post a link. I'm working inside wordpress.

    Tried including the JS inline, externally, in the wordpress JS folder, in the same directory and my template files. I've used the link references and tried without....

    www.t31os.co.uk is my site......

    There's only 1 page with any code for the button at the moment, and that's all over the place right now.... so i'll re-write the code and post a link....

    Thanks for your help...
  • edited January 2009
    Ok i've posted one of my styles here....

    http://www.t31os.co.uk/?p=20

    The JS is in the wordpress JS folder and linked to inline like is done here...

    CSS styles exist as here, tell me if i missed anything...

    Domain is allowed (seperated by a space in about:config line)...

    Link relationship has been plonked into my header file for the moment and points to that one style, obviously i understand these are unique to each style, but for testing i'd think we can use the links for that style.

    <link rel='stylish-code' href='#stylish-code'/> <link rel='stylish-description' href='#stylish-description'/> <link rel='stylish-md5-url' href='http://userstyles.org/styles/13937.md5'/> <link rel='stylish-update-url' href='http://userstyles.org/styles/13937.css'/> <link rel='stylish-install-ping-url' href='http://userstyles.org/styles/install/13937'/>

    As you can see all the stylish options also still show on the page...

    I havn't done so yet, but i can test this on a local install also if required. I can't see Wordpress being the issue, but it's always possible... I have a local server (WAMP style) that i can test on if necessary...
  • OK, you're making this more complicated than it needs to be. My pages have special JavaScript to load the CSS dynamically with an XHR. You just have it on the page. You can remove the showCode and stylishInstall functions and rename stylishInstall2 to stylishInstall. There's other stuff you don't need in there, but that should get you going.
  • Sorry not too familiar with JS so wasn't quite sure what could or couldn't go....

    I'll remove those and see how i get on, however i had noticed the CSS was being grabbed dynamically. I assume when you say the CSS you also mean grabbing the actual style content which is stored as a CSS file?.... i just wanted to make it work first, and plonking it in the page seemed the easiest.

    Will post back if any problems... thanks..
  • edited January 2009
    So like this?....

    * removed - no longer need (removed by t31os)

    Though i can see i don't need the edit function because i can do that directly in the Wordpress post.....
  • edited January 2009
    Ok, load in stylish now works ... Yippee!!! :-)

    However one small problem, the show/hide button has disappeared....

    EDIT: Fixed the button, but i understand why it produces an error, because you have your styles stored as CSS files...
    http://userstyles.org/styles/13937.css - as an example...

    So the script is looking for the same with me, and it doesn't find one...

    If i could plonk some Wordpress script into the JS i could have the script check a custom field of the Wordpress post and store my style's code there..... , i'd then grab the code for the page in the same way... just by displaying the content of the custom field...

    At least it works anyway, i'll be fine, i'm sure i'll figure something out.....

    Thanks for the help.... most appreciated... ;-)
  • The only reasons you may want to store the code in a separate file is to save on bandwidth when people visit but don't install (important for me because some styles are huge) or if you want to allow updates. If you don't care about this, having the code in the page will be the simplest.

    And yes, you're correct, you don't need the edit function, that's specific to userstyles, not Stylish. Nor do you need the context ads portion, the loadCode, or getId functions. toggleCode is only for the showing/hiding of the code, it doesn't affect install. Once you take that stuff out, you'll see that things look a lot simpler.
  • edited January 2009
    Going in circles here....

    Had it working yesterday, great.... decided to get the custome field up and running, again great this worked. However upon moving the style content i noticed that the Load in Stylish button although causing the Stylish window to appear, the window was empty...

    So i moved code back, start testing again and low and behold whenever i click Load in Stylish i just an empty style...

    So i thought, must be something i've done to JS, so i copied it again, removing the same as last time, but still no style content when clicking the Load button.

    I've been playing with the JS all morning, and still baffled as to why the style always now loads empty...

    Here's what it has now after me playing around this morning, it works with exception to the style being empty upon click (i'm wanting to keep the Show/Hide code button).

    * removed - no longer need (removed by t31os)
  • edited January 2009
    Ok figured out the issue....

    It's only grabbing the code when the following line is present, else the code is not loaded...

    <link rel='stylish-update-url' href='http://userstyles.org/styles/13937.css'/>

    I'll keep playing... :)

    Must say after doing a bit of googling for some get element info i have a slightly better grasp of the JS being used...

    If anyone is reading this thread and is looking to do the same on their site, just pop a message in this thread and i'll post my code for you to use, obviously you'd need to modify it.... as i've removed the previous un-working code from my posts...
  • Really, it requires the update url? I should probably fix that.
  • Yeah, i was still using the some meta tags but removed a few thinking i could get away with it, but adding the update-url meta seemed to resolve the code being missing, i added them back one by one, and that was the trigger to get the code appearing....

    I've left it in, but switched the URL to "".

    I'm assuming however the JS could be modded to work around this issue, or is it a problem on the stylish side?

    Not fussed too much, it's working (again) now.... :)
  • Probably something within Stylish.
  • Thanks for the help...

    I think i can get by with 1 line of code extra... :-)
  • Try this out, let me know if it still requires the update thing.
  • Hi mate, what's the installer for?
  • New version of Stylish to see if you still need the update meta element.
  • edited February 2009
    I'm using the 1.0a from your other thread.....

    Is this a newer version?, link says 0.5.9, so that's what confused me....

    Am i confused and actually running both?

    EDIT: Installed it anyway, want to pop back on the older version for now.
    I'll remove the meta tag and let you know if the same occurs..
  • This is an update to 0.5.8. I'll release this soon if it works out for you. 1.0a is something that will be released longer term.
  • Ok, that's cool, i'll stick with this one for now, prefer the old manager for installs...

    Thanks...
  • Fixes the meta issue, can now load styles without the need for the update URL...

    Apart from that i can't see any difference visually between 0.5.9 and 0.5.8.

    I'll add it back for now though, as there's no telling what version of stylish a user may be on, it's easier then ensuring they update....

    All working great now though, i've got a few bits to change, but for now i'm storing the Style content and description in Custom Fields in Wordpress... i then perform a check when the user is viewing the page to see if they're viewing a Stylish post, and if so include the JS and the meta....

    Thanx again.. ;)
  • How do i create a Load in Stylish page? I have css files in the same directory, i changed the stylish-install.js (var parts = url.split("directory/");) and i changed the stylish-update-url. I have two problems, i can't see a Load in Stylish button, i see: "Get Stylish etc" but i have Stylish, so i don't know what's causing this. Secondly, when i click Load into stylish (swapped the stylish-not-installed with stylish-install) i can see it requests the correct css file but it doesn't do anything with it.
  • If you provide a link to your page, I'll look at it.
  • edited May 2009
    Posted By: Jason Barnabe (np)If you provide a link to your page, I'll look at it.
    link
Sign In or Register to comment.