CSS message box examples

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

Today I'm going to show you CSS message box examples. We have four types of commonly used message boxes in a software/web application, I call them Info, Success, Warning, and Error boxes.

Displaying message boxes in your site or application helps users a lot in identifying what they are doing or what is the result of their actions, clicks, or operations.

It would be great if your message boxes are clearly designed, with proper colors, message icons, and is placed on the right part of your application.

Usually, it can be seen on the top/upper part of your application just like what we have on YouTube when you try to subscribe to a channel.

At the end of this tutorial, we will have the following output: (Please Click To Enlarge)

Four Message Boxes Using CSS
Four Commonly Used Message Boxes

So, let’s go! (Please read the comments on the codes):)

Step 1: We will organize our files in this way. (but you can still do it in your own way if you want)

Organization of files
Organization of files

Step 2: Create your index.html file. You should have this code in it.

<html>
     <head>         
          <title>Four Message Boxes</title>
          <link href=‘styles/style.css’ type=‘text/css’ rel=‘stylesheet’ /> 
     </head>
<body>
     <div class=‘info’>
          This is an info box. Many people tell me I’m handsome.
     </div>
     <div class=‘success’>
          This is a success box. Thank you for telling me I’m handsome.
     </div>
     <div class=‘warning’>
          This is a warning box. You must tell me I’m handsome.
     </div>
     <div class=‘error’>
          This is an error box. You didn’t tell me I’m handsome.
     </div>
 
</body>
</html>

Step 3: Create your style.css file and the code would be:

/* this part will create the the message box*/
.info, .success, .warning, .error, .validation { 
     /* setting the box model */
     border: 1px solid;
     margin: 10px 0px; 
     padding:15px 10px 15px 50px; 
     background-repeat: no-repeat; 
     background-position: 10px center; 
     /* setting fonts */
     font-family:Arial, Helvetica, sans-serif;
     font-size:13px;
     font-weight: bold;
}
/* this part will load the info box icon and make our box color blue */
.info {     
     color: #00529B;
     background-color: #BDE5F8;
     background-image: url(‘../images/info.png’);
}
 
/* this part will load the success box icon and make our box color green */
.success {     
     color: #4F8A10; 
     background-color: #DFF2BF; 
     background-image:url(‘../images/success.png’);
}
 
/* this part will load the warning box icon and make our box something like color yellow */
.warning {
     color: #9F6000;
     background-color: #FEEFB3; 
     background-image: url(‘../images/warning.png’);
     background-position: 10px 7px; 
}
 
/* this part will load the error box icon and make our box color red */
.error {
     color: #D8000C; 
     background-color: #FFBABA; 
    background-image: url(‘../images/error.png’);
}

Step 4: If you are having problems blending the background color of your icon to the background color of your box, pipette will help you a lot. :)
*Note: You can just download or make your own icon for your message boxes :)

Thank you for reading! :)

How to: Date Format

Last update: •Date posted:
COMMENTS•0 Comments/in /Posted by MIKE DALISAY

If you're gonna display this date format in your page, it will look so elementary: 2010-10-20. So we got to have a format for this one.

How to: Date Format with PHP
Date Format

Step 1: Prepare your database configuration file.

Step 2: Create and put this code inside your index.php file.

<?php
include 'config_open_db.php';

// to format the date, we used the date_format function
// we also label the column as formatted_date 'coz if not, we will have to access the data
// in this way: date_format(date_created,'%M %d, %Y')
$sql = "select title, date_format(date_created,'%M %d, %Y') as formatted_date from articles";
$rs = mysql_query( $sql ) or die( 'Database Error: ' . mysql_error());
while( $row = mysql_fetch_array( $rs ) ){
extract( $row );
echo "<h4>$title</h4>";
echo "Created on " . $formatted_date. "< hr />";
}
?>

you should have something like this:

Date Format

Step 3: If you also want to display the time just change %M %d, %Y to %M %d, %Y %r. You should have something like this.

Date Format With Time Specified

