Notification Card (Gamer) v2

[Shelley]

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.

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

This is an error on my part which I'll now correct in the release thread. Sorry about that .

 

[xIsabel38]

That did it. Once I used "gamer" it worked. I should also note that for some reason the preview feature in the Add-on itself doesn't show the correct image (it still shows the default black bg with white text), but it does show correctly live on the site.

As for your error, the fact you can even do this stuff is amazing in itself. I'm jealous of that, I wish I could do graphics. We're all human and make mistakes. No need to be sorry about it. I'm a bit curious as to why this was never reported to you a year ago and how others before me got it to work just fine but regardless, glad I could help in-directly solve an issue for future people.

 

[xIsabel38]

If you create a post int he resource discussions side I might have a solution for this. in that it will expand. If you let me know in the thread which colour card your using I'll try to work out a solution.

Hey Shelley, I didn't even think this might be possible. I'm using the default red one.

 

[Shelley]

Hey Shelley, I didn't even think this might be possible. I'm using the default red one.

Thanks. I think I can get this card to expand vertically but it's going to entail me re-doing the css. I've just this second finished slicing the card into 3 parts in photoshop (top part which will be fixed) center which will repeat and bottom part which will be a fix part. Hopefully I can work this all out and post something that will expand for those that prefer longer messages.

I better go and install the add-on on my test site see what I can work out. as soon as i have something that works I'll let you know and hopefully something that your looking for.

 

[xIsabel38]

Wow, thanks Shelley. That'd be awesome. I really appreciate it.

 

[Shelley]

Wow, thanks Shelley. That'd be awesome. I really appreciate it.

You're welcome.

I'm getting there but due to some restrictions I couldn't place the avatar above the lip of the ribbon but I do have the image expanding per message length. If you are happy with how the following is looking I'll make a few more refinements and then post it here for you. Bare in mind, the notification is now 3 images with two of the images being fixed and the part with the text sits over will expand.

Here's how it's looking.

Edit: Got a fix for the avatar to appear above the ribbon lip. Ignore what I said.

 

[Shelley]

Got everything completed.

Firstly upload the images in the attachment to your /icons folder then in the options when you create the card you'll have to set your custom class to gamerfluid and paste the following in your EXTRA.CSS.

.gamerfluid .gritter-top {
background: url("@imagePath/xenforo/icons/game_notifications_top.png") no-repeat scroll transparent;
width: 250px;
height: 139px; }

.gamerfluid .gritter-item {
background: url("@imagePath/xenforo/icons/game_notifications_center.png") repeat-y scroll transparent;
border-radius: 0;
margin: 0 0 0 ;
padding-top: 0;}

.gamerfluid .gritter-bottom {
background: url("@imagePath/xenforo/icons/game_notifications_bottom.png") no-repeat scroll transparent;
width: 250px;
height: 45px; }

.gamerfluid .gritter-image {
  margin-left: 60px !important;
  width: 96px !important;
  height: 96px !important;
  border: 1px solid #242424;
  padding: 3px;
  background-color: #383838;
  border-radius: 3px;
  position: absolute;
  top: -122px; }

.gamerfluid .gritter-with-image {
  width: 210px;
  margin-right: 60px;
  padding-top: 20px; }

.gamerfluid .gritter-dismiss {
  padding-right: 110px;
  font-size: 11px;
  position: absolute;
  bottom: -35px; }

  .gamerfluid .gritter-dismiss:hover {opacity: 0.6;}

.gamerfluid .gritter-title {
  color: #5c88b0 !important;
  font-size: 11px !important;
  text-align: center; }

