Skip to main content

CSS Message Boxes for different message types

CSS Message Boxes for different message types

1. Information messages

The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action.


2. Success messages

Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation - no partial operations and no errors. For example, the message can say: "Your profile has been saved successfully and confirmation mail has been sent to the email address you provided". This means that each operation in this process (saving profile and sending email) has been successfully performed.

3. Warning messages

Warning messages should be displayed to a user when an operation couldn't be completed in a whole. For example "Your profile has been saved successfully, but confirmation mail could not be sent to the email address you provided.". Or "If you don't finish your profile now you won't be able to search jobs". Usual warning color is yellow and icon exclamation.

4. Error messages

Error messages should be displayed when an operation couldn't be completed at all. For example, "Your profile couldn't be saved." Red is very suitable for this since people associate this color with an alert of any kind.


.info, .suc, .war, .err{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../IMG/info.png');
}
.suc {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../IMG/success.png');
}
.war {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../IMG/warning.png');
}
.err {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../IMG/error.png');
}

Design process

Now when we know the way to present messages to users, let's see how to implement a it using CSS. Let's take a quick look at the design process.
I will keep this as simple as I can. The goal is to have a single div that implements a single CSS class. So the HTML markup will look like this:

        <div class="info">Info message</div>

<div class="suc">Successful operation message</div>

<div class="war">Warning message</div>

<div class="err">Error message</div>
CSS class will add a background image to the div that will be positioned top-left. It will also create a padding inside the div so that text can have enough white space around it. Note that left padding has to be wider to prevent text overlapping with the background image.
Labels:

Comments

Post a Comment

Popular posts from this blog

Authentication ASP.NET_SessionId (Session) along with AuthToken (GUID) cookie

Authentication ASP.NET_SessionID (Session) along with AuthToken (GUID) cookie Introduction ASP.NET Session keeps track of the user by creating a cookie called  ASP.NET_SessionId  in the user browser. This cookie value is checked for every request to ensure that the data being served is specific to that user. In many applications, a Session variable is used to track the logged in user, i.e., if a session variable exists for that user, then the user is logged in, otherwise not. Background Whenever any data is saved into the Session, the  ASP.NET_SessionId  cookie is created in the user’s browser. Even if the user has logged out (means the Session data has been removed by calling the  Session.Abandon() or  Session.RemoveAll()  or  Session.Clear()  method), this  ASP.NET_SessionId  cookie and its value is not deleted from the user browser. This legitimate cookie value can be used by the hijacker to hijack the user session by g...
Post a Comment
Read more

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
20 comments
Read more
C# HttpClient tutorial C# HttpClient tutorial shows how to create HTTP requests with HttpClient in C#. In the examples, we create simple GET and POST requests. The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. HttpClient  is a base class for sending HTTP requests and receiving HTTP responses from a resource identified by a URI. C# HttpClient status code HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: Informational responses (100–199) Successful responses (200–299) Redirects (300–399) Client errors (400–499) Server errors (500–599) Program.cs using System; using System.Net.Http; using System.Threading.Tasks; namespace HttpClientStatus { class Program { static async Task Main(string[] args) { using var client =...
Post a Comment
Read more