I have been scouring the Forum Site & Knowledge base trying to get a handle on tweaking these Green and Red Ajax Notification boxes. (see attached image)
I have been playing with styles.base.css:
(line 169 in /skins/YOURSKIN/customer/styles.base.css:)
/* Notification box */
.cm-notification-container {
position: fixed;
right: 8px;
top: 0px;
z-index: 16;
BUT … I can’t get the box to center on the screen and can’t see where I control the time fade out.
The box moves left to right, but little else.
I obviously am not getting an understanding of the code required here.
I don’t mind the colour or style, so I haven’t touched the style.css file regarding it, just its function is needed to be altered.
Many customers are missing seeing important messages, from Registration issues to Order completions, because the box is up in the right hand corner and fades quickly.
Can the box be centered more so and most importantly can the fade be lengthened or even the box remain until closed by a user?
Thanks for any and all help 
www.gemnetwork.com.au
Are you clearing your cache after making changes?
Bob
Hi jobosales
I am making the changes in Firefox.
But am opening the Cart in IE an Chrome, after I refresh the page to spot the changes. Is that what you mean?
The ‘box’ is moving to the left, but not centering.
I also can’t see where the fade control is? Is that the Z-index?
See the following thread to lengthen the display time:
[url]http://forum.cs-cart.com/showthread.php?t=15364[/url]
You can clear the template cache by going to the Admin Dashboard, then type ?cc after the URL and hit return.
Bob
Thanks Jobosales appreciate ALL your help
Here’s what I did ;
Cause this is the sort of thing I would look for in the Forums
MOVE NOTIFICATION BOX
/YOUR SKIN/customer/styles.base.css
/* Notification box */
.cm-notification-container {
position: fixed;
right: 450px;
top: 300px;
z-index: 16;
450px & 300px puts the AJAX Green or Red box in the upper center of the browser window for me, as opposed to the far upper right corner.
HINT - to easily check to see where the AJAX Green box is how long it fades for. Just click ‘Checkout’ on an empty cart.
CLEAR CACHE
I then bookmarked the ‘?cc’ clear option -
([url]https://www.YOURSITE.com.au/admin.php%20?cc[/url])
I could then easily and quickly clear admin, then check the results in my browser.
FADEOUT TIME
Under PUBLIC_HTML (in my site)
There is a folder called ‘js’, in there is a file called ‘core.js’
I used a program called EDIT PLUS to read and change the code in that file (backed it up first)
On Line #1058 - #1061
// Close notification message
closeNotification: function(key, delayed, no_fade, delay)
{
var DELAY = typeof(delay) == ‘undefined’ ? 5000 : delay;
I changed the number 5000 to 10000
Or 5 seconds to 10 seconds
PLUS you use can click the small ‘x’ in the box to make the box go away.
I’ll see how helpful or annoying that design is for my customers!
Again thank you
We use 24" screens and notification box doesn’t come in the middle. I believe, it will appear in different places regardless of what you set. Browser resolution matters. Do you know how to make it to appear exactly in the center of the screen? Thanks.
Hey Noman
Yes on my standard 17" it’s in the middle.
On my 24" it’s off to the right a bit.
But still in a better viewing position.
There might be a code or line that will center it regardless of screen size, but I don’t know it!
Can anyone here help with that?
Usually, when Bob steps in, all political and CS problems are sorted in seconds. Waiting patiently 
LOL
I did some Googling on CSS terms and design code.
But all the things I tried did nothing or made it worse
Here’s what I have mine set to right now, it’s a tad off on the 24" monitor but really close, if someone plays around they might get it perfect:
/* Notification box */
.cm-notification-container {
position: fixed;
right: 8px;
top: 0px;
z-index: 16;
width: 30%;
margin-right: 38%;
margin-left: 38%;
margin-top: 6%;
text-align: center;
}
No way guys. I tried in different browsers with different resolutions applied. The notification box appears everywhere. No way this is right. Are we mentaly disabled or what? We need someone with big working brain on weekend.
The CSS probably needs to be similar to the product notification which seems to center.
Bob
Hi Bob
Thanks, I tried that with different options - adding, removing or changing lines. It pops up somewhere in the middle, but in another browser with different resolution the box moves somwhere else. It looks like we have wasted Saturday 
[quote name=‘Noman’]No way guys. I tried in different browsers with different resolutions applied. The notification box appears everywhere. No way this is right. Are we mentaly disabled or what? We need someone with big working brain on weekend.[/QUOTE]
Mine works very nice on every browser I’ve tried and with 4 different sized monitors.
Try it in IE8 with F12 [Developer tools] where you can emulate different resolutions. Every time you check, do index.php?cc and try again. Also, FireFox and Chrome were tested with your website. On low resolution 1024x768 the box looks just right and it’s in the middle. Changing resolutions to higher ones, moves the box to the right. Try it and watch the movement against the “Glassware” text. On my screen, it moves like 2 inches.
[quote name=‘Noman’]Try it in IE8 with F12 [Developer tools] where you can emulate different resolutions. Every time you check, do index.php?cc and try again. Also, FireFox and Chrome were tested with your website. On low resolution 1024x768 the box looks just right and it’s in the middle. Changing resolutions to higher ones, moves the box to the right. Try it and watch the movement against the “Glassware” text. On my screen, it moves like 2 inches.[/QUOTE]
I can’t seem to duplicate what you are talking about no matter what I do. Can you send me some screenshots?? ioncannon23@gmail.com I can get it to off center with low low resolution but that’s expected. I am not sure if there is a way to float the box in the center. I will keep trying.
In looking around a little more I found this: [url]Blue Robot | Messaging, Chat Bots & Social Eperiences
Looks like this might be the right idea we are looking for but CSS is my nemesis. Anyone that is good with CSS wanna take a stab?
thanks!
-kevin
in case this hasnt already been answered, to position the boxes central and over everything else use:
.cm-notification-container{
position: absolute;
z-index: 10;
left: 40%;
top: 35%;
padding: 10px;
}
this should display the alerts central and overlapping everything
excellent, looks like it works great. thanks!
[quote name=‘matt5409’]in case this hasnt already been answered, to position the boxes central and over everything else use:
.cm-notification-container{
position: absolute;
z-index: 10;
left: 40%;
top: 35%;
padding: 10px;
}
this should display the alerts central and overlapping everything[/QUOTE]
On my 1920x1080 24" screen, it’s still off to the right.
But on my 1280x1024 17" screen it’s pretty much centered
Anyway … the main thing is whether right-ish ir not , it clearly visible and now sits there for much longer, making my customers much happier.
Thanks everyone!
[quote name=‘GNI’]On my 1920x1080 24" screen, it’s still off to the right.
But on my 1280x1024 17" screen it’s pretty much centered
Anyway … the main thing is whether right-ish ir not , it clearly visible and now sits there for much longer, making my customers much happier.
Thanks everyone![/QUOTE]
yea, you can fiddle with the percentages until the end of time and still not get it perfect on all monitors. developing for 1024x768 is probably best though as this is the most widely used resolution