.gamerfluid .gritter-item p { color: #bcbcbc; }

This is how the final notification looks so you have a preview before hand in how it'll look .

​

 

[Mike Edge]

Looks great! Very good job Shelley

 

[xIsabel38]

Yay! Awesome job. Now do I delete the old CSS and old images as well? I believe there was the notification4 and gamerclose .png files in the Gradient folders.

 

[Shelley]

Yay! Awesome job. Now do I delete the old CSS and old images as well? I believe there was the notification4 and gamerclose .png files in the Gradient folders.

Go into the notifications settings and delete the old notification then delete the css code from the extra.css and finally log onto your server (ftp) and delete the images off that.

 

[xIsabel38]

Shelley, this works perfectly. It's awesome! Now where can I donate?

PS- I apparently can't redo my review. Can you make an official update?

 

[Shelley]

Shelley, this works perfectly. It's awesome! Now where can I donate?

PS- I apparently can't redo my review. Can you make an official update?

No worries about the donation it's not required but I certainly appreciate that you offered. The fact you were the first to notice the restriction and brought it up got my backside out of gear to do this (it's something I've been meaning to do for a while, but got lazy) now was a good time to cater for people who wanted longer titles.

Don't worry about the review, it was a valid point you made at the time you reviewed and warranted the rating so no worries on that.

 

[xIsabel38]

Well, the review was warranted at the time but jeeze, a lot has happened since then. Since you fixed all the issues I think it will warrant a new review. If you ever do update this, I'll be sure to update the review on it.

As far as the donation goes, I tried to find some link on your site... btw amazing header you have there, probably my favorite part of the site. It just fits with your site name so well. I absolutely love it. I love your whole style. The warm colors is very inviting and makes the site look like a fun place to frequent. I also love the arrows to collapse or expand the sidebar, I don't think I've ever seen that before. What I don't love is that registration is closed, blah.

Okay, back to the point. I tried to spy find a donation link on the site and I even started checking other Add-ons of yours for one but it seems you've never requested it before. Well, I do appreciate the work you've put into this. It's an excellent look (even for non-gamer sites). Thank you so much.

 

[Shelley]

Well, the review was warranted at the time but jeeze, a lot has happened since then. Since you fixed all the issues I think it will warrant a new review. If you ever do update this, I'll be sure to update the review on it.

As far as the donation goes, I tried to find some link on your site... btw amazing header you have there, probably my favorite part of the site. It just fits with your site name so well. I absolutely love it. I love your whole style. The warm colors is very inviting and makes the site look like a fun place to frequent. I also love the arrows to collapse or expand the sidebar, I don't think I've ever seen that before. What I don't love is that registration is closed, blah.

Okay, back to the point. I tried to spy find a donation link on the site and I even started checking other Add-ons of yours for one but it seems you've never requested it before. Well, I do appreciate the work you've put into this. It's an excellent look (even for non-gamer sites). Thank you so much.

I'm currently cleaning the css up (eliminating all the !importants used) and tweaking the padding on some elements so I might just submit the cleaned up version as a separate resource. I'd strongly suggest you use the css which I'll post in the separate resource since the title padding has a large space.

Yeah the header I am happy with on my site. Depending on your timezone the whole header and colour changes. So between the hours of 7pm - 6am it'll display the moon logo and from 6am- 7pm the sun but I'm wanting to add more time zones to the point the image will changes every hour. But I got some help from @EQnoble getting this to work.

With regards to registration, that is a long story but to put it brief I got a lot of spammers spamming my forum and I was getting sick of cleaning it up. I'm hopeful with the right add-ons in place when I upgrade to 1.2 I can re-open registrations shortly afterwards. But the truth be known, I've submitted more resources at this site than my own so there's nothing really on my site that isn't here already.

 

[xIsabel38]

I'm currently cleaning the css up (eliminating all the !importants used) and tweaking the padding on some elements so I might just submit the cleaned up version as a separate resource. I'd strongly suggest you use the css which I'll post in the separate resource since the title padding has a large space.

Okay, I'll use the updated CSS. Thank you so much for your quick action and dedication to creating a fluid style.

Yeah the header I am happy with on my site. Depending on your timezone the whole header and colour changes. So between the hours of 7pm - 6am it'll display the moon logo and from 6am- 7pm the sun but I'm wanting to add more time zones to the point the image will changes every hour. But I got some help from @EQnoble getting this to work.

That is so cool, makes me want one. I checked it out but it didn't seem to work for me, ie... it's 4:50PM EST but it shows the Moon on both Chrome and IE. @EQnoble is actually helping me out with some stuff. He seems like a nice guy.

With regards to registration, that is a long story but to put it brief I got a lot of spammers spamming my forum and I was getting sick of cleaning it up. I'm hopeful with the right add-ons in place when I upgrade to 1.2 I can re-open registrations shortly afterwards.

I had that issue a while back when I used to run SMF and MyBB (It was 10x Worse on MyBB). Using Q&A and adding on the Bad Behavior Mod stopped it completely. I didn't find any Bad Behavior Mods here but I know @tenants does a lot of Security and Spam type resources. Wish you luck with this.

 

[Trekkan]

So... I just ran across this and it'd work perfectly on my site. So sorry to necro this thread, but Shelley always had some awesome stuff. I can't seem to get this to work with the latest version of Notices. I'm guessing some CSS might of changed because as far as I can tell everything looks good and "gamerfluid" is showing up where it should. But it doesn't have any of the styling that is located in extra.css. So I'm guessing the class names don't match anymore.

Anyone have any ideas?