Front-end Web Developer | Tampa, FL

Connect to FTP or if you work on local machine open this folder:

app/design/frontend/default/

And move here blank_template folder from downloaded file

Then open folder:

skin/frontend/default/

And move here blank_template folder from downloaded file

Login to Magento admin panel: www.YourSiteName.com/index.php/admin/

Mouse over on System horizontal menu, then click on Configuration.

Then click on Design, then Themes

and add to Default field your template name. Click on Save Config button.

That’s it. Have fun 🙂

First variant – using CSS property: DISPLAY: NONE

Fortunately, Cascading Style Sheets (CSS) offer you an easy and reliable option. Using the DISPLAY property, you can tell the browser to request an image, but NOT to display it on the page. The browser just requests the image from the server and caches it for future use.

First of all, we need to create class with display none, and add it to the Head of page:

{CODE type:php;}<style type=”text/css”>.preloadImg {display:none;}</style>{/CODE}

Or simple add this class in your_style.css

{CODE type:php;}.preloadImg {display:none;}{/CODE}

Next we have to add preload images to Your HTML home page. I recommend add this code to the bottom of your home page.

{CODE type:php;}<img class=”preloadImg” src=”my_preload_image.jpg” alt=”Don’t forget to add ALT” title=”Don’t forget to add Title” height=”100″ width=”100″ />{/CODE}

Note: don’t forget to add class preloadImg for the all preload images

Second variant – using CSS Sprites

In my previous articles a completely explain what is CSS sprites (Image sprites). I use this method for rollover menu. So in this article i’ll show just a method:

Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

{CODE type:php;}
#nav li a { background-image: url(‘../img/image_nav.gif’) }

#nav li a.item1 { background-position: 0px 0px }
#nav li a:hover.item1 { background-position: 0px -72px }

#nav li a.item2 { background-position: 0px -143px }
#nav li a:hover.item2 { background-position: 0px -215px }
{/CODE}

So what we’ve got. The browser display only first image and the others will not display.

And the last one, if You are the fan JS code

If You want to add JS preload to your page add:

{CODE type:php;}<script_type=”text/javascript”_language=”JavaScript”>
var name_image=new Image(width, heght)
name_image.src=URL
</script>{/CODE}

For example we want to preload image with name ‘xxxx.jpg’ form ‘images’ folder:

{CODE type:php;}<script_type=”text/javascript”_language=”JavaScript”>
var xxxx.jpg=new Image(450px, 100px)
xxxx.jpg.src=”../images”
</script>{/CODE}

Ugh. I spent 2 hours to write this article and i hope it will help You :). And if you have any questions, leave me a comment.

Click on Home Menu name (with a Default Star)

In right side click to Parameters (System) and change Page Title.

That’s it. I hope it will help You 🙂

Making backups is essential because problems inevitably occur and you need to be in a position to take action when disaster strikes. Spending a few minutes to make an easy, convenient backup of your database will allow you to spend even more time being creative and productive with your website.

How often should You back up Your site?
That depends on how often you blog, how often you want to do this, and how you would feel if your database were lost along with a few posts. It is your decision. I do this every week, I put remainder  so i don’t forget to do this.

How many backups should I keep?
Excellent question. Most people make a backup and then just replace it every time. It saves space and is less to worry about. But what if that backup file is corrupted or lost? Then what? The general rule of thumb is to keep at least three backups and keep them in three different places or forms, like CDs, different hard drives, web disk, your e-mail account, etc.

This post I took from WordPress official site.

Ok, lets start Backing Up Your WordPress Site:

There are two parts to backing up your WordPress site: Database and Files. You need to back up the entire site, and you need to back up your WordPress database. Below are instructions for backing up your WordPress database for various server programs. We will start with backing up the rest of your WordPress Site.

Your WordPress site consists of the following:

