Webmaster Sun Login
Not a member yet? Sign up

[BLOGGER]CSS Notification Boxes

  • HOME
  • FORUMS
  • WHAT'S NEW
  • BLOGS
  • MARKETPLACE
  • ADVERTISING
  • SPECIAL OFFERS
  • WEB HOSTING
  • QUICK MENU
  • REGISTER HERE - Join us for FREE
Results 1 to 4 of 4
    Stick this thread
  1. #1
    Join Date
    Feb 2013
    Location
    USA
    Posts
    302
    Thumbs Up/Down
    Received: 2/1
    Given: 1/0
    Thanks
    111
    Thanked 44 Times in 36 Posts

    [BLOGGER]CSS Notification Boxes

    Today we are going to look at the design of CSS Notification Boxes. Notification or Alert Boxes are a great way to inform the user of a variety of messages, such as: error messages, success messages, warning messages and general notification. A great example for using these notification boxes would be for user registrations for a website, if for example the user made an error during registration, you could use an alert box to inform the user of the particular error. If however everything was correct, you could alert the user that registration has succeeded and that they can now login.
    In this tutorial, we are going to look at how to create a range of the most popular notification boxes, today we are going to focus on the following:
    1. Error Box
    2. Success Box
    3. Warning Box
    4. Notice Box


    First we will create the basic layout for each box.
    Code:
    • .alert-box {
    • color:#555;
    • border-radius:10px;
    • font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    • padding:10px10px10px36px;
    • margin:10px;
    • }

    Lets take a look at each line:
    color:#555; – This is used for the text color.
    border-radius:10px; – We will give the borders a radius of 10px.
    font-family:… – Is the name of the font that we will be using.
    padding:10px 10px 10px 36px; – Padding inside the box, 10px for Top, Right and Bottom, 36px for Left.
    margin:10px; – The margin around the box will be 10px.


    Step 2:

    In each box there will be a span property notifying the user of the alert.
    Code:
    • .alert-box span {
    • font-weight:bold;
    • text-transform:uppercase;
    • }


    Lets take a look at each line:
    font-weight:bold; – All the text inside the span property will be bold.
    text-transform:uppercase; – This will transform the text to uppercase.

    Step 3:

    Now lets add some color and icons to each box.

    Code:
    • .error {
    • background:#ffecec url('images/error.png') no-repeat 10px 50%;
    • border:1px solid #f5aca6;
    • }
    • .success {
    • background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    • border:1px solid #a6ca8a;
    • }
    • .warning {
    • background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    • border:1px solid #f2c779;
    • }
    • .notice {
    • background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    • border:1px solid #8ed9f6;
    • }


    Lets take a look at each line:
    background:… – Specifies the background color and the icon used for the alert
    border:… – Specifies the border width, style and color.


    Step 4:

    Lastly we need some HTML code to display the alert boxes.

    Code:
    • <divclass="alert-box error"><span>error: </span>Write your error message here.</div>
    • <divclass="alert-box success"><span>success: </span>Write your success message here.</div>
    • <divclass="alert-box warning"><span>warning: </span>Write your warning message here.</div>
    • <divclass="alert-box notice"><span>notice: </span>Write your notice message here.</div>


    Download the Icons and Pre made Css (:
    Click Here

  2. The Following User Says Thank You to Holly Nicole For This Useful Post:
    Inquestor (08-19-2013)

  3. #2
    Join Date
    Feb 2013
    Location
    Ontario, Canada
    Posts
    495
    Thumbs Up/Down
    Received: 33/1
    Given: 18/1
    Thanks
    228
    Thanked 256 Times in 165 Posts
    Hey,

    Great snippet of information presented by Holly Nicole. Very useful for any website.

    Thanks for the share!

  4. #3
    Join Date
    Feb 2013
    Location
    USA
    Posts
    302
    Thumbs Up/Down
    Received: 2/1
    Given: 1/0
    Thanks
    111
    Thanked 44 Times in 36 Posts
    Thanks (: I'm trying my best I'm not 100% sure if it works on all site or just blogger hence the [BLOGGER]

  5. #4
    Join Date
    Feb 2013
    Location
    Ontario, Canada
    Posts
    495
    Thumbs Up/Down
    Received: 33/1
    Given: 18/1
    Thanks
    228
    Thanked 256 Times in 165 Posts
    Well, it should as it is just HTML & CSS + the icons. It should work on any website IMO

    Cheers!

Newer Threads

  1. Holly Nicole
    Holly Nicole
    Replies: 0 | Views: 1430
    Last post by Holly Nicole, 08-19-2013, 07:07 PM
  2. Holly Nicole
    Free Blogger Theme
    By Holly Nicole in forum Templates
    rohanjain
    Replies: 3 | Views: 4705
    Last post by rohanjain, 03-14-2014, 10:40 AM
  3. Holly Nicole
    VipraDoot
    Replies: 2 | Views: 2039
    Last post by VipraDoot, 03-19-2014, 12:37 PM
  4. Holly Nicole
    Top Niche Websites
    Replies: 2 | Views: 2519
    Last post by Top Niche Websites, 08-20-2013, 10:58 AM
  5. LindaH
    nickylove18
    Replies: 7 | Views: 2943
    Last post by nickylove18, 09-19-2013, 06:56 AM

Older Threads

  1. pratibha
    Jack London
    Replies: 1 | Views: 2393
    Last post by Jack London, 08-19-2013, 11:57 PM
  2. baburam
    Jack London
    Replies: 2 | Views: 2318
    Last post by Jack London, 08-19-2013, 11:51 PM
  3. john
    Growfast
    Replies: 15 | Views: 5412
    Last post by Growfast, 02-03-2014, 05:47 PM
  4. john
    appzuniverse
    Replies: 8 | Views: 4603
    Last post by appzuniverse, 05-16-2014, 04:49 AM
  5. pravinganore
    Domain Reselling Business
    By pravinganore in forum Domain Names
    CarolSartor
    Replies: 1 | Views: 2543
    Last post by CarolSartor, 01-13-2014, 08:07 AM

Latest Threads

  1. 100MDC
    100MDC
    Replies: 0 | Views: 30
    Last post by 100MDC, Yesterday, 01:20 PM
  2. 100MDC
    100MDC
    Replies: 0 | Views: 22
    Last post by 100MDC, Yesterday, 01:08 PM
  3. 100MDC
    100MDC
    Replies: 0 | Views: 37
    Last post by 100MDC, Yesterday, 01:07 PM
  4. Edwardcullen
    Edwardcullen
    Replies: 0 | Views: 20
    Last post by Edwardcullen, Yesterday, 11:34 AM
  5. 100MDC
    Hi all
    By 100MDC in forum New Member Introductions
    Rob Whisonant
    Replies: 1 | Views: 39
    Last post by Rob Whisonant, Yesterday, 08:28 PM

Similar Threads

  1. mark
    jamesnader
    Replies: 1 | Views: 2517
    Last post by jamesnader, 12-10-2015, 10:08 AM
  2. Holly Nicole
    VipraDoot
    Replies: 2 | Views: 2039
    Last post by VipraDoot, 03-19-2014, 12:37 PM
  3. Jack London
    BloodMaster
    Replies: 10 | Views: 4335
    Last post by BloodMaster, 09-06-2013, 05:23 AM
  4. Andre
    Andre
    Replies: 0 | Views: 1342
    Last post by Andre, 04-01-2013, 12:29 AM
  5. jamesbond
    chiefdavid
    Replies: 18 | Views: 7498
    Last post by chiefdavid, 03-10-2013, 03:35 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Internet Marketing Forum

Webmaster Sun is a forum where you’ll find in-depth discussions and resources to help you succeed on the web whether you are new or experienced. You’ll find it all here. With topics ranging from internet marketing, search engine optimization, social networking, make money online, web hosting, affiliate marketing as well as hands-on technical support for web design, programming and more. We are a growing community of like-minded people that is keen to help and support each other with ambitions and online endeavors. Learn and grow, make friends and contacts for life.

Come Hang Out With Us

    Facebook Twitter Webmaster Forum Google+

    Webmaster Sun Logo
Copyright ©2012 - 2019, WebmasterSun.com. All rights reserved. Internet marketing forum for internet marketers, webmasters, web hosting providers, designers and affiliate marketers.

Welcome to Webmaster Sun

The World's Number 1 Webmaster Community, SEO and Marketplace

Log in!

Continue with Facebook
Continue With Email. By signing up you indicate that you have read and agree to the Terms of Service and Privacy Policy.

Sign in Manually

Need an account? Sign up now!