http___www.ucionica.net_programiranje_sto-su-css-spriteovi-i-kako-ih-koristiti-925__1.xml
1.1 2.1 3.1 4.1 5.1 6.1 7.1 7.2 7.3 7.4 7.5 8.1 8.2 8.3 8.4 8.5 9.1 9.2 10.1 11.1 12.1 13.1 13.2 13.3 13.4 14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 24.1 25.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 36.1 36.2 36.3 37.1 38.1 39.1 40.1
Customizing the Live Chat button If you use the Chat Widget, you can change the "Live Chat" button's availability with the following options: - Always Available - Only when Agents are online - When Routing is enabled - Offer email if chat is unavailable To conveniently let users know when Chat is available, different images can be used. For efficiency, these images can be compiled into one file. The "on" and "off" states of the button are contained within this image, also known as "sprite". By shifting the background position, it is possible to display the button in its different states. To add this feature on your Help Center, follow these steps. First, go to the Admin Panel, click the Channels tab and select Chat. Open and copy "Embed Code". Next, go to "Support Center/Web Themes" and open your default theme. Once inside your default theme, click on "Advanced Themes" and select "Layout". Find the section for the "Live Chat!" and replace the existing code with the widget's embed code you copied. Note, the default template adds the widget on the right side of the page but the widget can be added anywhere on your Help Center. If you wish to place it anywhere else, make sure to add the Liquid statement that changes the button's availability. {% if site.chat_enabled_config %} --Chat code-- {% endif %} Second, create a sprite. The image should contain 3 states: link, hover and offline. Note: you will need to use your own custom images. The buttons shown below are examples: Next, go back to "Channels/Support Center/Web Themes" and select your default theme. In Advanced Themes, you can override the existing Desk.com sprite with your own. Upload the image to a server and create a new styling sheet. ".assistly-widget" is the class used to control the widget's image. Reference the sprite in the URL section of your code and add an important value to replace the current image. Tweak the background-position to display the desired part of the sprite. ".a assistly-widget a" is for normal link state; ".assistly-widget a:hover" is for hover; ".assistly-widget span" displays offline mode. When you are done, the code should look along these lines: .assistly-widget a { display: block; background: url(http://path.com/b.png) no-repeat !important; background-position: -2px -80px !important; height: 52px; width: 100% !important; overflow: hidden; text-indent: -900px; .assistly-widget a:hover { background-position: -2px -11px !important; .assistly-widget span { display: block; background: url(http://path.com/b.png) -2px -146px no-repeat !important; height: 52px; width: 100% !important; overflow: hidden; text-indent: -900px; The final step is to modify the widget's script to not be available at all times. In this example, chat will only be available when Agents are online. Go to "Layout" and edit the script accordingly: The results will look like this: ONLINE OFFLINE Alternatively, you can bypass the use of a sprite by creating buttons with CSS border-radius, shadow and gradients. Did you find this article helpful?
1.1 1.2 1.3 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 17.1 18.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1
Pri izradi većih web stranica iznimno je bitno opitimizirati stranice za brzo učitavanje na klijentskoj strani. Jedna od metoda koju koristimo su tzv. “CSS sprites“. Primjer na kojem ćemo raditi biti će jednostavan: Button i njegovo rollover stanje. Na takvom primjeru 2 requesta možemo smanjiti na 1. Izrada slike Prije svega moramo napraviti sliku koja će sadržavati oba izgleda buttona. Pisanje HTML-a Tekst linka Pisanje CSS-a .button { width: 151px; height: 25px; display: block; background: url(css-sprite-01.gif) no-repeat 0 0; /* prva nula znači pozicija na y-osi od gornjeg lijevog ugla, a druga po x-osi */ text-indent: -9999em; /* sakrivamo tekst koji piše untar a taga */ overflow: hidden; .button:hover { background-position: 0 -35px; /* pošto se po slici krećemo prema dolje tada je vrijednost negativna */ To je sve! Zamislite koliko biste ubrzali učitavanje kada bi Vaš cijeli Web bio u jednom sprite-u. Pogledajte primjer u browseru: CSS sprite primjer. Ponavljanje pozadine Ukoliko imate pozadine koje se pojavljaju po x-osi tada slike slažite jednu ispod druge. Ukoliko imate pozadine koje se pojavljaju po y-osi tada slike slažite jednu do druge. Kod repeatanja pozadine, imajte na umu da je pozadina široka tj. visoka koliko i sprite. Alati Na linku SpriteMe možete pronaći alat koji iz postojećeg web-a može napraviti sprite te odgovarajući CSS kod.