1. WordPress Core Installation
2. WordPress Plugins
3. WordPress Themes
4. Images and Files
5. Javascripts, PHP scripts, and other code files
6. Additional Files and Static Web Pages

All of these are used in various combinations to generate your website. The database contains your posts and a lot of data generated on your site, but it does not include the above elements that all come together to create the look and information on your site. These need to be saved.

Most hosts back up the entire server, including your site, but it takes time to request a copy of your site from their backups, and a speedy recovery is critical. You need to learn how to back up your own site files and restore them.Here are some methods.

Website Host Provided Backup Software

Most website hosts provide software to back up your site. Check with your host to find out what services and programs they provide.

Create Sync With Your Site

2Bright Sparks’s Syncback and WinSCP are programs which allow you to sync with your website to keep a mirror copy of the content on your server and hard drive updated. It saves time and makes sure you have the latest files in both places.

Using FTP Clients or UNIX Shell Skills you can copy the files to a folder on your computer. Once there, you can zip or compress them into a zip file to save space, allowing you to keep several versions.

Remember, keep at least three backups on file, just in case one is corrupted or lost, and store them in different places and on different mediums, like CD, DVD, different hard drives, etc.

Database Backup Instructions

Back up your WordPress database regularly, and always before an upgrade or move to a new location. The following information will help you back up your WordPress database using various popular server software packages. For detailed information, contact your website host for more information on the program, control panel, and resources they provide.

Accessing phpMyAdmin

phpMyAdmin is one of the most popular database management systems found on most website hosts. You will need to know where it is and how to access it on your website host’s interface or control panel. We have provided information on accessing phpMyAdmin below.

phpMyAdmin is used by site administrators to manage and interact with their MySQL databases. During the installation process, you probably accessed mySQL through phpMyAdmin to create your WordPress Database and set up the password. WordPress stores all of its information in the MySQL database and phpMyAdmin provides the interface to access that data.

While familiarity with phpMyAdmin is not necessary to back up your WordPress database, these instructions should take you step-by-step through the process of finding phpMyAdmin on your server and then you can follow the instructions below as a simple and easy backup or for more detailed instructions see Backing Up Your Database.

cPanel backup

On your main control panel for cPanel, look for the MySQL logo and click the link to MySQL Databases. On the next page, look for phpMyAdmin link and click it to access your phpMyAdmin.

cPanel Access Databases

cPanel Access to phpMyAdmin

Direct Admin

From Your Account page, look for MySQL Management and click it to access phpMyAdmin.

Direct Admin Access to phpMyAdmin

Ensim

Look for the MySQL Admin logo and click the link. Under Configuration choose MySQL Administration Tool.

Plesk

Click the button for Databases. Then choose the link to the WordPress database you setup during the WordPress installation. Then click on the button for phpMyAdmin.

vDeck

From the main control panel, click Host Manager, then click Databases. In the next window, click Admin. Another window will popup taking you to the phpMyAdmin login screen.

Ferozo

Login to your Ferozo Control Panel by using your credentials. Once inside, go to the “Base de Datos” (“Data Base”) menu and then click on “Acceso phpMyAdmin” (“Access phpMyAdmin”). A new window will open displaying the phpMyAdmin login screen.

Simple Backup

The following is a very simple version of how to use phpMyAdmin to back up your WordPress database. Once you have discovered how to access your site’s phpMyAdmin, follow these simple instructions.

Begin by clicking database in your phpMyAdmin panel.

You may have several databases. Click the one that holds your WordPress data, the database you created when you installed WordPress.

This shows only default tables. You may have more tables – this would happen if you have any statistics plugins or anti-spam plugins.

1. Select ONLY those that hold your WordPress site.
2. Check the “Add DROP TABLE” box.
3. Check the “Complete inserts” box.
4. Check the “Save as File” box.
5. Check the “None” for compression. If your database is very large use a compression method.
6. Click Go. The data will now be saved into your computer.

Keep these files safe!

