Monday, April 30, 2012

Prestashop Change name of Category Home


Hello Prestashoppers, today's tip is about a small tip that may take a lot of time searching. When installing a fresh new prestashop version, you notice that the main category is called home. it is a built in category that you can't change from your back office, and mainly it doesn't appear in your front office as well. But when you install a third party module like Top Horizontal Menu, it appears in the menu as Home !!! which is confusing, as it looks like referring to homepage, while it actually points to products categories. So, how we change it !?

1- Open your database using a database management system ( like phpmyadmin ), and backup your database before any changes.
2- Open Table ps_category_lang.
3- find the category with id_category=1, and click the Edit icon beside it.
4- Change name ... replace Home with whatever you want ( eg. Products ).
5- Change link_rewrite ... replace home with whatever you want ( eg. products ).
6- Click Go.

And that's it. Again and again, don't forget to bakup your database before any changes.

Tuesday, April 24, 2012

Drupal convert any theme to RTL theme


Drupal themes and templates change the look of your site, controlling layout, block shapes and colors and so on. When you use any drupal theme, by default it is aligned left to meet most of languages.
today's tip is more than an easy tip, and it talks about how to convert your theme to be aligned right, to fit RTL ( Right To Left ) languages like Arabic and Hebrew.
Using Internationalization module, you could be able to create multilanguage website. if you use a language that is right to left and want you site to be switched when you change the language ... just do the following :

1- Open your theme folder ( sites/all/themes/[THEME_NAME] ).
2- copy your style.css file.
3- paste it again, and rename it to : style-rtl.css

That's it. Now drupal will switch your design by itself ( with no coding or anything of this ) to fit your site's language.

Thursday, April 19, 2012

Drupal add background images to primary links


Drupal is the most powerful free CMS I have ever seen. Today's tip is about making image menu, or a menu with text and background images inside drupal.

To make this follow the steps below :

1- Open your template.php file ( found inside your theme folder ), find the line :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and add the following code just before it :
<?php
function primary_links_icons_bg() {
  $links = menu_primary_links();
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"primary-links-$level\">\n";    
  if ($links) {
    foreach ($links as $link) {
       $link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
       $cssid = str_replace(' ', '_', strip_tags($link));
       $output .= '<li id="'.$cssid.'">' . $link . '</li>'; 
    }; 
    $output .= '</ul>';
  }
  return $output;
}
?>

2- Open your page.tpl.php ( found in your theme's folder ) and search for navigation code, in most themes it is called ( $primary_links ), search for it, it will look like :

<?php
if ($primary_links): ?>

SOME CODE [replace this code]

<?php endif; ?>

Replace the SOME CODE with the following code :

<div id="navigation">
     <?php print primary_links_icons_bg(); // function name must be the same as created in template  ?>
</div>

3- Now if you check you navigation links, you will find that every menu item has its own id, you can put background image in the css file for each item.

and that's it. now you can make a very neat and attractive menus using drupal.

Monday, April 9, 2012

Drupal Thickbox Remove Scrollers


Hello Developers, how is life going ?! Today's Tip is about removing scrolling bars from the thickbox popup page, In General, and using Drupal Thickbox module.

In General ... Thickbox generates an HTML iframe. To remove the scrolling bars from it, we can use the CSS property ( overflow : hidden ; ) ... but this property doesn't work in IE and Chrome.




To fix this issue for all browsers, you can add this property to the iframe itself ( scrolling="no" ).

Drupal Thickbox Module:

1- Open your sites/all/modules/thickbox
2- Open thickbox.js
3- near the line 223, you will find this line :

      $('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

Replace it with the following :

      $('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe scrolling="no" frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

this will remove any scrolling bar from the popup window, and THAT's IT.