For more date format patter strings, look here.

How To: Read More Link

Last update: •Date posted:
COMMENTS•0 Comments/in /Posted by MIKE DALISAY

Creating a Read More link saves space in your page especially if you want to display a list of articles. It is much better than displaying the whole content of an article.

How To: Read More Link
Read More Link

Step 1: Prepare your database configuration file.


Step 2: Create your index.php file. You should have these codes.

<?php
include 'config_open_db.php'; // For database connection

// SUBSTR function in the query is used to shorten the output of the content
$sql = "select id, title, SUBSTR( body, 1, 300 ) as body from articles";
$rs = mysql_query( $sql ) or die( 'Database Error: ' . mysql_error());
while( $row = mysql_fetch_array( $rs ) ){
    extract( $row ); // to have variable names the same with column names
    echo "<h4>$title</h4>";
    echo "$body";
    // Link to the page where the reader can read the whole article
    echo "...[<a href='read_news.php?page_id=$id'>Read More</a>]";
}
?>

Where To Get Great Color Combination Ideas

Last update: •Date posted:
COMMENTS•0 Comments/in /Posted by MIKE DALISAY

I’m a web developer but I’m not that good in web design (but I’m currently working on it!). Let’s say that I’m more of the programming part of web development.

Color Combination

If you are just like me who find it hard to decide what color combination should be used for your web application or web site you’re working on, you may find this article helpful.

Step 1: Go to Adobe Kuler. I found REALLY great color combination ideas there. Another site I can give you is Colour Lovers. These sites really helped me a lot in deciding what colors I should be using in my projects.


Step 2: I know you will be asking me about how we are going to get its hexadecimal, RGB or CMYK value. So we’re gonna download this very helpful software: PipetteStep 3: Unzip it to your computer and then run. You should have something like this:

Step 3: Unzip it to your computer and then run. You should have something like this:

Pipette

Step 4: Click here if you wanna learn more about Pipette.

Step 5: You may now use those colors retrieved by Pipette in your favorite graphic software or CSS. :)

How To Use Pipette

Last update: •Date posted:
COMMENTS•1 Comment/in /Posted by MIKE DALISAY

Pipette allows you to instantly grab the colour of any pixel on your screen and copy it in hex format, as used in CSS files, or graphic softwares, such as Adobe Photoshop.

Pipette (Image from http://www.sttmedia.com)

Step 1: Download Pippette here.


Step 2: Unzip it and run the application. You should have something like this:

The Pipette Application

Step 3: Click on the Pipette button then drag it on the color you want to get in your screen. The color you get will appear in the color list.

Using Pipette

Step 4: You may now copy and paste the color HEX value to your CSS file or paint software. :)

How To Highlight Table Row on Hover

Last update: •Date posted:
COMMENTS•0 Comments/in , /Posted by MIKE DALISAY

In this post, we'll highlight table row on hover. Here's how it will work: Highlight the table row on hover. Show its original color on mouse out.

Just add the following JavaScript code before the </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function(){

//we will select the odd and even row
//to highlight it on mouse over
$('.odd-row, .even-row').hover(
function () {
    $(this).css('background-color', '#CFF');
}, 
function () {
    //then get the class name to identify
    //and show its original color
    var c_name = $(this).attr('class');
    if(c_name == 'odd-row'){
        $(this).css('background-color', '#E3E3E3');
    }else if(c_name == 'even-row'){
        $(this).css('background-color', '#D1D1D1');
    }
}
);

});
</script>

That's it! :)

How To Create Zebra Striped Tables

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

Zebra striped tables look good. It guides the user’s eyes when looking into your rows of data. This one useful when you have long list of data, making your app more user friendly.

How To Create Zebra Striped Tables
Zebra Striped Table
DOWNLOAD SOURCE CODE LIVE DEMO

Step 1: Prepare your database configuration file. (I have config_open_db.php). As for the table structure, we can have the following:

