Website Magento - HKT SOFT

The basic concepts of a Magento theme

Before you begin to create your theme, there are some basics you need to know that will help you. This is supposed to be a review of the basic concepts and techniques that you should already know, which will speed up the development of the theme. 1. The Magento base theme The base theme was [ [ ...]

The structure of a Magento theme

The files in a Magento theme are divided into two main directories: app and skin, as shown in the following screenshot: The following is the description of the two directories: app: The app/design/frontend/base/default/ directory contains the layout, translation, and template files skin: The skin/frontend/base/default/ directory contains the images, CSS, and JavaScript files 1. Design packages [ [ ...]

Creating the Magento theme

Once you understand the hierarchy of themes and know the basic information, you are ready to create your own custom theme. But, before you put your hands on the code, I will always recommend that you already have a mock-up to be developed, rather than designing as you go. This will allow you to have [ [ ...]

Magento theme: Tips and tricks

There is some stuff that you must know while creating a theme. The following tips will help you in cases of extreme necessities, particularly when you are looking for a specific file to override. 1. Template path hint The app/design/frontend/base/default path contains a lot of files, all divided into many folders. It’s a bit hard [ [ ...]

Responsive Magento Theme with Bootstrap 3

1. An introduction to Bootstrap Bootstrap is a sleek, intuitive, powerful, mobile-first frontend framework that enables faster and easier web development, as shown in the following screenshot: Bootstrap is the most popular frontend framework that is used to create mobile-first websites. It includes a free collection of buttons, CSS components, and JavaScript to create websites [ [ ...]

Responsive Magento Theme: Integrating the files into the theme

Now that we have all the files, we will see how to integrate them into the theme. To declare the new JavaScript and CSS files, we have to insert the action in the local.xml file located at app/design/frontend/bookstore/default/layout. As explained in the previous chapter, all the overrides of the base theme should go in the [ [ ...]

Responsive Magento Theme: Defining the main layout design template

A quick tip for our theme is to define the main template for the site in the default handle. To do this, we have to define the template into the most important reference, root. In a few words, the root reference is the block that defines the structure of a page. Let’s suppose that we [ [ ...]

Responsive Magento Theme: Developing the header

The header of our theme will look as shown in the following screenshot: As you can see, there are three main sections that I will call the top header (the black line on the top), the main header (the white one), and the navigation bar. To customize our header, open the header.phtml file located at [ [ ...]

Responsive Magento Theme: Creating the navigation bar

For the navigation bar, we can use the <nav> tag to wrap it up and make it responsive and ready with some tricks. Bootstrap helps us with the navigation component that we can integrate with a little help from jQuery. In the header.phtml file, the navigation block looks as follows: <!– Navigation –> <nav class=”navbar [ [ ...]

Responsive Magento Theme: Developing the footer

The footer I designed for this theme is made up of two rows and two main columns in the first row. We will put the static contents such as the footer company’s description, footer links, social links, and card image in CMS static blocks. Hence, the user who manages the store can easily manage the [ [ ...]

Customizing Magento Custom Theme: Developing the home page

Let’s start developing our custom home page. The following screenshot shows the inal result that we are going to reach: This is an example of what the screen in this program looks like. 1. Configuring the structure of the home page The home page structure contains two main blocks that we will call slider block [ [ ...]

Customizing Magento Custom Theme: Customizing the left sidebar

By default, Magento includes some blocks on the left sidebar that could be useless; for example, the tags block. Therefore, we are going to replace them. However, before replacing, let’s see how to remove the default blocks if we don’t need them. 1. Removing the default blocks from the sidebar To remove a default block [ [ ...]

Customizing Magento Custom Theme: Customizing the main content

As you can see from the next screenshot, in the main content, we want to display the following points: Some text information right at the top A block with some products of a specific category A block with text information after each product First, we are going to develop the main block, which contains the [ [ ...]

Customizing Magento Custom Theme: Customizing the other pages of the theme

In this topic, we are going to explore quickly how to customize some of the main sections of the theme. Then you will be able to apply this information to personalize any blocks of your awesome theme! 1. The products grid To customize the default products grid, duplicate the list.phtml file in to your theme. [ [ ...]

Adding Incredible Effects to Magento Theme: Introducing CSS3 transitions

With CSS3, we can add an effect that allows you to change theme from one style to another without using Flash animations or JavaScripts. As you know, Flash is not supported on Apple devices, so it is recommended that you don’t use it for new projects. You can use jQuery animations that guarantee full browser [ [ ...]

Adding Incredible Effects to Magento Theme: Creating an animated cart in the header

Let’s start from the idea that we want to show the cart content only on hovering the top cart div, combining a fade-in effect with a slide-up transition. In the Chapter 2, Creating a Responsive Magento Theme with Bootstrap 3, we created a new cart block whose file topcart.phtml is located in app/design/frontend/ bookstore/default/template/checkout/cart/. The [ [ ...]

Adding Incredible Effects to Magento Theme: Creating a stunning CSS3 3D flip animation

Now we are going to add a stunning effect to the hover status of the book. 1. Planning the hover animation We plan to insert the following three pieces of information on hovering the box: The product title A short description of the product The Book Details button The effect that we are going to [ [ ...]

Adding Incredible Effects to Magento Theme: Creating a custom product images gallery

Magento’s default zoom property to view the products is not at the top of its game. It is very old and, in fact, has been used since the first version of Magento released and the more views images (the additional product images) opens into a pop up. One of the best practices and the most [ [ ...]

Adding Incredible Effects to Magento Theme: Adding a custom font

In recent years, the typography on the Web has always been very limited. In fact, it was only possible to use the so-called Web-safe font or the font system present on all computers, such as Arial, Verdana, and Georgia. As you can understand, this was a very big limitation and did not allow the application [ [ ...]

Adding Incredible Effects to Magento Theme: Adding a custom icon font

An icon font is one that includes special characters, usually icons, instead of normal characters. Bootstrap includes the Glyphicon icon font that we already integrated in our theme in Chapter 2, Creating a Responsive Magento Theme with Bootstrap 3. Alternatively, we can integrate another great icon font that includes more than 300 icons that are [ [ ...]

1
2
3