I use ZeroPoint theme and made a fixes according to #1238862: Module does not show alerts in certain themes
I set a User alert label "Flash", then put the User Alert block into the Highlighted region of ZeroPoint theme.

Yellow label block looks down in Chrome and Opera, but in place in Firefox (all browsers on Ubuntu Linux)

Screenshot:
screenshot user alert

Comments

kevinquillen’s picture

Assigned: Unassigned » kevinquillen

I think this is just a issue with the default css included with the theme, which more than likely needs some 'modern' update (it was written in 2010). You should be able to correct the behavior by overriding the CSS with the provided user alert classes, and even override with user-alert.tpl.php if you need to.

I've been meaning to make this more 'fluid' for awhile but it took a backseat to other things.

kevinquillen’s picture

Priority: Normal » Minor
omahacatalyst’s picture

StatusFileSize
new1.02 KB

I ran into the same issue. I don't think it has much to do with global CSS as the CSS file and associated styles are uniquely name, howerver, I did have to tweak the CSS to make it work in my site, below is the code I used in the file named user_alert.css located in mysite.com/sites/all/modules/user_alert/css

I also attached the background image I used, obviously the width/height may have to be tweaked to meet your site's needs.

/* $Id: */

div.user-alert {
	width: 620px;
	height: 40px;
	background-image:url(http://mysite.com/images/breaking_background.png);
	background-repeat:repeat-x;
	line-height: 35px;
	padding-bottom:8px;
	
}

div.user-alert div.user-alert-close {
	width: 15px;
	text-align: right;
	float: right;
	overflow: hidden;
	margin-right: 10px;
	text-decoration: none;
}

div.user-alert span.user-label {
	font-family:Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 15px;
	font-size: 11px;
	text-transform: uppercase;
	
}

div.user-alert div.user-alert-message {

	height:35px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow: hidden;
	font-weight: bold;

}

div.user-alert div.user-alert-message p {
	display: inline;
}
kevinquillen’s picture

Yes, when I built it I built it to a wide 960 width screen. Thats what I was saying is that you can easily override the provided CSS, it won't work in all cases.

It would be best to update the default in the module in an upcoming release to be a bit more fluid.

kevinquillen’s picture

Status: Active » Postponed
kevinquillen’s picture

Status: Postponed » Closed (won't fix)

Not sure what the core issue here is other than CSS, which can be overridden/fixed in your theme... this module was really meant for wider displays (over 800px minimum).

My plan for 2.x is to mimic the style from the Twitter Bootstrap style of alert, which is what I was originally going for.