Creating Glowing Alerts

BlueCat · 05-20-2014, 07:27 PM

when the alerts open, How would I make it where the text is glowing?

Here is the account_alerts piece.

Code:
.alerts .alertGroup
{
	margin-bottom: 20px;
}

.alerts .primaryContent
{
	overflow: hidden; zoom: 1;
	padding: 5px;
}

.alerts .avatar
{
	float: left;
}

.alerts .avatar img
{
	width: 32px;
	height: 32px;
}

.alerts .alertText
{
	margin-left: 32px;
	padding: 0 5px;
	text-shadow: #EEEE00 0 0 10px;
	
}

.alerts h3
{
	display: inline;
}

.alerts h3 .subject
{
	font-weight: bold;
}

.alerts .timeRow
{
	font-size: 11px;
	margin-top: 5px;
}
	
	.alerts .newIcon,
	.alertsPopup .newIcon
	{
		display: inline-block;
		vertical-align: baseline;
		margin-left: 2px;
		width: 11px;
		height: 11px;
		background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -144px -40px;
	}

Souvarine · 05-20-2014, 07:40 PM

Could you provide some HTML code used with that CSS and can you tell us more information how this should work?

If I understood good, you want that text (?) with class .alert glow when showed?

BlueCat · 05-20-2014, 07:45 PM

(05-20-2014, 07:40 PM)Souvarine Wrote: Could you provide some HTML code used with that CSS and can you tell us more information how this should work?

If I understood good, you want that text (?) with class .alert glow when showed?

Kind of, yeah!

Code:
<xen:title>{xen:phrase latest_alerts}</xen:title>

<xen:edithint template="xenforo_alert.css" />

<div>

	<xen:if is="{$alerts}">
		<ol class="alerts alertsScroller">
		<xen:foreach loop="$alerts" key="$date" value="$alertsDay">
			<li class="alertGroup">
				<h2 class="textHeading">{$date}</h2>
				<ol>
				<xen:foreach loop="$alertsDay" value="$alert">
					<li id="alert{$alert.alert_id}" class="primaryContent {xen:if $alert.new, 'new'}" data-author="{$alert.user.username}">
						<xen:avatar user="$alert.user" size="s" img="true" class="plainImage" />
						<div class="alertText">
							<h3>{xen:raw $alert.template}</h3>
							<div class="timeRow"><span class="time muted">{xen:time $alert.event_date}</span><xen:if is="{$alert.new}"><span class="newIcon"></span></xen:if></div>
						</div>
					</li>
				</xen:foreach>
				</ol>
			</li>
		</xen:foreach>
		</ol>
		
		<xen:pagenav link="account/alerts" page="{$page}" perpage="{$perPage}" total="{$totalAlerts}" />
			
	<xen:else />
	
		<p>{xen:phrase you_do_not_have_any_recent_alerts}</p>
		
	</xen:if>
	
</div>

Souvarine · 05-20-2014, 08:04 PM

If you want your text to have glow effect you should change part where you access .alerts .alertText to the following:

Code:
.alerts .alertText
{
    margin-left: 32px;
    padding: 0 5px;
    text-shadow: 0 0 10px #EEEE00;
    color: #EEEE00;
}

It looks like you forgot to change text color to glow color and color code in text-shadow property should go at the end.

BlueCat · 05-20-2014, 08:07 PM

(05-20-2014, 08:04 PM)Souvarine Wrote: If you want your text to have glow effect you should change part where you access .alerts .alertText to the following:

Code:
.alerts .alertText { margin-left: 32px; padding: 0 5px; text-shadow: 0 0 10px #EEEE00; color: #EEEE00; }

Thanks man!

It looks like you forgot to change text color to glow color and color code in text-shadow property should go at the end.

Inori · 05-22-2014, 01:53 AM

Why not just PM bluedog about any of this? Obviously, he knows what he's doing.

Creating Glowing Alerts
Author Message