• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Notification Card (Gamer)

Notification Card (Gamer) v2

No permission to download
Notification Card (Gamer)

Shelley

Well-known member
#1

Shelley

Well-known member
#2
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

MagnusB

Well-known member
#6
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.
 

Shelley

Well-known member
#7
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.
 

MagnusB

Well-known member
#9
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....
 

Shelley

Well-known member
#10
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

Well-known member
#12
Shelley updated Notification Card (Gamer) with a new update entry:

Added and fixed custom close icon and css fixed.


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

MagnusB

Well-known member
#13
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.
 

Shelley

Well-known member
#14
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.
 

xIsabel38

Well-known member
#15
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?
 

Shelley

Well-known member
#16
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.png
 
Last edited:

xIsabel38

Well-known member
#17
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")
 

Shelley

Well-known member
#18
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.
 

xIsabel38

Well-known member
#19
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.png

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.
 

Shelley

Well-known member
#20
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.