glFusion Wiki

Site Tools


Theming Tools and Tips

Here are some tools and utilities that will help you develop and debug your theme.

Firebug (free)

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

Visit the Firebug website for documentation, screen shots, and discussion forums:

FireFTP (free)

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. It has the following features:

  • Cross-platform: Works on Windows, Mac OS X, Linux
  • Secure: SSL/TLS support, same encryption used with online banking and shopping
  • Synchronization: Keep directories in sync while navigating
  • Directory Comparison: Compare directory content (compares subdirectories too!)
  • International: Available in over 20 languages
  • Character Set Support:UTF8 and just about any other character encoding supported
  • Automatic reconnect and resuming of tranfers
  • Search/Filtering
  • Integrity Checks of transfers (XMD5, XSHA1)
  • Export/Import accounts
  • Remote Editing
  • File Hashing: Generate hashes of files (MD5, various SHA's)
  • Drag & Drop
  • Timestamp Synchronization
  • Proxy support
  • Advanced properties (CHMOD, recursive CHMOD, thumbnails)
  • Tutorials and help files available along with personalized support
  • IPv6 support
  • Open Source!
  • Seamless integration with Mozilla Firefox

Colorzilla (free)

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Notepad++ (free)

Notepad++ is a free mature source code editor which supports several programming languages and runs under the MS Windows environment.

Features include:

  • Syntax Highlighting and Syntax Folding
  • Auto-completion
  • Multi-Document
  • Multi-View
  • Regular Expression Search/Replace supported
  • Full Drag ‘N' Drop supported
  • Dynamic position of Views
  • File Status Auto-detection
  • Zoom in and zoom out
  • Multi-Language environment supported
  • Bookmark
  • Brace and Indent guideline Highlighting
  • Macro recording and playback

Here are some tools and utilities that will help you develop and debug your theme.

Weaverslave (open source)

Weaverslave is an open source, free, Windows 95/98/ME/NT4/2k/XP editor for HTML, PHP, CSS etc. It also integrates a file explorer and a color choser. It does not support UTF-8.

WebDeveloper (free/donationware)

The Web Developer extension for FireFox adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

The features are too numerous to list, but WebDeveloper, while overlapping some of FireFox/FireBug's functionality, does not conflict with it, and adds a number of additional and valuable browser/session control and display features.

WebDrive ($80usd)

OK, this one's not free, and no. this isn't an advertisement for the company that produces this product, but this is an extremely valuable tool to web developers.

As we all know, the WebFolders/WebDAV implementation is less-than-useful on XP and even Vista, and therefore we are often relegated to the use of tools like FireFTP, FlashFXP and other FTP-based mechanisms to post our content to our hosting provider. Most of the hosting providers out there support FTP, and now an increasing number of providers are also beginning to support WebDAV, which is a much more powerful filesystem interaction tool.

Regardless of whether you are using FTP, SFTP, or even WebDAV to interact with your hosting account, WebDrive integrates directly with your shell, presenting your hosting account file structure as a mapped drive in Windows. This allows you to interact directly with your remote filesystem just as if it were a local drive. WebDrive also maintains a local filecache, which makes it seemingly possible to immediately access the updated/created file immediately after you save it.

By using WebDrive with the 'preview' feature of your editor, this allows you to edit .php/.html/etc files, and preview the results immediately, while also saving the file directly to your hosting account.

See? I told you it would be useful. It's so useful, you may even want to consider shelling out the $80. If you're in 'the biz', this thing will pay for itself in the first week.

XRAY (free)

XRAY is a bookmarklet for Safari, FireFox, Camino or Mozilla. XRAY allows you to load any page, and then click on any of the elements of that page to see it's dimensions, properties, CSS inheritance, etc. etc. It's a 'quicker look' than opening FireBug for the page, this tool is focused only on the CSS/presentation layer.

Try it, you'll like it. Take two - they're small. Now run outside and play …

glfusion/development/themes/helpful_tools.txt · Last modified: 2017/04/12 21:13 (external edit)

Page Tools