T3 CSS Sprite Bottom Logo

i want to do an image like that in the bottom of template the T3 Logo how can i do this was this done in photoshop as well can nu guys point me in some direction to do it and css programming to get functionality thanks

it's one picture. located in :

templates/gk_yourshop/images/t3-logo.png

css for it is here: templates/gk_yourshop/css/templates.css

Code: Select all

#t3_logo { display:block; width:160px; height:25px; margin:0 auto -90px auto; background:url('../images/t3-logo.png') no-repeat 0 center; text-indent:-999em; position:relative; left:40px; padding:0 0 20px 0; }

link can be changed here: templates/gk_yourshop/layouts/default.php

Code: Select all

    <a href="http://wiki.joomlart.com/wiki/JA_Template_Framework/Overview" target="_blank" id="t3_logo">Powered by T3 Framework</a>

i know this is for youshop, but it's almost the same for

i now understand how the css sprites work and how to create and control them with css, for others just an tip for that logo bottom one, just have to create an active state image, and an hover state image, and place the active above the hover in your photoshop document on an transparent layer or which every background layer you want to use, the images have to be same size, both height and width... then you just save it as png format, and use the adjust the css code to match width and height of images in file. i will be using css sprites more as this lowers http request and save you on bandwidth. thanks gavick team you guys rock