Spitzer Software Solutions: 2012

Thursday, May 3, 2012

Prestashop blank BO and FO because of Rijndael.php

Hello Prestashopper. Sometimes when you try to move your prestashop website from one hosting to a new hosting, or when you migrate your database to an existing website database, it may cause a Blank Back-Office and blank Front-Office !!! this is somehow confusing, but we can fix it as follows :

1- Open your site's file manager, and open config/config.inc.php
2- Search for @ini_set('display_errors', 'off') and change 'off' to 'on'.
3- Now refresh your Front Office, if you find the following error :
Fatal error : Call to undefined function mcrypt_decrypt() in .................... Rijndael.php
4- Open your database using any database management system ( e.g phpmyadmin ).
5- Search for " PS_CIPHER_ALGORITHM " in " ps_configuration " table.
6- click on Edit, and change its value from 1 to 0.

7- Click Go.

and That's it.

Now your website will work perfectly.

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 :

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

Sunday, March 25, 2012

Drupal : give body tag a unique id depending on page path

Hello Developers, Today's tip title may be strange and need some clarification so i will first explain the title. When you use Drupal for development you may need to make different style for each page. To do so, you should have a unique ID for each page.
Today's tip will use the page path as an ID for the body.

1- open your template.php file.
2- find the following statement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3- paste the following code just before that statement :

<?php
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_bits = explode('/', $uri_path);
if ($uri_bits[0] == '') {
$body_id = 'front';
} else {
$body_id = str_replace('/','-', $uri_path); // use dashes to replace slashes in the URI
}
$body_id = 'page-'.$body_id; // add 'page-' to the front of the id
$vars['body_id'] = $body_id;
?>
4- Inside the body tag, put the following identifier :
id="<?php print $body_id ?>"

so that your body tag will look like that :
<body id="<?php print $body_id ?>" <?php if (!empty($body_classes)) { echo 'class="'.$body_classes.'"'; } ?>>

AND ... That's it :)

That code in step 3 creates a variable that trims the path of your node, and converts the slash separator to dash separator, then put the path in a variable, that you can use as ID for your page.

Friday, February 24, 2012

Prestashop : Can't access my administration back-office ( forgot my password )

Hello Prestashoppers, how is life ?? did you forget your back-office's admin password and want to retrieve it ?? Unfortunately Prestashop encrypts your passwords so that no body can hack it. and you may have installed the back office with a fake email ( just for testing ) and you forgot to point it to your real e-mail, so you can't use the ( Forgot my password ) tool in Prestashop.

What can we do now ?? Actually there is a technical solution, just go through the following steps :

1- First of all, open your "settings.inc.php" found in YOUR SITE ROOT/config/
2- Search for " _COOKIE_KEY_ ", this is a unique key for every prestashop shop , copy its value.

3- Go to PHPMyAdmin, and open your database, and view the "ps_employee" table where you will find your users and employees, you will find your email, and there is a row called "passwd", this row is where your Encrypted Password stored. Click on the Pencil image beside your user to edit it.

4- Now you can edit your password ... HOW ?? in the "passwd" Value, Paste your _COOKIE_KEY_ and then write your new password after it directly , and select "MD5" from combobox like the image :

Now you entered your cookiekey+new password like that :
dP47gS2BiDDEeX21eczayFaeySwi8Cr4Sy9bLTNDbjH855jUnvu21wAzMyNewPassword
as if it is one word.

5- Now you can access your back office again :) Save your new password in your wallet not to forget it again :D

Thursday, February 23, 2012

CSS Trick : text align justify with hyphenation using hyphens

CSS is Magic. it is really magic. today's tip is a very simple tip that can make your text awesome and looking better.
To make text aligned left or right, and we also know the Justify. but when you use justify, the browser adds spaces between words, may be in some lines 3 or 4 spaces to make the text justified, and sometimes this makes your page look like a SPACESHIP OF WORDS !! :)