Making backups is essential because problems inevitably occur and you need to be in a position to take action when disaster strikes. Spending a few minutes to make an easy, convenient backup of your database will allow you to spend even more time being creative and productive with your website.

How often should You back up Your site?
That depends on how often you blog, how often you want to do this, and how you would feel if your database were lost along with a few posts. It is your decision. I do this every week, I put remainder  so i don’t forget to do this.

How many backups should I keep?
Excellent question. Most people make a backup and then just replace it every time. It saves space and is less to worry about. But what if that backup file is corrupted or lost? Then what? The general rule of thumb is to keep at least three backups and keep them in three different places or forms, like CDs, different hard drives, web disk, your e-mail account, etc.

How to Backup Your SQL data?
We can use several methods to backup SQL date. The simple method add plugin. Here some of Backup Plugins:
JBackup System Plugin. Some of plugin features:

* Sending backup file with mail
* Can save the backup file of sql or your selected archive to server
* Can select daily backup or interval of time
* Sending warning message

After saving SQL database you need to backup your template, media, customizations etc. These are things which do not change often… so a simple FTP transfer to a backup area should be sufficient.

You can also choose to use a component for your backups:

JoomlaPack – JoomlaPack is an open-source backup component for the Joomla! CMS, quite a bit different than its competition. Its mission is simple: create a site backup that can be restored on any Joomla!-capable server. Its possibilities: endless It creates a full backup of your site in a single archive. The archive contains all the files, a database snapshot and an installer derived from the standard Joomla! installer. The backup and restore process is AJAX powered to avoid server timeouts, even with huge sites. Alternatively, you can make a backup of only your database. If you want a reliable, easy to use, open source backup solution for your Joomla! site, try it out.

This is Non-Commercial component with great support so I recommend it to use.

JoomlaCloner – JoomlaCloner is a backup and restore component designed for Joomla!

By it’s name, the purpose is to give users possibility to clone their Joomla installation and move it over the internet on any location!

The follower, XCloner 2.0 is the new upgrade for JoomlaCloner, and it’s a standalone and Joomla 1.5 native component!

Frontend Features:

– Share custom backups with your users
– Users have the possibility to automatically transfer the custom clone to their host by using a simple ftp form
– Users can automatically restore the transferred clone by using the provided restore script we provide and which we transfer automatically among with the clone

Backend Features:

– Create full or partial backups based on your input
– Create ZIP or TAR backups based on your configuration input
– Possibility to create incremental backups, so you avoid the time limit problems on php script executions
– Possibility to exclude components, modules, mambots from your generated clone
– Possibility to exclude directory and files from the backup, manually or through cron settings(AJAX powered)
– Create backups based on a cron task, created backups can be stored on the local server, remotely through ftp or emailed to a custom email account
– Possibility to run multiple cronjobs, based on different configuration files
– Ability to manage existing backups, rename/delete/move, publish to user frontend for sharing
– Possibility to clone any backup to another location, it can be done automatically by using the server ftp function or manually
– Configuration area lets you choose on how to generate backups based on your server possibilities
– You can choose to create backups by using only PHP, or by also using some server utilities to speed things up

Restore Features:

– The generated clone of JoomlaCloner can be restored on a totally different server, with new server and mysql details
– Restore both ZIP or TAR archives
– Restore script is independent from the main component and Joomla and can be run on any host
– Full restore of a clone made with JoomlaCloner
– Ability to restore the original files and directories permissions
– Automatic re-write of the new host settings to the configuration file
– Ability to import the clone using either a ftp simulated sessions, or direct restore through php
– Possibility to exclude database from importing
– Ability to restore multiple clones to different locations, and also restore multiple database backups from the same clone

1. Adding simple code in Your active Theme pages:

{CODE type:php;}
<?php if ( is_front_page() ) {?>
html for home page
<?php }else{?>
html for other pages
<?php }?>
{/CODE}

