============================================================================= IE STYLESHEET BROWSER v1.13 by John Carpenter Last updated 9 November 2001 ============================================================================= ----------------------------------------------------------------------------- SYSTEM REQUIREMENTS ----------------------------------------------------------------------------- - Microsoft Windows - Microsoft Internet Explorer 5 or above - Bradsoft TopStyle Pro (optional - but recommended) ----------------------------------------------------------------------------- OVERVIEW ----------------------------------------------------------------------------- This is an extension for Microsoft Internet Explorer versions 5. It allows you to right click and bring up a list of stylesheets used by the page. From this list you can view the code, open up the stylesheets with your registered CSS application, toggle whether they are enabled/disabled, change them and add in new stylesheets of your choice. Please note that this can also be used in applications that host Internet Explorer - such as HomeSite's "Browse" mode and HTML-Kit or TopStyle's "Preview" modes. ----------------------------------------------------------------------------- IMPORTANT - READ BEFORE USING ----------------------------------------------------------------------------- Please be warned that this extension is offered purely unsupported with absolutely no guarantee of any kind. You shold only attempt to install this stylesheet if you are happy to take the risk of modifying your registry. PLEASE do not blame me if your computer never works again after using this. ----------------------------------------------------------------------------- INSTALLATION ----------------------------------------------------------------------------- *** IMPORTANT - This has not yet been tested under Win9x at all. In WinNT/2000 this does work, but the uninstall does NOT even though it appears in Control Panel. *** - Unzip all files into the same directory - Right click "CSS_STYLESHEETS.INF" and choose "Install" - Optional - Delete the installation files from the original directory Menu options will be created in Internet Explorer in both the right click context menu and the Tools menu. NB: This will always install the files into the "web" subdirectory in your Windows folder. If you would prefer to install the files elsewhere, please see the "Manual Installation" section. ----------------------------------------------------------------------------- UNINSTALL ----------------------------------------------------------------------------- If using the "INF" file to install, you can uninstall the extension by using Windows Control Panel. It is listed as "List Stylesheets - IE Extension". ----------------------------------------------------------------------------- MANUAL INSTALLATION ----------------------------------------------------------------------------- This can be anywhere, including on a server. (You can also get to them using a full http URL). - Click START then RUN, type in REGEDIT and click OK - Go to HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer - You should see a key called "MenuExt" - if not it should be OK to just create it here. Alternatively, download the IE power toys or developer accessories from the Microsoft site. - Right click MenuExt - Click New then Key - Type in something like List Stylesheets then click OK - Double click the "Default" doodah on the right - Type in the full path to the attached file - Click OK. - Restart IE Note, this creates an entry in your Internet Explorer right click context menu only. ----------------------------------------------------------------------------- HOW TO USE ----------------------------------------------------------------------------- Right click a page of your choice and choose "List Stylesheets" (or whatever you have chosen as the caption). A new window will pop up containing a list of all stylesheets - linked, imported and embedded - contained in the current web page. Please note that refreshing the stylesheet browser or closing/refreshing the source HTML document may impact the functionality of this page. As such it is recommended that you do not refresh and do not close the source HTML file whilst using this extension. VIEWING THE STYLESHEET DEFINITION Click the "+" symbol or the name of the stylesheet to expand or collapse its definition. Please note that this is the definition as parsed by Internet Explorer and not necessarily the actual code that appears in the source. Missing or incorrect definitions and comments will probably not be displayed at all and the formatting is also changed. Also, IE seems to expand shorthand properties - eg "border: 1px solid #000000" becomes "BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;" VIEWING THE ACTUAL STYLE CONTENT For linked or imported stylesheets, click "Open File" to view the actual file in your registered CSS editor. For best results, install the excellent TopStyle Pro before using this - please see http://www.bradsoft.com/topstyle/ for more information. This option opens up the actual stylesheet so will preserve the formatting, comments and invalid definitinos. COPY TO CLIPBOARD Click "Copy to clipboard" to copy the content of the stylesheet into the Windows clipboard. Note this copies it in the Internet Explorer parsed version. This is useful if you wish to paste it into a CSS editor such as TopStyle. CHANGING THE STYLESHEET Click "Change" and type in the URL of a stylesheet. The listed stylesheet will be changed to incorporate this new version. (Note you must click "Refresh Page" to update to see the updated code definition and list of imported stylesheets.) Note that this feature does not actually change the HTML page or the CSS file. If you change the stylesheet and refresh the source page, these changes will be lost. EDITING A STYLESHEET DEFINITION Click "Edit" and a layer will pop up displaying all selectors and rules currently found in the stylesheet, as well as the current values. To edit a value, just type in a new one in the textbox - the change occurs as soon as the textbox loses focus. To get rid of the layer, either click "Close" at the top or click the whitespace to the left or right of the layer. (Note this will change the CSS definition shown when you expand the block) Click the "+" and "-" on the left to expand and collapse a selector's rules, or use the "Expand All" and "Collapse All" toolbar buttons. Click "Add Rule" and double click a rule to add in a new rule to the current selector. Click "Add Selector" and type in the name of a new selector (eg "a:hover") and click OK to add in a new selector. ENABLING/DISABLING THE STYLESHEET Each style block can either be "Enabled" or "Disabled". This status is shown against each style block in the list. Click this status to change it. You can also use the "Enable All" and "Disable All" buttons at the top of the page to affect every style block. ADD A NEW STYLESHEET Click "Add File" at the top of the page, type in the URL of a stylesheet and click OK. The stylesheet will then be attached to the main document and added to the list. When you expand the stylesheet, the page is refreshed and you will be able to see the code of the new stylesheet. (Note please ensure that the stylesheet has finished loading first!) This will also display all imported stylesheets. Click "Add Block" to add in an empty style definition. This will automatically bring up the NEW SELECTOR box. Type in the name of a selector to get your new stylesheet going and click OK to view the EDIT STYLESHEET list. REFRESHING Click "Refresh" to recreate the browser view. If you have changed an existing style definition then this will show any new imported stylesheets and will update the code definition. Note that this automatically occurs when expanding a stylesheet added with the "Add Stylesheet" button. CLOSE WINDOW Click the "Close" button to... you guessed it... close the window. ----------------------------------------------------------------------------- REVISION HISTORY ----------------------------------------------------------------------------- VERSION 1.13 * When adding a new rule, the text box now gets focus * Height of textarea increased * "Open File" now works properly if the stylesheet was @imported from an embedded style block. * Edit rule value could bring up a javascript error if you entered something invalid * Fixed small graphical glitch in Add Rule popup title bar VERSION 1.12 * Edit Style Sheet Changes: - Add Selector - Add Rule - Expand/Collapse selectors - Expand All/Collapse All options (defaults to all collapsed) * When a new stylesheet is added, the "enabled" checkbox now works * Truncated captions on toolbar buttons for more graceful resizing * A couple of little bits added to the status bar * If there is only one style block, it will be expanded by default when the browser loads or is refreshed VERSION 1.11 * Option to edit an existing style block * Removed the message box that appears when you copy to clipboard * Enabled is now a checkbox not a link * HTML encoding bug fixed (< and > were the wrong way round! Duhh) * When browsing a page with no stylesheets, you are now given the option to view the stylesheet browser anyway - this allows you to add in stylesheets if you wish. * Hopefully Javascript errors that occur when the source document is closed have now been removed. VERSION 1.10 * Change an existing stylesheet * Add a new stylesheet * Add a blank style block * Enable/disable a stylesheet * Enable/disable all stylesheets * Refresh option * Style definition is now shown in a textarea * Installation script and readme file * A few cosmetic tweaks ----------------------------------------------------------------------------- OUTSTANDING ISSUES (or bugs as they're sometimes known) ----------------------------------------------------------------------------- * Installation - Uninstalling from Control Panel does not work in NT4/2000 * "Add rule - Could not find undefined" bug.. sometimes occurs but haven't yet been able to pin it down. * Stylesheet paths will be incorrect if using REFRESHING ISSUES Clicking "Refresh Page" in the toolbar fixes the following problems. Similarly, when you expand an added stylesheet file this also refreshes the page) * Changing a stylesheet - The code block is not updated - Stylesheets imported into the old stylesheet are not removed - Stylesheets imported into the new stylesheet are not displayed * Adding - "Copy to Clipboard" is not shown - Imported stylesheets are not shown ----------------------------------------------------------------------------- OTHER THINGS TO DO ----------------------------------------------------------------------------- * Add selector - ask for 1st rule at same time as typing new name * Cache edit list...? * Option to view all classes/IDs + view which elements in page use them * Support for "!important"..?? ----------------------------------------------------------------------------- ACKNOWLEDGEMENTS ----------------------------------------------------------------------------- Thanks to Nick Bradbury for help, encouragement and for Topstyle. Thanks also to Steve Fulton and Liam Quinn for their help in creating the installation script. At some point, I am hoping to create a little web site for this, but until then, Don S has kindly been placing the latest version on his excellent site, The HTML Learning Corner (http://www.nodntap.com). So for the latest version of this browser, please have a look here: http://www.mrgrieves.com/cssbrowser/