1.) Create a folder inside the images folder and rename it to icons
2.) Add some images in icons folder
3.) Now go to the SCSS folder and Add below code in _framework.scss

// configuration variables
$icons-sprite-dimensions:true;
 
// required for basic spriting
@import "compass/utilities/sprites";
@import "../images/icons/*.png";
 
/* Compass mixin for displaying the custom classes.
*  Make sure to commenting out the all-icons-sprites mixin, otherwise you'll have duplicated classes.
*  .creator {
*      @include icons-sprite( your_image_name);
*   }
*/

5.) Complie SCSS folder & files

6.) Now you are ready to Use Dynamic Sprites Just use below code

classname {@include icons-sprite( your_image_name);}
 
Example:
 
.facebook-icon {@include icons-sprite(facebook);}

Click on image and play YouTube video

Posted: July 20, 2015 in ALL

Step 1 : Open URL – http://www.tools4noobs.com/online_tools/youtube_xhtml/

Step 2 : Paste your YouTube URL, Set configuration and then Click on Generate Code button as per attached screenshot.

1

Step 3 : Now you will get your YouTube embed code. please review attached screenshot.

2

Pate below HTML code in your website :

<div><img style="cursor: pointer;" src="capture.jpg" alt="" /></div>
<div id="thevideo" style="display: none;">
<object style="width: 400px; height: 225px;" data="http://www.youtube.com/v/mv1F_uBZRA4?color2=FBE9EC&amp;autoplay=1&amp;controls=0&amp;version=3&amp;modestbranding=1" type="application/x-shockwave-flash" width="300" height="150">        
<param name="movie" value="http://www.youtube.com/v/mv1F_uBZRA4?color2=FBE9EC&amp;autoplay=1&amp;controls=0&amp;version=3&amp;modestbranding=1" />        
<param name="allowFullScreen" value="true" />        
<param name="allowscriptaccess" value="always" />    
</object>
</div>

How to compile SCSS using Ruby

Posted: May 7, 2015 in Magento

-> Intall ruby
-> go to Ruby193\bin
-> C:\> cd Ruby22-x64\bin
-> C:\Ruby22-x64\bin> ruby -v
-> C:\Ruby22-x64\bin>gem install compass
-> C:\Ruby22-x64\bin> compass create (project path)
-> C:\Ruby22-x64\bin> compass watch (apply magento scss project path)


Add Custom Product Tab In Magento and get Attribute Content

Magento First

Navigate to Catalog > Attributes > Manage Attributes and click on Add New Attribute. Enter an attribute code “warranty” and be sure to specify Text Area for the textarea option. Fill in the remaining details to your preference.

The Code

In your theme’s design path, open the catalog.xml file. We’re going to add a custom tab, in my case a Warranty text, to appear immediately after the Additional Information tab. Second, locate the code for the Additional Information tab, which looks like this:

app/design/frontend/[theme]/default/layout/catalog.xml

<block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
     <action method="addToParentGroup"><group>detailed_info</group></action>
     <action method="setTitle" translate="value"><value>Additional Information</value></action>
</block>

Add your Code
app/design/frontend/[theme]/default/layout/catalog.xml

<block type="catalog/product_view_attributes" name="product.warranty" as="warranty" template="catalog/product/view/warranty.phtml">
      <action method="addToParentGroup"><group>detailed_info</group></action>
      <action method="setTitle" translate="value"><value>Warranty</value></action>
</block>

Now we need to create the custom view at catalog/product/view/warranty.phtml to perform the logic. You might want to get more creative with your names!

app/design/frontend/[theme]/default/template/catalog/product/view/warranty.phtml

<?php
$_product = $this->getProduct();
$attribute = $_product->getResource()->getAttribute('warranty');
if ( is_object($attribute) ) {
  $identifier = $_product->getData("warranty");
  echo $identifier;
}
?>

Please see below Demo :

Capture

Magento Satic Top links

Posted: March 3, 2014 in PHP

<?php if (Mage::getSingleton('customer/session')->isLoggedIn()): ?>
                <div class="top-links">
                    <a class="name" href=""><?php echo $this->__('Hi,'); ?> <span><?php echo Mage::getSingleton('customer/session')->getCustomer()->getFirstname(); ?></span></a>
                    <div class="top-links-dropdown">
                        <ul>
                            <li><a href="<?php echo $this->getUrl('customer/account/login') ?>" title="My account" ><?php echo $this->__('My account'); ?></a></li>
                            <li><a href="<?php echo $this->getUrl('sales/order/history') ?>" title="Track Order" ><?php echo $this->__('Track Order'); ?></a></li>
                            <li><a href="<?php echo $this->getUrl('customer/account/logout') ?>" title="Log Out" ><?php echo $this->__('Log Out'); ?></a></li>
                        </ul>
                    </div>
                </div>
            <?php else: ?>
                <ul class="links">
                    <li class="first last">
                        <a title="Log In" href="<?php echo $this->getUrl('customer/account/login') ?>"><?php echo $this->__('Log In'); ?></a>
                    </li>
                </ul>
            <?php endif; ?>

Add Custome Twitter API

Posted: November 25, 2013 in ALL

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--[if lt IE 9]>
                    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="twitter/jquery.tweet.js"></script>
        <style>
            #twitter ul li {list-style:none; font-family:Arial, Helvetica, sans-serif; color:#666666}
        </style>
    </head>

    <body>
        <div class="widget span3">
            <h4>Latest Tweets</h4>
            <div class="show-tweets" id="twitter"></div>
        </div>
        <script type="text/javascript">
            // Twitter
            $("#twitter").tweet({
                join_text: "auto",
                username: "    ", //replace this with your username
                modpath: './twitter/',
                avatar_size: 32,
                count: 10,
                loading_text: "loading tweets..."
            });

        </script>

    </body>
</html>

Download Twitter Javascript and attached : https://github.com/StanScates/Tweet.js-Mod

Cufont Fonts Javascripts

Posted: July 3, 2013 in Java Scripts

$(document).ready(function(){
Cufon.replace(‘.heading h1’, {
fontFamily: ‘HelveticaNeue’
});

Cufon.replace(‘.heading h2’, {
fontFamily: ‘HelveticaNeue’,
fontStyle:’italic’
});

Cufon.replace(‘.heading h3’, {
fontFamily: ‘HelveticaNeue’,
fontWeight:’regular’
});
});