Custom Error Stack Messages...

21 Dec 2008, 03:49

#1

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Custom Error Stack Messages...

I found these awhile back, can't remember the website, but I saved these pics, I want to have custom error stacks exactly like these, how can I go abouts doing this? can someone explain to me how I can do this? where I can start? Thanks in advance!

1. http://www.themccormickshop.com/images/image001.png
2. http://www.themccormickshop.com/images/image002.png
3. http://www.themccormickshop.com/images/image003.png
4. http://www.themccormickshop.com/images/image004.png

bummer I can't find the website, had all the code and everything :no:

21 Dec 2008, 04:21

#2

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

I found where I can edit and tweak the code for the message stack in the css file, but how do I do the images?

21 Dec 2008, 04:32

#3

kim

Obaa-san

Join Date:: Jun 2003
Posts:: 26,564
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Replace the ones that are being used with new ones?

21 Dec 2008, 04:40

#4

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Genius! I know that much, what file pulls the graphic to display it on the page is what I am saying and where are the files located

21 Dec 2008, 04:42

#5

drbyte

Sensei

Join Date:: Jan 2004
Posts:: 63,506
Plugin Contributions:: 173

Re: Custom Error Stack Messages...

How to find it:
1. Trigger the display of existing messageStack content by creating an error of some sort, perhaps an invalid email address on a signup page
2. Look at the raw source HTML in your browser's View Source option
3. Find the part that displays the error message ... and you'll see the path to the image, and the corresponding CSS tags etc.
4. Look up those bits using the Developers Toolkit.

21 Dec 2008, 04:43

#6

kim

Obaa-san

Join Date:: Jun 2003
Posts:: 26,564
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Right click on the image - chose 'view image' - read the path and the image name.

21 Dec 2008, 04:44

#7

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Thanks DrByte, didn't think about creating an error and use firebug to see where the image is located, keep forgetting about the developers toolkit too

21 Dec 2008, 04:46

#8

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Kim:
Right click on the image - chose 'view image' - read the path and the image name.

thanks kim

21 Dec 2008, 05:01

#9

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

Is it possible to make Info message stack and display custom messages, to customers...an example would be, maintenance period (instead of using the messageStackError), inform customers of important dates, etc

also, how to resize the messagebox and center the text within the box vertically with the image?

21 Dec 2008, 05:11

#10

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Custom Error Stack Messages...

The styling will be all CSS. Once you know the message box id, you can style it in your stylesheet for height, width, margins, content position/alignment, etc.

21 Dec 2008, 06:04

#11

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

gjh42:
The styling will be all CSS. Once you know the message box id, you can style it in your stylesheet for height, width, margins, content position/alignment, etc.

Yeah I figured so, but I can't get the box to center after I resized it, this is what I got...

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	width: 80%;
	text-align: center;
	vertical-align: middle;
	padding: 0.2em;
	}

21 Dec 2008, 06:48

#12

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Custom Error Stack Messages...

Add

margin: auto;

to the rule to make these center in the available width.

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	width: 80%;
	text-align: center;
	vertical-align: middle;
	padding: 0.2em;
	margin: auto;
	}

22 Dec 2008, 03:00

#13

chris32882

Zen Follower

Join Date:: Oct 2008
Posts:: 330
Plugin Contributions:: 0

Re: Custom Error Stack Messages...

gjh42:

Add

margin: auto;

to the rule to make these center in the available width.

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	width: 80%;
	text-align: center;
	vertical-align: middle;
	padding: 0.2em;
	margin: auto;
	}

cool it works! Now I just need to to align the text within the box to line up center with the image