Topic: CSS Sprite for Simple Portal.

[Maarten]

Hey,


To optimize the load speed I want to request a CSS Sprite for the 'dots' () etc.
I already found a website to generate them! It works pretty easy http://spritegen.website-performance.org/

Code: [Select]

.sprite-dot1 { background-position: 0 0; width: 8px; height: 8px; }
.sprite-dot2 { background-position: 0 -18px; width: 8px; height: 8px; }
.sprite-dot3 { background-position: 0 -36px; width: 8px; height: 8px; }
.sprite-dot4 { background-position: 0 -54px; width: 8px; height: 8px; }
.sprite-dot5 { background-position: 0 -72px; width: 8px; height: 8px; }
.sprite-dot6 { background-position: 0 -90px; width: 8px; height: 8px; }
.sprite-dot7 { background-position: 0 -108px; width: 8px; height: 8px; }
.sprite-dot8 { background-position: 0 -126px; width: 8px; height: 8px; }

And

Code: [Select]

#container li {
   background: url(dots.png) no-repeat top left;
}
I really don't know how to apply it myself, especially in Simple Portal.
I apply 10px of space between every dot, I think this could be set lower but I'm not so sure it will effect it.

This would be a good thing, but it has a negative side too: It's more difficult to customize those images.


Greetings,
Maarten

EDIT:
Okay a little calculation:
335 + 292 + 327 + 327 + 327 + 339 + 339 + 343 = 2 629 bytes (are all dots together)
The uploaded one is 1.72 kB
And having them together by applying just 2px of space 1.24 kB.

[AngelinaBelle]

Can you be more specific on where and how you'd like these dots to be applied?
Can you show what a page/block/whatever would look like if it used this feature you are proposing?

[Maarten]

Portal images in general. Like all dots etc.
Because there are to many images on one page.. And like YouTube does they use CSS Sprite to let it load much smoother.

[AngelinaBelle]

I think I understand what you mean now.
SMF's curve theme (and themes based on it, like the one here at SimplePortal.net) keep all the bits of background image in one png file, and use offsets to show the right parts into the different style classes (http://simpleportal.net/Themes/default/images/theme/main_block.png, http://simpleportal.net/Themes/mehmene/images/theme/main_block.png)
 
Implementing this feature would certainly mean rewriting blocks like menu, User Info, and Who's Online, to switch from using <img> tags of individual colored dots to using the dot-background classes in lists.
 
If I can understand this feature request, then the developers can certainly understand it, and we'll wait and see if it is approved for a future version of SimplePortal.
 
If you want this feature now, I am sure you can get a hand in the custom coding board.  It seems to me the change is pretty straightforward pHp, and doesn't require a lot of familiarity with SimplePortal or even SMF.
 

[Maarten]

Yeah, kind of true I think the actual developers know better.
What this does is putting some images in one image file, than CSS makes it possible to show parts of the image on your wanted locations.

Like YouTube has, they don't use 40 images but uses 1 (Well, a several... One image will be inefficient too I guess).

This is the actual image of YouTube, here you can see how many images they put in one image file.