AS SIGNING PACKAGES AND THEMES TO THE STORE

Now that you have created your own package and theme (whether a default or a theme variation), you need to assign it to your website/store for it to take effect. Navigate to the Magento admin panel
(ie.www.mydomain.com/admin), then the Design configuration tab (System à Configuration à Design tab). If you have more than one website, store or store view defined in your Magento installation, in the upper corner of the left column, you will see a box labeled ”Current Configuration Scope” where you can select
the store to which you are applying your configuration changes.

In order to manage your store design at the website-level, select the name of your website from the dropdown, then apply the following steps. What do we mean by website-level? Remember Dubloo Inc?

4  Applying Themes in Magento
In this case, Dubloo Inc wants each of their store views to look the same (they are all orange), so they do not need to set their design per website.

In order to mana ge the design from the s tore view-level ,select the name of your store view from the dropdown, then appl y the following s teps . Let’s look a t Dubloo Inc again.

Let’s say Dubloo Inc wants their users to see a visual difference depending on which store view they are using. They would need to manage the design from the store-view level to achieve this.

magento one step checkout - fancy product designer - magento extensions

W IDGETS in Magento Design

You may be familiar with the term “widgets” from other online applications. In Magento, widgets are frontend blocks with a predefined set of configuration options. These configuration options are displayed in a special edit form in the backend panel when a widget is being added or edited by a store owner. The

ability to easily set widget configuration options allows for the full control of widget placement on a page to

store owners. An important aspect of widgets is that using them eliminates some of the theme-level customization that used to be required when setting up a Magento store.

Essentially, they are a great way to allow business users with no technical knowledge to easily add dynamic content (including product data, for example), in areas predefined by the designer/developer, to pages in Magento Stores. This allows for greater control and flexibility  in creating informational and marketing content through administrator tools, enabling intuitive and efficient control of content such as:

• Dynamic product data in marketing campaign landing pages

• Dynamic Information such as recently viewed items in content pages

• Prom otional images to position in different blocks, side columns and other locations throughout the storefront

• Interactive elements and action blocks (external review systems, video chats, voting and subscription forms)

• Alternative navigation elements (tag clouds, catalog image sliders)

• Interactive and dynamic Flash elements easily configured and embedded within content pages for enhanced user experience

magento one step checkout - fancy product designer - best magento extension

THEMES in Magento Design

 

A Magento theme is comprised of templating files (layout, template, locale) and/or skin files (CSS, images, theme-specific JavaScript) that create the visual experience of your store. These files reside in two main directories in your Magento file system:

•      “App/design” directory – Files that control how the page templates are rendered

•      “Skin” directory – Files that control the visual aspects of the theme—CSS, images, etc

Magento breaks its theme files into separate directories like this to allow you more control over the security level of each directory on your server. The files in the skin directory need to be accessible to web browsers and need a very open permission setting. The files in the app/design directory only need to be accessible to the app and can be locked down furthe r.

Inside of each of these directories, the files in a theme are broken down into further subdirectories by type of file.

Below is a little more explanation of each directory and the types of files it contains.

Templating files in the app/design/frontend/<designPackageName>/<themeName>/ directory are organized into the following subdirectories:

•      Layout—Contains the basic XML files that define block structure for different pages as well as control meta information and page encoding.

•      Template—Contains the PHTML files that contain xHTML markups and any necessary PHP to create logic for visual presentation. Some templates are page templates and some are block templates.

•      Locale—Contains simple CSV text documents organized on a per language basis containing translation strings (as name-value pairs) for all text produced by Magento (e.g., for interface elements and messages, not products and categories)

Skin files in the skin/frontend/<designPackageName>/<themeName>/ directory are organized into the following subdirectories:

•      CSS—Contains the CSS files used to control visual styling of the website

•      Images—Contains all images used by the theme

•     
JS—Contains theme-specific JavaScript routines and callable functions. (Most JavaScript libraries, which might be shared across themes) are placed in the js/ directory at the Magento root

magento one step checkout - fancy product designer - magento extensions