Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: Lou69 - tammikuu 02, 2012, 09:36:49 IP

Otsikko: main_block.png - just how does it work?
Kirjoitti: Lou69 - tammikuu 02, 2012, 09:36:49 IP
Greets,

I have searched this board for an answer, did not find one. The main_block.png has eight bars of color of specific length, width and height. Just how is each bar of color used and where? What are the dimensions of each bar?

thanks
Otsikko: Re: main_block.png - just how does it work?
Kirjoitti: mashby - tammikuu 02, 2012, 09:47:01 IP
It's a large (in real estate, not file size) sprite image (http://css-tricks.com/css-sprites/). Have a look at the main stylesheet of this site and you'll see it referenced all over the place.
http://media.simplemachinesweb.com/smf/default/css/index.css?fnl
http://media.simplemachinesweb.com/smf/default/images/theme/main_block.png
Otsikko: Re: main_block.png - just how does it work?
Kirjoitti: Lou69 - tammikuu 02, 2012, 10:28:47 IP
Thank you Mashby,  :)  I have seen the main_block referenced in my index.css, just did not understand how the individual bars of color were being called to display themselves. I've been using the W3 School to better understand the index.css file, but most this is quite new to me.

In this snippet from your .css link,

#footer_section
{
   text-align: center;
   background: url(../images/theme/main_block.png) no-repeat 0 -820px;
   padding-left: 20px;
}

How is it determined which color on the main_block ( sprite ) is chosen?

I appreciate the reply. On with my learning.  :)
Otsikko: Re: main_block.png - just how does it work?
Kirjoitti: mashby - tammikuu 02, 2012, 11:06:35 IP
0 -820px
That equates to the background position. Check this out (http://www.w3schools.com/css/css_background.asp) to learn more about it. :)
Otsikko: Re: main_block.png - just how does it work?
Kirjoitti: Lou69 - tammikuu 02, 2012, 11:35:48 IP
 :)  Gosh I am the dullard. I read the sprite link, digested it and now it has just dawned on me that these are x,y coordinates for the main_block.png image.

I am slow, but eventually I do catch on!   ;D

thanks
Otsikko: Re: main_block.png - just how does it work?
Kirjoitti: Realinfo - tammikuu 13, 2012, 10:10:52 IP
I made some changes in that to customize my default theme........... and it woks great............. we can use punypng to  decrease  kb of that picture.............