Notification Card (Gamer)

Notification Card (Gamer) v2

No permission to download

Shelley

Well-known member
Shelley submitted a new resource:

Notification Card (Gamer) (version v1) - Notification Card (Gamer)

dlcF5.png


View attachment 31643

Summary You will need to have Notifications - powered by Gritter - Developed by Chris Deeming to use this.

Additional Notes: Because the notification add-on allows for multiple placements you may need to alter the css a little but these are designed and css for placements in the bottom-right....

Read more about this resource...
 
Update: Other variations of this card design with the orbs within the cards being of different colours for a variety of choice. Download via the attachment.

Note: You will need to have Notifications - powered by Gritter - Developed by Chris Deeming to use this.


Conditions of use: This pack may be used on forums, websites but cannot be redistributed or repackaged in any way shape or form for any reason without prior consent of the author.
 

Attachments

  • gamer-blue.webp
    gamer-blue.webp
    1.1 KB · Views: 16
  • gamer-green.webp
    gamer-green.webp
    1.2 KB · Views: 16
  • gamer-grey.webp
    gamer-grey.webp
    1.1 KB · Views: 15
  • gamer-orange.webp
    gamer-orange.webp
    1.2 KB · Views: 15
  • gamer-purple.webp
    gamer-purple.webp
    1.2 KB · Views: 15
  • gamer-yellow.webp
    gamer-yellow.webp
    1.2 KB · Views: 14
Pretty slick! I can't wait till I've got some free time to mess around in PS and make some of my own custom alerts :) Keep 'em coming Shelley!
 
Very nice indeed. It seems you forgot to position the gritter-close though, I went with this:
Code:
.gamer .gritter-close {
   top: 10px;
   left: 5px;
}

Not sure if I like it in that position, but it looks less out of place than floating 5 or 10 px above the visible box.
 
Very nice indeed. It seems you forgot to position the gritter-close though, I went with this:
Code:
.gamer .gritter-close {
  top: 10px;
  left: 5px;
}

Not sure if I like it in that position, but it looks less out of place than floating 5 or 10 px above the visible box.

hmm I don't think I even uploaded that to my ftp and completely forgot about it. I'll make the necessary amendments to that shortly as chances are the close icon will be a custom icon. Css will be fixed also one I designed that and uploaded it here. Thanks for the headsup (y)

Edit: your free to tinker with the css and make the necessary adjustments to your preference. Look at any css I post regarding notifications as a guide for those not fluent in css. More advanced users will refine the css to their preference.
 
hmm I don't think I even uploaded that to my ftp and completely forgot about it. I'll make the necessary amendments to that shortly as chances are the close icon will be a custom icon. Css will be fixed also one I designed that and uploaded it here. Thanks for the headsup (y)

Edit: your free to tinker with the css and make the necessary adjustments to your preference. Look at any css I post regarding notifications as a guide for those not fluent in css. More advanced users will refine the css to their preference.
Yeah, I figured we were free to tinker, and I almost always do minor edits anyway. I was just looking at it, and checking to see if I like it, and I saw the X floating far above, so I moved it :) I find it more difficult to write the text inside the box, I tend to ramble a bit too much....
 
Yeah, I figured we were free to tinker, and I almost always do minor edits anyway. I was just looking at it, and checking to see if I like it, and I saw the X floating far above, so I moved it :) I find it more difficult to write the text inside the box, I tend to ramble a bit too much....

:) I still can't believe I forgot about the close.png icon. I just tweeted call myself an idiot for forgetting this. :oops:


Loving your work Shelley.

And thanks for the promotion in your sig :p

Great product deserves good promotion and support. And you're welcome. :)
 
Shelley updated Notification Card (Gamer) with a new update entry:

Added and fixed custom close icon and css fixed.

nP529.png

View attachment 31673

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:...

Read the rest of this update entry...
 
I just noticed; You need to enable the avatar for the supplied CSS to work, the positions will be way off if you disable it. I was experimenting a bit, with adding in my own image instead of the avatar (and failed miserably, so far), but after disabling it, I saw that the text was way off. It is pretty evident when you look at the CSS, but not everyone will notice that.
 