CREATE TABLE `users` (
   `id` int(11) not null auto_increment,
   `firstname` varchar(32) not null,
   `lastname` varchar(32) not null,
   `email` varchar(32),
   `username` varchar(32) not null,
   `password` varchar(32) not null,
   PRIMARY KEY (`id`)
)

Step 2: Create styles folder and inside it is the style.css file. We will have this code:

th {
    padding: 5px;
    background-color: #999999;
}

td {
    padding: 5px;
}

.odd-row {
    background-color: #E3E3E3;
}

.even-row {
    background-color: #D1D1D1;
}

Step 3: Create index.php file, inside the index.php file, you should have these codes:

th {
    padding: 5px;
    background-color: #999999;
}
 
td {
    padding: 5px;
}
 
.odd-row {
    background-color: #E3E3E3;
}
 
.even-row {
    background-color: #D1D1D1;
}

Step 3: Create index.php file, inside the index.php file, you should have these codes:

<html>
    <head>
    <title>How To Create Zebra Striped Table</title>
    <link href='styles/style.css' type='text/css' rel='stylesheet' />
    </head>
<body>
<?php
//to be connected to the database
include 'config_open_db.php'; 
 
//query your data
$sql = 'select * from users';
$rs = mysql_query ( $sql );
 
echo "<table border='0' cellpadding = '2'>";
echo "<tr>"; // Create the table headings
    echo "<th>Firstname</th>";
    echo "<th>Lastname</th>";
    echo "<th>Email</th>";
    echo "<th>Username</th>";
echo "</tr>";
 
//Set the background color of your first row
$bg=1; 
 
while ( $row = mysql_fetch_array( $rs ) ){
 
    //this is the condition on what will be the bg color of a row
    //at the same time, changing the value of $bg for the next loop
    //in this way, our table will have alternate row color
    //that makes it "Zebra Striped"
    if( $bg == 1){
        echo "<tr class='odd-row'>";
        $bg=2;
    }else{
        echo "<tr class='even-row'>";
        $bg=1;
    }
     
    echo "<td>{$row['firstname']}</td>";
    echo "<td>{$row ['lastname']}</td>";
    echo "<td>{$row['email']}</td>";
    echo "<td>{$row['username']}</td>";
    echo "</tr>";
     
}
 
echo "</table>";
?>
 
</body>
</html>

I have a follow up post for this one: How To Highlight Table Row OnMouseOver
:)

Sample Use of JavaScript Confirm Pop Up Boxes

Last update: •Date posted:
COMMENTS•0 Comments/in /Posted by MIKE DALISAY

I'm gonna give you an example on how to use JavaScript confirm pop up boxes to delete a database record.

JavaScript Confirm Pop Up Box

File Name: index.php

<html>
   <head>
        <title>Sample Use of JavaScript Confirm Pop Up Boxes</title>
        <script type='text/javascript'>
            function delete_user( id ){
                var answer = confirm('Are you sure you want to delete this record?');
                if ( answer ){ //if user clicked ok
                    window.location = 'index.php?action=delete&id=' + id;
                } //you can add else here
            }
        </script>
   </head>
<body>
   <p>
   <?php
    if($_REQUEST['action']=='delete'){
    include 'config_open_db.php'; //for database connection
        $sql = "DELETE FROM users WHERE id = {$_REQUEST['id']}";
        mysql_query ( $sql ) or die('Database Error: ' . mysql_error());
        echo "User Deleted!";
      }
   ?>
   </p>

   <a href='#' onclick="delete_user( 3 );">Delete</a>

</body>
</html>

Here's how it works:
1. When you run this code, you will see a delete link.
2. After clicking that link, a JavaScript Pop Up Box will appear saying ""Are you sure you want to delete this record?".
3. If you click on "Cancel", nothing will happen aside from the box will disappear.
4. If you click on "OK", the page will be redirected to itself together with the parameters "action" and "id", it is on this part window.location = 'index.php?action=delete&id=' + id;
5. It will then evaluate our PHP script to delete the record from the database.