1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Notification Card (Gamer) v2

Notification Card (Gamer)

  1. Shelley

    Shelley Well-Known Member

    Chris D likes this.
  2. Shelley

    Shelley Well-Known Member

    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.
     

    Attached Files:

    SchmitzIT and Chris D like this.
  3. Vincent

    Vincent Well-Known Member

    Once again love it Shelley, nice work!
    BTW: Once again thanks for tweaking my site :)
     
  4. RobinHood

    RobinHood Well-Known Member

    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!
     
    Shelley likes this.
  5. SchmitzIT

    SchmitzIT Well-Known Member

    Looking slick (and particularly greasy), Shelley :)
     
  6. MagnusB

    MagnusB Well-Known Member

    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 likes this.
  7. Shelley

    Shelley Well-Known Member

    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.
     
    Chris D likes this.
  8. Chris D

    Chris D XenForo Developer Staff Member

    Loving your work Shelley.

    And thanks for the promotion in your sig :p
     
    Shelley likes this.
  9. MagnusB

    MagnusB Well-Known Member

    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 likes this.
  10. Shelley

    Shelley Well-Known Member

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


    Great product deserves good promotion and support. And you're welcome. :)
     
    MagnusB likes this.
  11. MOZ

    MOZ Well-Known Member

    Lovely.
     
  12. Shelley

    Shelley Well-Known Member

    Shelley updated Notification Card (Gamer) with a new update entry:

    Added and fixed custom close icon and css fixed.

    Read the rest of this update entry...
     
    Chris D likes this.
  13. MagnusB

    MagnusB Well-Known Member

    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.
     
    Chris D likes this.
  14. Shelley

    Shelley Well-Known Member

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

    xIsabel38 Well-Known Member

    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?
     
  16. Shelley

    Shelley Well-Known Member

    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: Jun 23, 2013
  17. xIsabel38

    xIsabel38 Well-Known Member

    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")
     
  18. Shelley

    Shelley Well-Known Member

    Try adding the full path rather than using "@imagePath" it sounds like a path problem.
     
  19. xIsabel38

    xIsabel38 Well-Known Member

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

    Shelley Well-Known Member

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

Share This Page