Topic: silly lightweight PM notification adjustment [2.0.15]

[drewactual]

as much as i like some of the alert systems out there both premium and freely available in the mod sets, i simply don't want to bog the page anymore than i have to... this is SO simple i don't know why i've not done it prior. 

in your sources/subs.php, find:

Code: [Select]

$context['menu_buttons']['pm']['alttitle'] = $context['menu_buttons']['pm']['title'] . '[' . $context['user']['unread_messages'] . ']';
$context['menu_buttons']['pm']['title'] .= '[ <strong">' . $context['user']['unread_messages'] . '</strong>]';


replace with:

Code: [Select]

$context['menu_buttons']['pm']['alttitle'] = $context['menu_buttons']['pm']['title'] . '[' . $context['user']['unread_messages'] . ']';
$context['menu_buttons']['pm']['title'] .= ' <span class="pmz-noty">' . $context['user']['unread_messages'] . '</span> ';

in your theme's CSS file, add something like this at the bottom; adjust as you see fit:

Code: [Select]

#button_pm .pmz-noty{background:red;border:1px solid #fff;border-radius:100%;padding:3px 6px;color:#fff;font-weight:700;text-align:center}


here is the product on my page in action.. you can tool the CSS however you want, but the point is it jumps out so users don't miss messages and it creates zero additional load (js) on a page....

[SychO]

Simple and effective

[Shambles]

It looks great on Crip's BlackBox theme

[vbgamer45]

Nice tip!

[GigaWatt]

Yeah, thanks for the tip .

[Rock Lee]

simple and direct, as I like it .


Regards!

[Antechinus]

Nice touch. I remember doing something similar years ago in a bit of custom theming, and I always rather liked the effect. From memory, I used relative positioning on the parent element and absolute on the span, to position it above the menu links as its own little pop-up. There are umpteen ways you can style the thing and most of them are pretty easy to arrange.

I'm surprised someone hasn't turned this into a mod before now. The Subs.php edit is really basic and unlikely to ever break anything.

[Diego Andrés]

Simple and useful.

Also as a detail, I believe it shouldn't be necessary to replace the <strong> tag since the only appearance of those in the menu is precisely for those numbers (PM's, reports and other stuff depending on a few mods available like DevCenter for errors log in Admin button). So could just play around with the strong tag along with the menu classes.

Regards

[drewactual]

yeah, the 'strong' tag 'can' be manipulated for that div id (button_pm) and avoid the subs.php edit altogether, but.... it's not clean or valid, which means a browser can stop honoring it at any point or a browser may just ignore it as it is right now just to honor it the next time... it can certainly be left in the strong tag, but wrapping it in a class harms nothing yet allows whatever css to be applied that meets the need of the user- square, transparent, float or anchored.... it can even be given an absolute and/or fixed and a z-index above other elements an staying on the screen (upper right, let's say) just so you KNOW it is seen by the user...

i think the point is to just get it into a class where the user can manipulate it at will and with ease, and that is valid. 

i'm happy others can take this and use it- it is SO silly a little thing it should have been done a long time ago and addressed by many.  at least i should have done it on my own pages a long time ago... it's one of those things that easily fall off the radar, ya know?

[Antechinus]

There's nothing wrong with using the strong tag. It's perfectly valid HTML, and no browser is likely to stop recognising it in the foreseeable future. A class isn't strictly necessary, and the lack of one doesn't stop you styling the tag any way you like. Obviously you'd have to declare display: block; for some styling options, but that's fine.

By using descendants you could easily target the CSS to the PM button even if there were other strong tags floating around. Slightly less efficient in terms of CSS processing, but slightly more efficient in terms of HTML. For this example nobody is ever likely to notice the difference even if they are benchmarking nuts.

The strong tag isn't bound to bold text or to being an inline element. It's just meant to indicate text that should have attention paid to it, which is ideal for this use case. Within reason you can pretty much use it however you like without any browser or semantics nerd throwing a wobbly over it. So if someone wants to use the same idea without editing Subs.php there's nothing to stop them doing it.

[drewactual]

There's nothing wrong with using the strong tag. It's perfectly valid HTML, and no browser is likely to stop recognising it in the foreseeable future. A class isn't strictly necessary, and the lack of one doesn't stop you styling the tag any way you like. Obviously you'd have to declare display: block; for some styling options, but that's fine.

By using descendants you could easily target the CSS to the PM button even if there were other strong tags floating around. Slightly less efficient in terms of CSS processing, but slightly more efficient in terms of HTML. For this example nobody is ever likely to notice the difference even if they are benchmarking nuts.

The strong tag isn't bound to bold text or to being an inline element. It's just meant to indicate text that should have attention paid to it, which is ideal for this use case. Within reason you can pretty much use it however you like without any browser or semantics nerd throwing a wobbly over it. So if someone wants to use the same idea without editing Subs.php there's nothing to stop them doing it.

^that's good to know, and it eliminates the need to adjust subs.php altogether.  And... I'm NOT innocent of this- one of the examples i've relied on is for the post editor and post display specifically, and is styling br's... not something supported, but something every major browser has honored.   basically, i styled br's in post class div's to display in blocks and with a bottom margin of 1.2em.  same concept as styling a strong tag in the button_pm div id....

i've watched and waited for a browser update to happen along that would render it useless... or worse... but it hasn't happened yet.  if this is true (and i value your knowledge over my own) then there are a lot of items that can be tweaked by styling tags within defined divisions.  cool!

[Antechinus]

Never knew you could style br's, but they're block display by default anyway. Are you sure you don't mean hr's? They're block display too, but people often style them.

Anyway sure, you can just use descendants to style child elements of any defined parent element. Classes are only a convenience to make writing and maintaining CSS easier. There's no actual requirement to use them, so people just use them when they think it's going to make their lives easier. Using descendants is slower to process, but as long as you don't go overboard with long strings of them it's not really an issue. Once things get to the point where your descendants are becoming a bit gruesome it usually makes more sense to throw in a class and cut out some code. The other advantage is that providing you give the class a good, descriptive and easily understandable name (which people often don't ) it makes it more obvious what your code is doing. That's always handy when you come back to it after a break.

[drewactual]

Nope... BR's, not hr's for sure. I don't know if it responds to the block but it sure does the margin below, which is its value to my purpose. ... And as far as CSS goes, I've got a massive minified and combined file that needs to lose some weight... I wager a full third is no longer used. Its on my todo list.

[Antechinus]

The Line Break element - Styling with CSS

You can set a margin on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose.

Must admit that would have been my go-to solution. Line-height is an obvious one to use for the purpose.

[drewactual]

It seems I recall trying it with mixed results... I did read that, bit tossed caution to the wind in using it.

[Wellwisher]

I was looking for this for ages. Thanks bud. 

[Antechinus]

As it turn it out, I just resurrected this idea for something I was working on. This is a pure CSS option that works on default markup.

This CSS is simply this:

Code: [Select]

#button_pm strong {
display: inline-block;
position: relative;
z-index: 1;
margin: 0 -4px;
padding: 0 10px;
background: #f88c00;
color: #fff;
border-radius: 5px;
}
And it looks like the screenshot. The way it works is the relative positioning and z-index put the strong tag higher in the stack than the square bracket that comes after the strong. The negative left and right margins then pull the square brackets in so they are hidden behind the strong tag. The rest is just eye candy.