I ran the Google Page Speed Test and My score still stinks :) It suggested that I run Css Sprites even though I put this Hack on and it appears that I have sprites in the Image Directory that was made too.

But i suppose you do see an improvement?

Yes, google will still show up css sprites beeing an issue since gradients can't be included in the sprite since they are highly dependend on styles. But since they are mostly <10px google says you should combine them.
In addition, if you have some addons installed google might pick up on pictures those addons include.

And there of course is allways the option of using the 'add_custom_image_to_sprite' hook we provide in our addon, where you can add additional custom icons your board uses.

Aside that, i have to ask this, did you make the required template changes? Without them your board won't be using the sprite.

Hi Moof, can you provide some sort of instruction to add custom icons to your (super-great) plugin?

After running the google speed test, I noticed that there is still 27 images that is not turned into css sprites.

How do I add these as well?

Most of them are in my additional.css template.

Yes, I did make ther required Template changes and the listing of images they mention that should be made into CSS Sprites are these ..

GlossyHeader.png
collapse.png
collapse_40b.png
lastpost-right.png
search.png
widget-comment.png
selected-tab-gradient-with-top-alpha.png
icon1.png
arrow.png
bottom-shadow.png
event.png
facebook_login.gif
forum_stats.png
legend.png
navbit-home.png
rss_40b.png
tab-collapsed.png
forum.png
profile.png
category-16.png
forum_link-16.png
forum_new-16.png
forum_old-16.png
post_old.gif

Tough for me to say if there's been an improvement since I didn't run the test before hand. I'm trying to make other optimizations and work on the Leverage caching. My score of 54 is pretty bad :)

Those should be covered by the addon (if you made all template changes). If they are not you are probably using some what's going on block modification - then you should search for them manually and replace them.

I'm going to translate the custom_icon_add instructions we have posted on vb-ger.org right now, as a warning. They are what i would call advanced. ;)

How-To:
Include custom icons to your sprite:

!Warning! very advanced - if you do not know what you are doing. Stop right here.


Custom icons are added via plugin and hook

• In the ACP create a new plugin
  • Add-on: vBulletin
  • Hook: sprite_add_icon
  • Titel: choose your own title. whatever makes sense for you
  • execution order: 5
  • PHP-CODE: (this is an example, path would be your icon, css would be the name of your icon!)
    
    Code:

    ---

    $files[] = array(
    'path'    => $stylevars['imgdir_siteicons']['imagedir'] . '/add.png',
    'css'    => 'siteicons_add',
    'rollup'  => $CSS_FORUMHOME_ROLLUP,
    'height' => 23,
    'width' => 24,
    'padding' => array(
        'top'    => 4,
        'right'  => 4,
        'bottom' => 4,
        'left'  => 4
    )
);

    ---

• As for the rollup part. Right now allways use $CSS_FORUMHOME_ROLLUP - in later versions we will have different sprites for FORUMHOME and SHOWTHREAD (f.e.) - then you can choose which one. right now stay with Forumhome.
• height, width and padding are optional. If you do not need them, delete all of those array values.
• set it to active
• save
• refresh css sprites
• modify the template in which your sprite is placed
  search
  
  Code:

  ---

  <img srv="http://....customimage.png"  />

  ---

  replace
  
  Code:

  ---

  <span class="sprite_custom_siteicons_add" title="custom image"></span>

  ---

• the icon should be loaded via the sprite now

I hope it helps. And do not say i didn't warn you. It is advanced. :p

I'm sorry if I made you think too much today. I just realized that I only applied the Template Changes for this version not all of the previous ones. If I had any knowledge of what TMS does I'd use that, seems easier than having to go do all of these manual edits :)

Thanks Mooff, that helps a lot :)

But some of the images I have to replace is defined in additional.css.

Do I have to find where they are called in the forumhome template and add the <span class="sprite....."></span> code there and remove the line from additional.css, or is there another way to do that?

Hello archet1337,

please give an full example of your situation, this would help us to give you the best solution :)

Best regards
Sebastian