Create a custom theme
1
Before we start on doing some editing, there are a few tools that really help make this job easier. At least depending on the web browser you use. I happen to use Mozilla Firefox. Having these tools makes editing, testing and figuring out how things work so much easier when dealing with web design.
ColorZilla
Ever try picking colors for a webpage but not knowing what the #000000 hex code for it would be? Maybe there was a color an image that you wanted to match but couldn't quite figure out what the hex code for it was? Or perhaps you went to a website and really liked a color but had no idea what color it was. Colorzilla completely fixes that. It is a Add-On to Firefox. It lets you take an eyedropper and as you hover over any image, tell you what the RGB, Hex Code, etc color is for whatever the eye dropper is on.
Firebug
Have you ever wondered what a particular CSS was for Div or what the name of a ID/Class was for something? Maybe you wanted to edit the background color without having to actual modify the file? With Firebug you can do that and more. You can inspect HTML and modify style and layout in real-time.
Web Developer
Web Developer lets me highlight images, find missing img tags, alt tags, view CSS, resize window, view source information and a plethora of other useful tools. The Web Developer extension adds a menu and a toolbar with various web developer tools.
Notepad++
Notepad++ is a free source code editor and Notepad replacement that supports several languages. It breaks up the code line by line, with line numbers. Depending on the programming language you set, for example you can set it for PHP or HTML, and it will show where a closing tag is when you click on an opening. It makes it easy to spot mistakes when working with code.
Note: Apparently images on the gallery here are set to resize to 640 pixels. It unfortunately doesn't give a great visual. I'll come back through another time and re-update the blog posts with better quality images from my site when I get a chance to finish sorting it.
ColorZilla
Ever try picking colors for a webpage but not knowing what the #000000 hex code for it would be? Maybe there was a color an image that you wanted to match but couldn't quite figure out what the hex code for it was? Or perhaps you went to a website and really liked a color but had no idea what color it was. Colorzilla completely fixes that. It is a Add-On to Firefox. It lets you take an eyedropper and as you hover over any image, tell you what the RGB, Hex Code, etc color is for whatever the eye dropper is on.
Firebug
Have you ever wondered what a particular CSS was for Div or what the name of a ID/Class was for something? Maybe you wanted to edit the background color without having to actual modify the file? With Firebug you can do that and more. You can inspect HTML and modify style and layout in real-time.
Web Developer
Web Developer lets me highlight images, find missing img tags, alt tags, view CSS, resize window, view source information and a plethora of other useful tools. The Web Developer extension adds a menu and a toolbar with various web developer tools.
Notepad++
Notepad++ is a free source code editor and Notepad replacement that supports several languages. It breaks up the code line by line, with line numbers. Depending on the programming language you set, for example you can set it for PHP or HTML, and it will show where a closing tag is when you click on an opening. It makes it easy to spot mistakes when working with code.
Note: Apparently images on the gallery here are set to resize to 640 pixels. It unfortunately doesn't give a great visual. I'll come back through another time and re-update the blog posts with better quality images from my site when I get a chance to finish sorting it.
