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!

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

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?

Replace the ones that are being used with new ones?

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

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.

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

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

Kim:

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

thanks kim

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?

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.

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;
	}

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;
}

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