Notification Card (Gamer)

Unmaintained Notification Card (Gamer) v2

No permission to download
nP529.png

notification-preview-fixed.webp


Added and included a custom closed icon specifically for this notification design. The added css inlcludes a fix for the icon I forgot about and only affects the notification gamers card and no other notification in your listings.

Code:
#gritter-notice-wrapper.bottom-right .gamer{
    bottom: 30px !important;
    left: auto;
    right: 40px !important;
    top: auto;
}
.gamer .gritter-item{
    background: url("@imagePath/xenforo/gradients/notification4.png") no-repeat scroll center bottom transparent !important;
    width: 250px;
    height: 300px;
}
.gamer .gritter-with-image {
    width: 190px;
    margin-right: 30px;
    padding-top: 20px;
}
.gamer .gritter-image {
  margin-left: 70px !important;
  margin-top: 30px;
  width: 96px !important;
  height: 96px !important;
  border: 1px solid #242424;
  padding: 3px;
  background-color: #383838;
  border-radius: 3px;
}
.gamer .gritter-title {
  color: #5c88b0 !important;
  font-size: 11px !important;
}
.gamer .gritter-item p {
  color: #bcbcbc;
}
.gamer .gritter-dismiss {
  padding-bottom: 10px;
  padding-right: 75px;
  font-size: 11px;
}
.gamer .gritter-close  {
    background: url("@imagePath/xenforo/gradients/gamerclose.png") no-repeat scroll top left transparent;
    right: 125px !important;
    top: 0px !important;
}

For those that already implemented this card through the initial release you only have to add the following to your extra.css and upload the gamerclose.png icon to your gradients folder.

Code:
.gamer .gritter-close  {
    background: url("@imagePath/xenforo/gradients/gamerclose.png") no-repeat scroll top left transparent;
    right: 125px !important;
    top: 0px !important;
}
  • Like
Reactions: Chris D
Top Bottom