News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

SMF 2.0.10 CSS Sprites

Started by banks, July 29, 2015, 04:51:29 AM

Previous topic - Next topic

banks

Hi, I was using GT Metrix and was trying to figure out how to Combine images using CSS sprites
and it said :

The following images served from some.com [nofollow] should be combined into as few images as possible using CSS sprites.


    http://some.com/Themes/default/images/collapse.gif
    http://some.com/Themes/default/images/expand.gif
    http://some.com/Themes/default/images/icons/info.gif
    http://some.com/Themes/default/images/icons/online.gif
    http://some.com/Themes/default/images/new_none.png
    http://some.com/Themes/default/images/new_redirect.png
    http://some.com/Themes/default/images/off.png
    http://some.com/Themes/default/images/smflogo.png
    http://some.com/Themes/default/images/theme/backdrop.png
    http://some.com/Themes/default/images/upshrink.png
    http://some.com/Themes/default/images/upshrink2.png


so i found this site :
http://spritegen.website-performance.org/ [nofollow]

and created the png :


got the css :

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-backdrop {
    width: 13px;
    height: 477px;
    background-position: -5px -5px;
}

.sprite-collapse {
    width: 13px;
    height: 13px;
    background-position: -28px -5px;
}

.sprite-expand {
    width: 13px;
    height: 13px;
    background-position: -51px -5px;
}

.sprite-info {
    width: 18px;
    height: 18px;
    background-position: -74px -5px;
}

.sprite-new_none {
    width: 19px;
    height: 20px;
    background-position: -102px -5px;
}

.sprite-new_redirect {
    width: 19px;
    height: 21px;
    background-position: -131px -5px;
}

.sprite-new_redirect {
    width: 19px;
    height: 21px;
    background-position: -160px -5px;
}

.sprite-off {
    width: 38px;
    height: 41px;
    background-position: -189px -5px;
}

.sprite-online {
    width: 18px;
    height: 18px;
    background-position: -237px -5px;
}

.sprite-smflogo {
    width: 256px;
    height: 34px;
    background-position: -265px -5px;
}

.sprite-upshrink {
    width: 20px;
    height: 20px;
    background-position: -28px -49px;
}

.sprite-upshrink {
    width: 20px;
    height: 20px;
    background-position: -58px -49px;
}

.sprite-upshrink2 {
    width: 20px;
    height: 20px;
    background-position: -88px -49px;
}


i added the css code to the end of the Themes/core/css/index.css

Now my problem is what to do with the html code:

<i class="sprite sprite-backdrop"></i>
<i class="sprite sprite-collapse"></i>
<i class="sprite sprite-expand"></i>
<i class="sprite sprite-info"></i>
<i class="sprite sprite-new_none"></i>
<i class="sprite sprite-new_redirect"></i>
<i class="sprite sprite-new_redirect"></i>
<i class="sprite sprite-off"></i>
<i class="sprite sprite-online"></i>
<i class="sprite sprite-smflogo"></i>
<i class="sprite sprite-upshrink"></i>
<i class="sprite sprite-upshrink"></i>
<i class="sprite sprite-upshrink2"></i>


Illori

are you using the core theme or the default theme? if you are using the default theme adding that to the core css file will not do anything to help with the default theme.

unless you are very familiar with theme editing i dont really recommend you go down this route.

banks

I meant to say i added the css code to the end of the Themes/default/css/index.css

Gluz

Do you understand what CSS sprites are and how they work?

If you are doing it only because one suggestion of a page that tells you to use them without know how they work is a waste of time due the work required for a little improvement.

What you are trying to do is much more complicated than just copy and paste some code, you need to know the basics of HTML and CSS to edit the required files.

banks

Well hook me up then Bruh. Just need to be pointed in the right direction to the files . that's all

Illori

even if we pointed you in the direction of the files there are hundreds of edits required and more images that need to be sprited then what you have done. it is not easy to do and you can easily break your forum in the process.

banks

I appreciate your knowledge and advice and i understand things can be complicated. i will keep this open a few days to see if any MacGyvers show up

Illori

it is not a macgyver thing, it is basically writting almost all the templates where they call the css images to use another format to call them due to the sprite. if it was so easy to do it would have been done already and released as a mod you can install.

banks

I don't mind going into this hours long thing of editing. i think once i get a few images going the rest will just be as easier. i just need this one sprite thing and i will handle the rest. and what you said about files calling for the images .. that is exactly what i am looking for too. Who knows a mod might come out of this :D

Deaks

Banks I will be honest and say I only skimmed but can I ask why you think this is a good idea?

2.1 uses sprites for more stuff but def not the logo.  It will be torture to make changes to your forum.  Best advice is not to do it with so many, download 2.1 and look how it is done their, but for a newbie this is not advised. And start small on a few website not a forum that adds more complicated code into the mix
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Advertisement: