C26000

Hi, my problem is not exactly related with Extension development but I think that you can help me, my problem is that I want to implement CSS Skins in IE7 (skins for sites like deviantart, last.fm , facebook, etc ), but I haven't been able to do it without requiring the image uploaded in a webhost , and I really need this requirement since I'm planning to make th skins widely avaliable and I can't afford a pay image hosting site or the trouble of having the images banned from the free hosting providers for excessive usage

I already implemented it in firefox and Opera, take a look at this group (http://www.last.fm/group/Last.fm+CSS+Color+Changer) in last.fm and this(http://www.last.fm/group/Last.fm+CSS+Color+Changer/forum/30401/_/154000/3#f4852613) post, using the Data: URI Scheme, but I tried to use this simple IE7Pro script


// ==UserScript==
// @name Last.fm Test CSS Skin
// @namespace namespace
// @description Last.fm Test CSS Skin
// @injectframes 1
// @include http://*.last.*/*
// ==/UserScript==

(function(){

var cssStyle = 'Body{background[:#]B0A386 !important;} #LastHeader {color: #151415 !important;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAABBCAYAAAD2ZAWhAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAANFJREFUOE/t0r+LwQEcxvHHfyPy4+vn149/QkrqBulSpCRJIncYqDvLLcpgUQaDwaBkMChJXR1XN5kkf8fjNk8Z/AM+9Vre46fH8hazEnrNuI0K3YSNCr2knQpfL3Yq9FMOKgzSTioMX11UGGVcVBhn3VSY5NxUmOYNKswKBhXmRQ8VFiUvFZZlHxVWFR8V1lU/FTa1ABW2dT8Vdv9B4bsRoMLPe5AK+6ZJhUMrRIXflkmFv7ZJhWMnTIXTR4QKl16U6j6cP6NUeIbnP26TeDyHK/mOh6IKyHzZAAAAAElFTkSuQmCC) top left repeat-x #E38B3C !important;}';

PRO_addStyle(cssStyle, document);
})()

But IE7 doesn't recognize the data: URI scheme, I also tried to load local files from the CSS using File:\\ :, like this:

.... !important;background: url(File:\\C:\users\david\appdata\locallow\IE7Pro\SI3967list.gif) top left repeat-x #E3....

but it doesn't work either, IE7 says something about and hexadecimal code expected, my question is: do I have some other alternative to provide site skinning without needing the images hosted in a webserver or this is impossible to do with IE7

thanks for any guidance in this problem.



Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

IECUSTOMIZER

Hi,

The best you can do with IE(I think, anyway) is to package your stylesheets and images into an installer that saves the stylesheet and images to a folder on the local disk and then sets the UserStylesheet setting in the registry to point to the stylesheet.

see http://www.iecustomizer.com/ url=iethemes/ cboCategory=Textures

In your stylesheet you specifie those classes that can be found on your target sites or if you want a specific stylesheet to be used when a user navigates only to specific site you would have to create a BHO that will detect the site and replace the local stylesheet for the webs external stylesheet links. Inline style attributes are un-effected by the UserStylesheet setting, so your BHO could also substitute inline style attributes.

Here is a tool I made to explore how user settings can effect web page layouts.

http://www.iecustomizer.com/ url=IEStyles_Download.asp

The point of this exersize is to point out that what a Web designer designs is not necessarily what a user will see, the User is King, and KISS is best. (look at the styling used by Google, why is it so popular )

Regards.

Get in contact with me if you want to post some of your stylesheets on my site. (see Profile)






Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

IECUSTOMIZER

Hi,

I forgot to mention that Firefox will render a page using the IE UsersStylesheet setting when the IETab extension is used. Netscape (12) has the IETab extension built-in. In both you can specify a sites list that are to use the IETab extension, and Opera has a user setting to use a local stylesheet. All MSIE browsers - Maxthon, AOL, GreenBrowser, GoGo, Avant, VS Dev Environment, Outlook and other Office apps using a web view, also will use the UserStylesheet setting when rendering HTML content.

Regards.






Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

C26000

Thanks for your reply.

when you say to 'set the UserStylesheet setting in the registry to point to your stylesheet' does it has the same effect than Tools> General Tab > Accesibility > User Stylesheets, and select there manually the CSS file

you are right about needing something like a BHO to implement this, sadly I probably can't do it, I don't know enough knowledge about IE programming Sad I thought that something like that already existed...

That BHO approach that you are talking about would allow to change the CSS file before the site starts loading , I ask this because the IE7Pro script approach only apply the user stylesheet after the page has loaded completely, obviously this is not desirable because if you have a black skin and the site is originally white (like last.fm) you will end up white and then quickly changing to black and the effect in your eyes is very unpleasant.





Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

IECUSTOMIZER

Hi,

1. Yes

2. Yes - You can redirect the stylesheets downloads to a local file as they are being requested.

A UserStylesheet does not have to apply a style to all tags, Ids or classes. If you know the classes and Ids of say facebook.com and they are unique to facebook.com then when facebook.com is loaded only those style attributes will be sourced from the local UserStylesheet.

There are other Internet Settings that alter the appearance of web pages. See my Styles Manager utility. Use Windows Colors, Ignore colors specified on web pages, Ignore font sizes specified on web pages, Ignore font styles specified on web pages and default web page fonts.

Look at customizable homepages like myspace or google/ig. They use client or session cookies to allow users to customize the page appearance.

If you want to apply a corporate branding to an intranet you would typically use an external stylesheet. Rebranding is easily achieved by just changing the stylesheet.

Regards.






Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

C26000

thank you very much it actually works perfect using local images in the css, I thought that this wasn't possible to do with IE because firefox don't allow it. do you know if I can add certain rules to the css file to avoid the custom css being applied to every site that I visit, or the only way to achieve that is with a BHO addon





Re: Internet Explorer Extension Development Use CSS Site Skins With IE7

IECUSTOMIZER

BHO only unless the site has unique class names or Ids for its element tags, then you can use a UserStylesheet that only has custom styles for those classes and ids.

For the BHO you will have to inject your custom stylesheet into the document and probably disable the existing stylesheets.

Heres a button snippet that toggles the stylesheets in a document.

var i,x;
var parentwin = external.menuArguments;
var doc = parentwin.document;
x = doc.styleSheets.length - 1;
for(i=0;i < x;++i)
{if(doc.styleSheetsIdea.disabled)
{doc.styleSheetsIdea.disabled=false;}
else
{doc.styleSheetsIdea.disabled=true;}
}

So you will have to manipulate the styleSheets collection to add your custom stylesheet and disable the rest.

Regards.