Now, CSS adds Hyphens to your style, so you can make justify + hyphens, and it will cut the word at the end, add a [-] and complete the word in the next line ... Example :

.mydiv p
{
text-align:justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Now enjoy styling your text in all your websites, with a good Block look and no spaces :)

Wednesday, February 22, 2012

Novice Tip : Create custom Back link

Everyone on earth has the right to create his own website. Today's tip is a very very novice trick but useful.

What if you needed to create a link that refers you to the previous page !? i know that the Back button in all browsers do this feature ... but now you can implement this also inside your site ( may be for design issues ). To create such a link ( or button ), you need to add a javascript function in your Link mouse click event.
Example :

< a href="#" onclick="history.back(-1)"> Back </a>

This snippet will create a Back link, that will look up your history and go back one step. You don't need to add any javascript file to do this.

Now after we know the easy way, there is another way using PHP. This can be used if javascript is not available or if the javascript solution didn't work ( rarely happen ) !!

Example :
<?php
$url = htmlspecialchars($_SERVER['HTTP_REFERER']);
echo "<a href='$url'>back</a>";
?>

Enjoy Development :)

Tuesday, February 21, 2012

Beginners' Trick : Preloading Images using CSS without Javascript

Hello and welcome dear Developers. Today's tip is a very easy tip and very useful and saves lots of time. What if you make a photo gallery that contains 3 images, and when you hover on every image, it changes to another one. This requires that you make images like that :
<image src="images/image1.jpg" onMouseOver="this.src='images/image1-hover.jpg'" onMouseOut="this.src='images/ image1.jpg'" />

This piece of code will make 2 replaceable images, one standard, and one when you hover the mouse on it.

this action is pretty good, but when you do that, and test it online you will notice that loading the Hover image takes time !! so, we need to PRELOAD all images when the site opens. a known tip for that is to make a preload javascript function that loads all images before the page load.
But here is a very easy tip that is easier, and better than using javascript, it is using CSS.

HOW ????!

1- At the bottom of your html file, create your div that contains LOADED IMAGES like the folowing :

<div id="preloaded-images">
<img src="images/image1-hover.jpg" width="1" height="1" alt="Image 01" />
<img src="images/image2-hover.jpg" width="1" height="1" alt="Image 02" />
<img src="images/image3-hover.jpg" width="1" height="1" alt="Image 03" />
</div>

2- In your css file, write the following style ( or in the header, inside <style></style> ) :

div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}

this way will load all your images, and the delay time will disappear. This tip works in all browsers well.

Enjoy your time developing nice galleries ;)

Thursday, February 9, 2012

Duplicate Prestashop Module

Hello developers, how is life going !?! today's tip is for prestashop developers who need to work with the same module in different place. Also it will be fine for those who want to duplicate a module and make it appear in specific pages with specific cases ( a coming soon tip ).

now let's start our steps. i will use [BlockAdvertising] module as an example.

1- Copy your module's folder, paste it with a new name. example [blockadvertising02].
2- Change the related files inside your folder to different ones. example [blockadvertising.php --> blockadvertising02.php] and [blockadvertising.tpl --> blockadvertising02.tpl] .
3- Open the file " blockadvertising02.php" , and do the following :

