As most of the Magento users would be aware of, there is no default option for twitter feed in Magento. If you wish to have twitter feed in your site, you will need to create it manually.  We have discussed in this Blog the simple steps of adding a twitter feed in magento.

Step 1:

Go to the following site and include your Twitter Username: http://twitter.com/about/resources/widgets/widget_profile. Once done, click finish and grab the code. The script code will generate a copy of it.

Step 2:

The next step will be creating a static block for your twitter feed.

In magento admin panel:

Go-> CMS->Static block->add new block

Name : twitter

Id : twitter

Status : enabled

Step 3:

If you wish to show the twitter feed in homepage, you will need to copy and paste the code given below in CMS->Page->Homepage->content

Code:

Code:

{{block type="cms/block" block_id="twitter"}}

In a similar fashion, you will need to call a static block in sidebar as well.

For left sidebar: app/design/frontend/default/yourtheme/layout/catalog.xml

<reference name=”left”>
 
<block type="cms/block"> <actionmethod="setBlockId"><block_id>twitter</block_id></action></block>
 
</reference>

Output:

Stay tuned to our Cogzidel templates Blog for more sparkling news and updates!!

Cogzideltemplates.com known for offering bulk of templates flooded with rocking designs and bright colors has added a new theme titled Love Videos in PHPmotion 3.5 category. This crisp template has been designed to look clean and high-tech which is meant to attract the customers on their first visit to the site. This template will turn out to be an excellent choice for building social network sites where people can meet and share the videos, images and much more.

As this template is custom friendly, you can customize it as per your requirement and we can guarantee that your members will totally love this one! You can submit your suggestions on this fresh template to us.
To purchase this Php motion template, please follow this link, http://www.cogzideltemplates.com/templates/view/469

In Magento, the default homepage has got sidebars and main only.  Login page will not be available by default in the magento homepage. As most of the clients or customers are interested to have login form in the homepage so as to create a quick login area for their users, you will need to apply the below code in cms.xml file. Once the steps given below are followed, you will get the minified login page in magento homepage.

Path:

app/design/frontend/default/your theme /layout/cms.xml

In Cms.xml file, search for the following line given below:

<reference name=”content”>  <block type="cms/page"/> </reference>

Replace the above line with the following lines:

<reference name=”content”>
 
<block type="customer/form_login" template="customer/form/mini.login.phtml" />
 
<block type="cms/page"/>
 
</reference>

Please refer to the screen shot given below for pictorial representation of this Blog:

We would like to share the simple steps involved to display the customer login page in the homepage in Magento. Follow the path and attain it with ease so that the existing Customers can login using their username, password and the new customers can create an account quickly.

Path:

app/design/frontend/default/your theme /layout/cms.xml

In Cms.xml file, search for the following line given below:

<reference name=”content”>  <block type="cms/page"/> </reference>

Replace the above line with the lines given below:

<reference name=”content”> 
 
<block type="customer/form_login" template="customer/form/login.phtml"/>
 
<block type="cms/page"/>
 
 </reference>

Once the above steps are completed, the customer login form will be displayed in the homepage.

Cogzidel Templates is happy to announce that all the free Dolphin Templates have been upgraded to the latest version of Dolphin – Dolphin 7.0.8. Sounds interesting right? The wide choice of amazing free Dolphin templates can be availed in few steps using the URL given below:

•  Dolphin Free Templates
url: http://www.cogzideltemplates.com/download_free/templates/38

Cogzidel Templates is proud to announce that the Premium Dolphin Templates have been updated from Dolphin 7.0.7 version to 7.0.8 version. If you feel that it’s the right time to move on from the current look and avail the premium templates available in the latest version of dolphin, go ahead and review our list of premium dolphin templates using the url given below:

• Dolphin Premium Templates
url:http://www.cogzideltemplates.com/template/CMS_Templates/Dolphin_7_Templates

