We used to display the Bizroof logo on the top left corner of each page inside the CRM application, and we now replaced that with the company name specified by yourself.

If you want to change the name to be displayed, you can go to your dashboard, and click account details on the left hand side of the page, and then click Edit account name on the following page.

(Screenshot: Firefox 3.0.7 ↓)

You will see a dark border around the text if you are using one the following CSS3 enabled browsers, including: Safari 3+, Firefox 3.1a, Opera 9.5+ or Konqueror (Screenshot: Safari 3 ↓).

Bear in mind that all the browsers will eventually support CSS3, and it is just a matter of time till you can see the shadow effect on yours.

At Bizroof we’ve been focusing on developing new functionalities for the last 2 months, and we’ve rolled out a new permission engine with the ability to create user groups and a tool to import contacts from Outlook, Gmail, ACT! and Hotmail. Since then, 700+ groups and 80,000+ contacts have been added into the system. We are so glad that the new features are useful.

We believe that usability is as important as, if not more important than, features. So, we decide to spend this whole week just on improving usability. Guess what is on the top of our list? Rounded corners, which are so adorable and getting more and more popular in the whole web 2.0 world. They simply make web pages look smoother and more user-friendly.

(Screenshots taken before the changes)

(Screenshots taken after*)

(*It works well on Firefox, Safari, Chrome etc, but it does NOT work on IE since it barely supports CSS3)

It requires some basic knowledge about CSS and HTML to read the following techy part.

There are hundreds of pages and therefore thousands of sharp corners need to be rounded throughout the entire application, and we certainly don’t want to change each of them manually. Also, we don’t want to use javascript, which slows down page loading. Using images is not an ideal solution as we have to create different images to match different boxes. So, the only option left is to use the CSS file. Yep! Use pure CSS naturally.

Take the search box (3rd screenshot) for example, the highlighted 2 lines below are the only changes needed!

.searchWrapper {
padding:20px 50px 18px 50px;
border-left: 1px solid #CAE6FF;
border-top: 1px solid #CAE6FF;
border-right: 1px solid #8EB1D1;
border-bottom: 1px solid #8EB1D1;
background-color: #EFF7FF;
-moz-border-radius: 5px !important; //for Firefox Mozila etc
-webkit-border-radius: 5px !important; //for Safari and Chrome etc
}

If you don’t want to round all the 4 corners of a box, you can choose from the following lines instead: