Inbox alert Icon v1

[Shelley]

Shelley submitted a new resource:

Inbox alert Icon (version v1) - This alteration will display a image above the inbox link when you recieve a PC.

View attachment 37677

Summary: This alteration will changed the default standard alerts on the inbox and display an envelope icon although I encourage to use a better image than the one I provided. Standard alerts are untouched and will display the balloon.
notes: If you have a custom navigation you may need to re-position the Icon as this was tested on a default installation.

Install: Simply upload the Icon to your...

Read more about this resource...

 

[Shelley]

Additional Note: Anyone wishing to re-colour the envelope can do by adjusting the colours on the psd image i provided (below) via the attachment in this thread.

 

[ip0dhacker]

Love all of your works man. Keep it up

 

[Brian Roberts]

good job shellby i always like your template changes in mods, very well done.

 

[aresoto]

hello, I have done what you indicate (modify the extra.css in templates) and no way to see the envelope when I have a question, change the code so

.navTabs .inbox .itemCount {
background: url("images/icons/alert_inbox.png") no-repeat scroll center transparent;
line-height: 13px;
box-shadow: none;
height: 22px;
min-width: 25px;
color: #4c4c4c;
top: -13px;}
 
.navTabs .inbox .itemCount .arrow { border-width: 0; }

 

[AWS]

Just seen this. Just what I needed. Users are asking for this and PM popup on new message. One problem solved. Thanks Shelley.

 

[Deepmartini]

This looks great. Wonderful! You are a wealth of ideas!

 

[jayramfootball]

I like this, but how do you centralise the message count in the envelope?

 

[Shelley]

I like this, but how do you centralise the message count in the envelope?

Change the line-height to around 20px

 

[Adam Howard]

I use Ubuntu, which means there is no direct way to convert a psd to svg file. I can open a psd and save it in many file formats, including psd, but there is no direct path from psd to svg in Ubuntu. Which is odd, because I can save any other file format into a svg, but if you know anything about image quality, saving png for example into an svg does not upscale the quality.

Anyways.... I wanted this as an svg for higher resolution support.

Here is the code I used

Extra.css

/* Notice alert icon */
.navTabs .inbox .itemCount {
    background: url("@imagePath/xenforo/icons/envelope.svg") no-repeat scroll center transparent;
    line-height: 20px;
    box-shadow: none;
    height: 20px;
    min-width: 25px;
    color: #4c4c4c;
    top: -13px;}

.navTabs .inbox .itemCount .arrow { border-width: 0; }
/* END Notice alert icon */

Attached is both the small svg icon I used and the original large (very large at 1488x1448) svg that you may change and edit if you wish.