I just noticed; You need to enable the avatar for the supplied CSS to work, the positions will be way off if you disable it. I was experimenting a bit, with adding in my own image instead of the avatar (and failed miserably, so far), but after disabling it, I saw that the text was way off. It is pretty evident when you look at the CSS, but not everyone will notice that.

Yeah, people will just have to use an avatar or adjust the css a little. this is the price paid for custom fixed images used. The resource css has to be treated as a guide, no exceptions if you happen to use an avatar and the location then it's a bonus, if not you can simply tinker with the css and people can make their own fixes. Primarily, the css is a guide it'll serve people better to start tinkering and learning.
 
I can't seem to get this to work. I'm not sure if it's outdated (as the last update was over a year ago) or if it's me <---- Probably it.
I think I pasted everything right. I deleted it all and tried again to be sure. I uploaded the image to my gradients folder.
And I tried (all without quotes): game .game and .gamer in the Advanced CSS field but it just shows up as the default black background with white text.

I honestly don't know what else it could be due to my lack of CSS knowledge. I know the Notifications Add-on has a GritterEXTRA.css template, should I try it in there?
 
When you created the notification did you create a custom class calling that custom class "game" ? other reasons could be you uploaded the image in a directory and the path to this is incorrect, viewing permissions set incorrectly (although if you see the notification it's probably one of the other two issues I mentioned.

All code will work in EXTRA.CSS I strongly advise you keep the css code in the EXTRA.CSS template. Also ensure you have pasted the code into the correct styles EXTRA.CSS template you want it to display in.

Untitled-13.webp
 
Last edited:
I don't know what I've done wrong. I'm pretty sure I did all of that.

My image files are in /testfiles/styles/aurora/xenforo/gradients (where testfiles is the forum root),

I tried what you wrote:
Code:
 background: url("@imagePath/xenforo/gradients/notification4.png")

When that didn't work I tried:
Code:
 background: url("@imagePath/aurora/xenforo/gradients/notification4.png")

And when that didn't work I tried:
Code:
 background: url("@imagePath/styles/aurora/xenforo/gradients/notification4.png")
 
I don't know what I've done wrong. I'm pretty sure I did all of that.

My image files are in /testfiles/styles/aurora/xenforo/gradients (where testfiles is the forum root),

I tried what you wrote:
Code:
 background: url("@imagePath/xenforo/gradients/notification4.png")

When that didn't work I tried:
Code:
 background: url("@imagePath/aurora/xenforo/gradients/notification4.png")

And when that didn't work I tried:
Code:
 background: url("@imagePath/styles/aurora/xenforo/gradients/notification4.png")

Try adding the full path rather than using "@imagePath" it sounds like a path problem.
 
Sigh. Okay lets see what I did here.

Step 1:
I uploaded the images and I was able to verify that it does in fact exist here: http://www.eqaddiction.com/testfiles/styles/aurora/xenforo/gradients/notification4.png

Step 2:
I made a test notification and set the Advanced Custom Style as game
Untitled.webp

Step 3
I put this into EXTRA.CSS and verified I was under the correct Styles Template.

Code:
#gritter-notice-wrapper.bottom-right .gamer{
    bottom: 30px !important;
    left: auto;
    right: 40px !important;
    top: auto;
}
.gamer .gritter-item{
    background: url("http://www.eqaddiction.com/testfiles/styles/aurora/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;
}

And that's all I did. Maybe I should note that my EXTRA.CSS has other stuff in it.
 
Sigh. Okay lets see what I did here.

Step 1:
I uploaded the images and I was able to verify that it does in fact exist here: http://www.eqaddiction.com/testfiles/styles/aurora/xenforo/gradients/notification4.png

Step 2:
I made a test notification and set the Advanced Custom Style as game
View attachment 49706

Step 3
I put this into EXTRA.CSS and verified I was under the correct Styles Template.

Code:
#gritter-notice-wrapper.bottom-right .gamer{
    bottom: 30px !important;
    left: auto;
    right: 40px !important;
    top: auto;
}
.gamer .gritter-item{
    background: url("http://www.eqaddiction.com/testfiles/styles/aurora/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;
}

And that's all I did. Maybe I should note that my EXTRA.CSS has other stuff in it.

Adjust the Advanced custom style field to "gamer" It's currently set to "game" that is the likely cause why it's not displaying.
 
Top Bottom