For example we want to customize content and remove sidebar from Home Page, we need change page.php in default Theme. Open page.php, You can find it on FTP: wp-content/themes/default/page.php and add this code:

{CODE type:php;}
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

get_header(); ?>

<?php if ( is_front_page() ) {?>

<div id=”content” class=”HomePageNarrowcolumn” role=”main”>
…
</div>

<?php }else{?>

<div id=”content” class=”narrowcolumn” role=”main”>
…
</div>
<?php get_sidebar(); ?>

<?php }?>

<?php get_footer(); ?>
{/CODE}

2. The second way add home.php in Your active Theme. WordPress will recognize a home.php document in your template directory and use it rather than index.php to theme Your front page.

3. Front Page Plugin For WordPress.
The Opt-In Front Page plugin lets you add posts to your front page on an opt-in basis, rather than remove posts on an opt-out basis. This allows you to manage any number of asides categories.

In short, only posts in your “Blog” (or “News”) category will appear on your front page and its RSS feed when you use this plugin.

It changes your main category’s url as relevant, and it fallbacks to normal blog mode when no ‘blog’ (or ‘news’) category exists or when the latter is empty.

You can safely change your “Blog” or “News” category’s name after it is created: The opt-in front page plugin looks for the category with a slug of “blog” or “news”.

Download this plugin

In conclusion i want to say that You can use all this variants. In my WordPress projects I used first variant with php code as for me its more simple 🙂

Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.

Why combine all those images? Isn’t it quicker to have smaller images?

Nope, it’s not. Back in the day, everybody and their brothers were “slicing” images to make pages load faster. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.

Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

OK. So how it works?

I thought you would never ask. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.
CSS Code:

{CODE type:php;}#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}
…
{/CODE}

Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image. I won’t go into great detail about how this is done, I’ll just give you a basic walkthrough. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

{CODE type:php;}
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…
{/CODE}

We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.

Ugh. That sounds like a lot of work.

Just remember what Chuck Norris once said: “All great things require great dedication.” Actually I’m not sure if he said that or not, but it’s good advice anyway. But fortunately for you, there is a web service which makes creating and implementing sprites really easy. There are actually lots of different services designed to help you making sprites easier. See examples below:

What can’t sprites do?

They don’t do repeating graphics. Sprites are for graphics that are just single blocks. Icons are a great example candidate for CSS sprites.

Either start from the beginning with Sprites, or do it all at the end

The using of sprites is a no-brainer. You should do it. But what is the workflow when creating a new design? I think you should go one of two routes. The first is to know that you are going with sprites from the get-go and built it as you go along. That means have a Photoshop file open, start from the upper left, and drop stuff in as you need it. If you have another icon (or whatever) that makes sense to put in a sprite drop it in there and resave it.

The other way, which perhaps makes even more sense, is to develop without thinking about sprites at all. Make everything separate individual graphics. Then when the site is “complete” (or at least, ready for release, we all know sites are never “complete”), then use SpriteMe and do the spriting then.

List of CSS Sprites generators:

• www.csssprites.com – Very simple and clear Css Sprites generator
• www.spriteme.org – I Think the best one, just spend 2 minutes to view demo
• www.css-sprit.es – Another simple CSS Sprite Builder. Here You can add Rollover Effect
• www.duris.ru/lang/en/ – Merge and Compress CSS and JavaScript for reducing HTTP-Requests
• www.drupal.org/project/sprites – CSS Sprite Generator Module for Drupal CMS (I don’t use it)
• http://spritegen.website-performance.org – Sprites generator with multilanguage menu. Just add a ZIP archive with images and that’s it – CSS sprites ready.

Click on Top Menu Module Name

In Module Parameters -> Menu Style dropdown menu, select List. Then Press Save

Thats it, now you can customize each menu link class.

Menu HTML code before:

{CODE type:php;}

{/CODE}

After:

{CODE type:php;}

{/CODE}