The WordPress Support Forum get questions every day for help on how to tweak this or that part and piece on user’s WordPress Themes. Do you want to know the secret behind successful editing and designing of your WordPress Theme?
Isn’t Firefox just an Internet browser? Yes, it is, but it is also so much more.
Why Aren’t You Using Firefox?
Let’s get something out of the way first. If you are still using Microsoft Internet Explorer – fine. It’s good enough for most website viewing and browsing. But if you want to do more, if you want control over your browsing options, if you want the ability to view multiple pages at the same time without clogging up your desktop, if you want fingertip access and control to a wide variety of functions and features that make Internet browsing a delight, then install Firefox.
You can install Firefox on a computer with Internet Explorer also installed. It won’t hurt either of them. They will run side-by-side without problem. You will have a choice to make one of them the “default” browser, and then change that later. It’s up to you. But if you want to take advantage of the powerful features that will help you troubleshoot and tweak your website style sheet or WordPress Theme, then add Firefox to your web tools.
Besides, Firefox is free to download, install, and use. That’s right – FREE.
Firefox Web Developer Tools
You do not have to post your CSS styles or XHMTL code on the WordPress Support Forum to help the other members help you solve your CSS or Theme problem. From the link to your website or the page in question, most are using Firefox with the Web Developer Extension installed. With these same tools, they can view your source files and style sheet and run the page through the validation checkers to track down and identify your problem, and often quickly come up with a solution. Why not use what the “pros” use?
With Firefox installed, there are a variety of powerful add-on features called extensions that will help you design your website or WordPress Theme. It doesn’t matter if you are trying to tweak the finest little detail, or shifting your sidebar from one side of the page to the other – these act like some of the most expensive HTML WYSIWYG web page editors.
- Edit Your CSS
- Make live edits to the CSS style sheet of a web page.
- View style sheet information for a web page.
- View style sheet information for an element by clicking on the element
- Add a style sheet from your computer to a web page to instantly change the look of a website.
- Highlight and Display Elements
- Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements.
- Outline images which may need trouble shooting such as images without titles.
- Locate broken or unfound images.
- Display image dimensions, file sizes, and paths.
- Outline other troubleshooting elements which lack titles, alts, or other HTML or CSS errors.
- Disable Elements
- Hide images.
- Hide background images.
- Hide or disable animations.
- Disable popup windows.
- Disable cache and cookies.
- Validate HTML, CSS, Feeds, and Links.
- Display various page and screen sizes for testing.
- View W3C documentation for HTML, CSS, and other web page standards.
The Edit CSS and Validate are probably the two most powerful and most used tools. Let’s look at these specifically.
With the Edit CSS feature, a sidebar opens with the style sheet of the page inside of it. If the site has inline styles or additional style sheets, they are included on the tabs listed across the top for easy access and viewing.
Simply type inside of the text area of the sidebar and the change will appear on the screen. You can change the height or width of a block element, move it around, tweak the fonts, links, graphics, background colors, images, whatever elements are controlled through the style sheet.
Remember that not all styles are controlled by the
style.css style sheet file on every WordPress Theme. Themes based upon the Default Theme typically include inline styles on the template files themselves which control the header section of a Theme. You will find those on the inline styles tab in the Edit CSS sidebar.
Be careful not to switch the web page window you are working on to another tab web page view. You will lose your changes and import the new styles for the current web page.
To keep this from happening, click the small arrow in the Edit CSS menu bar with the title “stick”. This will lock in the styles and apply them to every web page you view – which can make for some interesting web page views. Click it again to “unstick” the style sheet.
Before making any changes to your WordPress Theme’s style sheet, make sure you make a backup copy of the
style.css file, just in case. When you have made the changes and you are happy with them, you can copy the new styles and paste them as a complete replacement in your Theme’s style sheet, or just insert the new changes where necessary. You can also choose “Save” from the Edit CSS menu and save the style sheet onto your computer.
To view your site with the new style sheet, upload the
style.css to your WordPress Theme folder with any FTP client program, and then refresh the screen. If you don’t see changes, check out how to ensure you do with I Make Changes and Nothing Happens from the WordPress Codex.
Validate Your Web Pages
Whenever you make changes in your WordPress Theme or template files, you should validate the code to make sure that it is working, and working right. The smallest forgotten or messed up detail can totally screw up your page’s layout and design. I can’t tell you how many times a forgotten
</div> or semi-colon has been the small overlooked detail that made a mess of a Theme I was working on.
With the Web Developer Extension, you can use the validation tools that come built right in. Click the Tools menu from the Web Developer tool bar and choose which validation type you would like to perform on the web page you are viewing. These include CSS, HTML/XHTML, Feeds, Links, and Section 508, which is the Accessibility web standards test. You can find more help about solving common HTML validation errors in another recent post.
The validation report will open in a new tab or window, depending upon how you have Firefox set up. To help you understand the validation errors you encounter, choose the Miscellaneous tab from the Web Developer Extension tool bar and go to W3C Documents and choose the appropriate link to the documents regarding your validation error. Within a minute or so, you can usually troubleshoot the problem and find the solution, fix the error and have your valid code website back on the information highway.
Other Firefox Tools and Extensions
There are a few other great secrets to web page design available for Firefox. If you aren’t interested in downloading the entire Web Developer Extension, you can just choose the Edit CSS Extension, which basically does the same editing of the style sheet without all the rest of the tools.
Checky is another validation checking add-on that allows you easy access to different free and commercial online validation and analysis services. You can check a web page’s HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks, Metadata, and much more.
Colorzilla adds a color picker to Firefox, allowing you to choose any color of any graphic, font, or design on a web page to get the color hexadecimal number to use for your own web page colors.
While Firefox tends to be a more web standard conforming browser and excellent to work with to view your site during its development, you still have to test your site’s layout and design in Microsoft Internet Explorer. There is a Firefox extension called IE View which adds a menu item to your right click menu to view the page you are currently visiting in an Internet Explorer window, opening it automatically. This also makes it easy to test your styles and layout between Firefox and Internet Explorer.
When it comes to cleaning up your website in general, checking for deadlines is really important. The Link Checker extension adds an easy to use feature in Firefox to check the links on the page you are viewing to see if they are still valid links. This is excellent for checking and updating your blogroll or any resource links list page you may have.
These are just a few of the hundreds of extensions and add-ons available for free for Firefox.
- Choosing a WordPress Theme
- Help Me Find a WordPress Theme
- How Do You Choose a WordPress Theme?
- Finding Your CSS Styles in WordPress
- Designing a WordPress Theme From Scratch
- Designing a WordPress Theme – Building a Sandbox
- Free Text Only Editors for Templates, PHP, HTML, CSS, and More
- CSS and Web Page Design List of Resources
- WordPress Design Details
- WordPress Template Files and Style Sheets – Give Them a Name
- Do-It-Yourself Search Engine Optimization Guide
Site Search Tags: wordpress, wordpress themes, theme design, web design, edit themes, blog design, firefox, css, html, firefox extensions, css editor, firefox browser, firefox tools, web design tools, blog design tools, css tools
Subscribe Via Feedburner Subscribe by Email
Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.