3.1- Change the class name as follows:
class BlockAdvertising02 extends Module
3.2- Change your module's name in the class constructor as follows :
........
public function __construct()
  {
$this->name = 'blockadvertising02';
......
.........
  $this->displayName = $this->l('Block advertising 2.0');
3.3- If you don't want to share the parameters ( which is preferred ), change the parameters name as follows :
public $adv_link02;
..........
..........
$this->adv_link02 = htmlentities(Configuration::get('BLOCKADVERT_LINK02'), ENT_QUOTES, 'UTF-8');
...........
.................
  Configuration::updateValue('BLOCKADVERT_LINK02', 'http://www.prestashop.com');
......................
.............................
  if ($link = Tools::getValue('adv_link02'))
{
Configuration::updateValue('BLOCKADVERT_LINK02', $link);
$this->adv_link02 = htmlentities($link, ENT_QUOTES, 'UTF-8');
}
......................
.................................
  <a href="'.$this->adv_link02.'" target="_blank" title="'.$this->l('Advertising').'">';
..........................
...................................
  <label for="adv_link02">'.$this->l('Image link').'  </label><input id="adv_link02" type="text" name="adv_link02" value="'.$this->adv_link02.'" />

3.4- Make your new module use your new tpl file and assign the new values for the smarty in your Hook as follows :
$smarty->assign('adv_link02', $this->adv_link02);
return $this->display(__FILE__, 'blockadvertising02.tpl');
3.5- (Optional ) if you want to add more hooks to make your new module transplant-able in them, for example to put your advertisement in the product footer, make as follows :
function hookProductFooter($params)
  {
  return $this->hookRightColumn($params);
  }
4- Now open your new module's tpl file, blockadvertising02.tpl and change the following :
<div class="advertising_block2">
<a href="{$adv_link02}" title="{l s='Advertising' mod='blockadvertising'}">...........................</a>
just to pass your new parameter "$adv_link02" to your tpl file to show the right link.

5- Final step is to open your config.xml file and change the name and display name for your new module's name that will appear in the backend as follows :
<name>blockadvertising02</name>
<displayName><![CDATA[Block advertising 2.0]]></displayName>

AND THAT'S IT !!! .... i know it is some sort of a professional tip, but really if you follow the steps you will find it more than easy. Enjoy duplicating your modules for prestashop.

Monday, January 23, 2012

Prestashop blank front office or failed to open stream

Today's tip is a real problem that may waste lots and lots of time to just find where the error is !! Prestashop is a php cms that is used to develop E-Commerce websites. Hosting prestashop on a linux/apache server will cause no problem at all, but hosting it on a Windows server causes some problems.
you may find your Prestashop Back Office working properly but front office is Blank !! this problem happens because of Folder and File Permissions.

Beginner's tip : Flash window mode obaque

Hello developers ... today's tip is very simple but for some new developers it may waste most of their time thinking that it is a PROBLEM !!
Here is the Problem :
i develop a website that contains a flash banner, or a flash embedded object , and when i hover on the menu, the sliding sub-menu goes BEHIND the embedded flash object !!
solution is very simple actually, just when you embed your flash object write this property inside the embedding code :
wmode="opaque"

Example :

Browser Compatibility : vertical-align : middle using IE7 and CSS

Developing websites force the developer to work using different browsers with different versions also.

Internet Explorer's behavior with CSS is different than other browsers. CSS's vertical align : center doesn't work in IE7 and here is the expression to make it work perfectly.

Normal html developer :
1- in your folders, go to styles folder and create a new file called "style.ie7.css" .
2- in your page <head> tag insert the following code :

3- Open "style.ie7.css" file and write the following expression inside the component ( div, a, li, ul ... etc ) that you want to vertically align center :
{
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

Drupal Developer :
1- go to sites/all/themes/[YOUR_THEME] ... or where ever you put your themes folder, go inside it.
2- open the file called "style.ie7.css".
3- at the end of the code, add your components css class ( div, a, li, ul, .... etc ) and then add the following code inside it:
{
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

this expression will calculate the height of every container and divide it by 2 to get the middle of the container, then it will put margin-top that puts your component vertically in the middle of its container.

Hello and Welcome

Hello and welcome to Spitzer ... a blog for software solutions and tips & tricks about some tricky issues related to Web Development.

This Blog will mainly support web development using Drupal CMS , and if you face a problem at your work while developing a website using Drupal, you may find a solution here. So, come every now and then to check the new posts about some Common problems or even Rare problems that may face any developer on the internet.

About me, i am a Senior Web Developer ( and UI Developer as well ). I Develop websites using Drupal, Joomla, Prestashop, and more of CMS ( Content Management Systems ) that are commonly used nowadays for developing big projects and websites.

I wish you find a solution for your problem here and that i can save your time :)