Vertical align in divs

Posted: April 12, 2016 in CSS 3

HTML :

      <div class="vcenter">
           <div class="col-md-4">1</div>
           <div class="col-md-4">2</div>
           <div class="col-md-4">3</div>
      </div>

CSS :

.vcenter {
    align-items: center;
    display: flex;
}
Advertisements

CSS3 triangle shape with link

Posted: November 27, 2015 in CSS 3

HTML

<div class="actions">
	<a href="#" class="button btn-cart">
		<img src="images/demo.png">
	</button>
	<a href="#" class="product-detail">
		<img src="images/demo.png">
	</a>
</div>

CSS

.actions {
    bottom: 0;
    height: 73px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 74px;
}
.actions .button.btn-cart img, 
.actions .product-detail img, 
{
    height: 100%;
    transform-origin: inherit;
    width: 100%;
}
.actions .button.btn-cart {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewX(1.02deg);
    transform-origin: 50% 0 0;
}
.actions .product-detail {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewY(141.02deg);
    transform-origin: 100% 0 0;
}
.actions .product-detail img {
    transform: skewY(38.02deg);
}

Like below :
Capture


Currently I have used easy responsive for tabbing and owlCarousel for Carousel.

HTML :


<div id="parentHorizontalTab">
	<ul class="resp-tabs-list hor_1">
		<li>Horizontal 1</li>
		<li>Horizontal 2</li>
		<li>Horizontal 3</li>
	</ul>
	<div class="resp-tabs-container hor_1">
		<div>
			<div class="new-products1">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products2">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products3">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>

	</div>
</div>

 

Script :

<script type="text/javascript">
	require (['js/easy-responsive-tabs','js/owl.carousel.min'], function(myjs) {
		jQuery(document).ready(function() {
			//Horizontal Tab
			jQuery('#parentHorizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion
				width: 'auto', //auto or any width like 600px
				fit: true, // 100% fit in a container
				tabidentify: 'hor_1', // The tab groups identifier
				activate: function(event) { // Callback function if tab is switched
					var $info = $('#nested-tabInfo');
					var $name = $('span', $info);
					$name.text($tab.text());
					$info.show();
				}
			});
			jQuery(".new-products1").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products2").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products3").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
		});
	});
</script>

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 Magento2

-> 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