Good day everyone, first accept my apologies for being silent last year; actually I was very busy managing my team in a number of big SharePoint projects. 

Today, I came with a tool for customizing SharePoint websites look and feel, and you also can use it for any website, because it is designed to override default CSS classes of any website.

I’ve developed this tool specifically to customize look and feel without touching default CSS files of SharePoint.

Features:
1- Opens any online site or offline page and apply your new styles without refreshing the page by few steps
2- Displays current CSS class attributes by click the class name
3- Full review of the page HTML and styles through:
     a. Mouse selections of the item
     b. HTML tree view
     c. Property box
4- You can add new/existing images and it will appended automatically to the CSS
5- Auto Complete CSS feature
6- You can append more than one CSS file
7- Color Picker tool which applies the Color code automatically to the CSS
8- Exports the full package to be applied on either SharePoint or any website

To use this tool, you need to:
1- Create new project, in this step you will be asked to specify location and project name.

2- Open your SharePoint website, by writing URL into address bar, you can stop browser navigation by clicking the first icon or from Action menu
3- Add new CSS file to override default classes, and you will be able to add more than one CSS file

4-  You have the ability to select the HTML element directly by mouse or from the source tree in the bottom
5- After you select the HTML element, the class name will appear, and you can review the default styles inside this class be clicking the class name

6- If you clicked on override button for the class or element ID, you will be able to write the new styles in the bottom right text area, which has auto complete feature

Note: Don't forget to append "!important" keyword to the style to override the attribute in case of being used in default CSS styles.

ex: .ms-topnav {height:30px !important;}

7-  You can add new images to the new CSS, the tool creates a folder for images and another one for CSS files
8- After you finish writing your styles, click “Apply” button to save and apply directly on without refreshing the page.
9- In the last step export your package to be applied on your default Master Page
 

Download this tool for free  from CodePlex, You will need to install .NET framework 3.5