XF 1.5 Improvements to notices

Today, we're showing you some exciting changes to Notices that we're bringing to you in XenForo 1.5:

Displaying an image
upload_2015-6-23_16-5-13.webp


With the introduction of the above option it is now possible to display an image on a notice. You can either display the current visitor's avatar or provide a path or URL to one:

upload_2015-6-23_16-5-42.webp


This addition should help draw more attention to your notices.

Visibility options
upload_2015-6-23_16-6-14.webp


It is currently possible to hide notices with relative ease using some custom CSS. You can still do this to have tighter control, but the new option makes it even easier.

The exact breakpoints will depend on the properties set on the style used.

Floating notices

In XenForo 1.5 there are now two types of notices. Block notices behave in the familiar way as pictured above. Floating notices are a completely new way to display your notices.

upload_2015-6-23_16-8-53.webp


Floating notices will appear in the bottom right corner of the screen. In addition to the usual options, floating notices also support some new options:

upload_2015-6-23_16-9-42.webp


There are four colour styles, two of which derive from your Color Palette. You can also provide a custom class name to style the floating notice however you like. You can see all five of these options pictured below (the last one being a custom class created manually):

notices.webp


You can also control how long the floating notice will display for, and fade the notice in after a period of time.

Guest dismissal
We now give guests the opportunity to dismiss notices. For guests, the mechanism for dismissing a notice is to set a cookie in their browser.

The cookie that we set is valid for the current browsing session. To restore dismissed notices a guest can clear their cookies, move to another device or restart their browser.

Resetting notices
upload_2015-6-23_16-12-4.webp


Sometimes it may be necessary to re-use a notice. For example, you may wish to create a similar notice without reconfiguring the criteria.

upload_2015-6-23_16-12-34.webp


Once reset, the notice will begin to display to any registered member meeting the criteria, even if they previously dismissed it.

That's all for today, until next time... :)
 
Last edited:
We've made a small change here.

We have added a new option so that floating notices can be automatically dismissed after the display timer runs out:

upload_2015-7-1_13-23-46.webp


The floating notice we added yesterday has had this applied, though the duration is currently quite high of 15 seconds. If you wish to try it but you've already dismissed the notice, you can restore all dismissed notices from your Preferences.
 
Please explain why don't apply css-style like that:
Code:
/*gradient css3 1 NOTIFICATION ENHANCEMENT*/
.shelley1 {
    background: url("@imagePath/xenforo/notices/shelley1gradientnotification.png") repeat-x scroll top #991706; /* Old browsers */
background: -moz-linear-gradient(top, #dd776a 0%, #ce4a35 2%, #bf3020 4%, #a82c19 29%, #992313 59%, #991706 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd776a), color-stop(2%,#ce4a35), color-stop(4%,#bf3020), color-stop(29%,#a82c19), color-stop(59%,#992313), color-stop(100%,#991706)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* IE10+ */
background: linear-gradient(to bottom, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* W3C */
    border: 1px solid #990F00;
    border-radius: 6px;
}

.shelley1 {
  color: #ffbe84!important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #872114;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #c9412f;
}

.shelley1 a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.6;
}
/*gradient css3 1 NOTIFICATION ENHANCEMENT*/
?
 
If that code was written specifically for the Notifications add-on, it's unlikely to work with the new floating notices in XF 1.5.
 
It will make little sense to have it, in its current form, installed in XF 1.5. It may stick around, though, in some form.
So for short, it is not really needed once 1.5 is final.

I read up on some more submitted post, I see what uses are needed for notifications. Great work, thanks for improve the core notice system! :)
 
Last edited:
I really like how notices works now. I use it for rotating banners:

notices.gif


And the floating feature is great too.

Great work XF team!
 
These are awesome, @Chris D!

I've already styled mine to suit! :D

KHF Notice.webp


Code:
/* Notices */

.KHFlare .FloatingContainer .floatingItem.primary {
    color: @secondaryDarker;
    background-color: @secondaryLighter;
    border-color: @secondaryLighter;
}

/* Notices */
 
Last edited:
Top Bottom