In default Magento, SKU and the short description details are given in the backend side. But it’s value will not be shown in the front page. We would like to discuss in this blog post about the steps in fetching the individual data and displaying them in the description page. Please check with the code given below:

Sku

<?=$_product->getSku()?>

Short Description

<?=$_product->getShortDescription()?>

Similarly, you can also show the Full description in the description page. You will only need to remove the word short in the above code. The code is given below for reference;

<?=$_product->getDescription()?>

A Screenshot given below for reference

In Magento, it is not possible to split the code as per the design in the Description page. We would like to share our knowledge on splitting the code individually for Quantity, Price and Add to Cart. Please find below the codes using which you can attain it with ease.

Quantity:

<?php echo $this->__('quantity:') ?>
<input name="qty" id="qty" maxlength="5" value="<?php echo $this->getMinimalQty($_product)== null?1:$this->getMinimalQty($_product) ?>"/>

Price:

<?php echo $this->getPriceHtml($_product, true) ?>

Add to cart:

<?if($_product->isSaleable()):?>
<button class="form-button"><span><?=__('Add to Cart')?></span></button>
<?endif;?>

A Screenshot given below for reference :

In Magento, name of the Categories and its Descriptions are shown in the Categories page. If you are looking to place this name below the toolbar or anywhere in magento, the php codes given below can be used.

Category name

<h1> <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getName(); ?> </h1>

Category description

<?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getDescription(); ?>

A Screenshot given below for reference

We have shared the steps to write a Css code suitable for Mobile Resolutions in this blog.

What’s the need for these types of Css?

When we apply normal css code in our site, the site will work properly. But when we go for mobile type and laptop type resolutions, normal css codes will not be able to produce profitable results. In these types of css framework codes, we will need to check our site in mobile resolutions as well. That’s the reason for this type of code being far better than the earlier one.

The solution for this type of coding is very simple. We have given below the process to write a CSS code which will suit Mobile resolutions:

1. Initially, you will need to write this code in an index.html page

(A) In the beginning of an html page, put this type of code before tag.

<!doctype html>
<html lang="en">

(B) After writing the above code inside the head tag, declare the types of codes shown below

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"/><![endif]-->
<link rel="stylesheet" href="css/style.css" media="screen" />
(or)
<link rel="stylesheet" href=" css / style.css " media="only screen and (max-width:1023px)">
<link rel="stylesheet" href="css/ mobile.css" media="screen" />

Or

{Note : You declare below type you call a css code in separate stylesheet}

<link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)">
</head>

(C) After calling the css files in the head, you will need to write your html codes

For example:

<div class="container">
<div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
</div>
</div>

(D) At the last, create CSS files

In style .css write this code in the container

In css, initially you will need to set the padding for container:

Code
.container  {  Padding-left:20px;  Padding-right:20px;  }

(2) A common code is given below:

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

(3) You do not give width and height for images online. You must write these code in css for image tag

img, object, embed {
max-width: 100%;}
img {
height: auto;}

(4) The next step is Max-width: 1140px which is set to your div and also width: 100%

.row
{
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .onecol {
width: 4.85%;
}

(5) After completion of the above steps comes the most important part where you will mention the code for various resolution here.

@media only screen and (max-width: 1023px) {
body {
font-size: 0.8em;
line-height: 1.5em;
}
}

Below code is used for mobile. When you see the site in mobile resolution, these type of css code will be called.

/* Mobile */
@media handheld, only screen and (max-width: 767px) {
body {
font-size: 16px;
-webkit-text-size-adjust: none;
}
.row, body, .container {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}

Upon completion of the steps stated above, you are done. You can now go and run your html page in your browser and also check various resolutions.

Please refer to the Screenshots given below:

1. Normal resolution

2. Smaller Screen Resolution

3. Mobile resolution

In this type of resolution, the entire floating elements are mentioned as none in css. Please refer to the css codes given above in this post.