Flag Sprite missing in 2.1b1?

MasterOne

Is there supposed to be a flag sprite besides the link "Flag" by default in header of a comment, as it's done with the quote sprite besides the link "Quote" in the footer of a comment?

In my fresh installation I can see the Quote Sprite, but no Flag Sprite (as it's shown here on Vanilla Community Forum).

hgtonight

Flagging is a plugin. Enable it.

MasterOne

@hgtonight said:
Flagging is a plugin. Enable it.

It's enabled (otherwise the "Flag" link wouldn't show up in comments). I am only curious, because here at Vanilla there is a little flag picture left to the "Flag" word, whereas in my forum it's just the word "Flag" without picture.

hgtonight

That can be done in your custom.css file. You should be able to construct something very similar purely in CSS without needing a plugin.

Look into Firebug for Firefox or the Web Inspector for Chrome/Safari if you want to live edit CSS.

MasterOne

@hgtonight said:
That can be done in your custom.css file. You should be able to construct something very similar purely in CSS without needing a plugin.
Look into Firebug for Firefox or the Web Inspector for Chrome/Safari if you want to live edit CSS.

Of course, but is the mentioned behavior (no flag image) normal by default, and is the flag symbol here on Vanilla Community Forums a custom modification then?

hgtonight

Vanillaforums.org runs a custom version of vanilla and a custom theme. This site, while awesome, is not a good example of 'out of the box' Vanilla.

The images can be inserted through CSS.

MasterOne

@hgtonight said:
The images can be inserted through CSS.

I just took a look, the "Flag" image is present in applications/dashboard/design/images/sprites-14-000000.png but obviously not used. Some code missing?

hgtonight

It is a style choice. Use CSS if you want to use it. :-)

MasterOne

@hgtonight said:
It is a style choice. Use CSS if you want to use it. :-)

Just took a closer look. It doesn't seem to be solvable by just CSS, as there is a < span > within the < a > missing (I compared it to how it's done with the quote plugin). Looks like they are using a custom version of the flag plugin here on Vanilla Forums.

hgtonight

This is speculation, but i would guess it is an html override.

You probably don't need the span.

MasterOne

@hgtonight said:
This is speculation, but i would guess it is an html override. You probably don't need the span.

Another thing I haven't heard before. How does such a html override work? It most likely already has been mentioned here on the forum, I'll search for it.

Also the Flag link is placed in the CommentInfo div (shows up here between comment link and IP address), instead of the Reactions div. Not sure if this is intentional or not.

hgtonight

The most basic custom theme is a custom.css file. This is used to change the way things look. Tweak the colors, change the font, add some sprites. Anything that can be done purely in CSS is fair game.

If you need to add some markup that will appear on every page, you start modifying/creating your default.master view file. This can be thought of as the container, or wrapper. Everything gets shoved in this. This can be used to add markup like a second header, links to the other parts of your site, footer, anything you want to appear on every page.

If you need to add some type of consistent dynamic markup, you can use a theme hooks file. This is essentially a custom plugin that is enabled as long as your theme. Anything you can do in a plugin is possible here. I like to keep it simple and only do things like add javascript, redirect root categories when using them as headings, and setting the default category for new posts.

Finally, if you need to alter the way the html markup is presented on a specific page, you can use a view override. This is essentially replacing the initial vanilla markup with your own. I use this when I need to add markup in a place that is inaccessible through an event hook.

There is some overlap between these different theme customization files.

MasterOne

@hgtonight

I'll have to look into how Quotes and Flagging actually integrate with Vanilla, the clue surely is to be found there somewhere.

Tama

play with positioning

.CommentFlag:before{ content:" "; background: url('images/sprites-14-000000.png') 0 0 no-repeat; background-position: -50px -50px; display: inline-block; margin-left:-8px; padding-right:4px; height: 16px; width: 16px; }

MasterOne

@Tama

That looks very promising, will try asap.

MasterOne

@Tama

That's amazing, your solution leads exactly to the intended behavior without changing any HTML.

BTW How do you calculate the correct sprite position? By doing measuring on the sprites map, or is there a trick to it? The sprite map has 361 x143 pixel with 15 sprites in a line and 6 rows.

peregrine

@MasterOne said:
Tama

That's amazing, your solution leads exactly to the intended behavior without changing any HTML.

BTW How do you calculate the correct sprite position? By doing measuring on the sprites map, or is there a trick to it? The sprite map has 361 x143 pixel with 15 sprites in a line and 6 rows.

google sprites.

MasterOne

For future reference: The desired search term is "css sprites", and this seems to be the best resource: http://css-tricks.com/css-sprites/

AaronWebstey

I like this - auto-generate sprite positions. http://www.spritecow.com/

vrijvlinder

That spritecow is great ! Thanks for that

AaronWebstey

Yes it is! I've used it to fix my 'Unanswered' sprite and create a 'Best Of...' sprite ( @hgtonight‌ )