Spitzer Software Solutions

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