How to make in admin page to see in navigation Badge with number of post.
Autors make new post and administrator see like in this image example:


Recommended Answers

All 4 Replies

Member Avatar

Has the badge number have to be part of the image or can it be a html tag overlapping the main badge?

Overlapping the main badge.

Member Avatar

Ok so not image then. You can create images on fly but you're happy with a css fix. The number can be created from server side and attached to a span tag or div tag and placed relative to the image. If nobody comes back with answer i may have crack at it.

I've had a little go, based on what's been said already:

It's a really basic CSS(3) example, and hasn't got any links or anything attached. Hopefully it's easy to see how this can be expanded on and developed how you wish. Play with it to get it looking how you'd like.

It works by relative positioning, shoving the badge in the top right (float:right), and then positioning it exactly where you'd like it to be (position:relative; top:-8px;...). Then a few margins, colours and a bit of padding to make it look pretty.

Looking at your example, I have used the Font Awesome SVG libary to replace the icon, and used plain text/html for the rest. I think this is faster and more efficient than loading an image, but the same CSS theory applies if you wanted to use an image instead.

Hope this helps!

commented: Good +15
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.