X-Cart:Responsive Template - Revision history

Dohtur: Redirected page to X-Cart:Ideal Responsive Skin

2013-07-16T07:44:12Z

Redirected page to X-Cart:Ideal Responsive Skin

Xim at 05:24, 16 July 2013

2013-07-16T05:24:07Z

Xim at 05:23, 16 July 2013

2013-07-16T05:23:32Z

Dohtur: /* Installation */

2013-02-25T06:13:51Z

‎Installation

Dohtur: /* Responsive Design */

2012-12-11T09:49:23Z

‎Responsive Design

Dohtur: /* Installation */

2012-12-11T09:43:41Z

‎Installation

Dohtur: /* Installation */

2012-12-11T09:35:33Z

‎Installation

Dohtur: /* Responsive Design */

2012-12-11T09:28:54Z

‎Responsive Design

Dohtur: /* System Requirements and Installation */

2012-12-11T09:14:19Z

‎System Requirements and Installation

Dohtur: /* How the Responsive Template works */

2012-12-11T09:08:07Z

‎How the Responsive Template works

← Older revision		Revision as of 07:44, 16 July 2013
Line 1:		Line 1:
		+	#REDIRECT [[X-Cart:Ideal_Responsive_Skin]]
	==Overview==		==Overview==

@@ Line 15: / Line 15: @@
 The <u>Ideal Responsive Template</u> is designed to work with all X-Cart 4.6.x versions out of the box, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.6.0 may work with this template but have not been tested at this time.
-===Template Settings===
+==Template Settings==
 Visit the Admin area of your store, and go to <u>General Settings</u>-><u>Appearance</u>. Select the new skin ''Ideal Responsive'' from the drop down list at the top, and click '''Apply Changes'''. If the skin does not appear in the list, ensure that the directory <u>ideal_responsive</u> exists in your <u>xcart/skin directory</u> and try clearing the X-Cart cache.

@@ Line 1: / Line 1: @@
 ==Overview==
-<u>Responsive Template</u> for X-Cart allows you to provide your visitors with a version of your website that is best suited for their monitor or display. The template is adaptive/responsive from 1280 pixels down to 350 pixels. For even smaller screens, you can consider [[X-Cart:X-Cart_Mobile|X-Cart Mobile]].
+<u>Ideal Responsive Template</u> for X-Cart allows you to provide your visitors with a version of your website that is best suited for their monitor or display. The template is adaptive/responsive from 1280 pixels down to 350 pixels. For even smaller screens, you can consider [[X-Cart:X-Cart_Mobile|X-Cart Mobile]].
 Monitors come in a variety of shapes and sizes, with different resolutions. From smartphones to tablets to widescreen desktops, the template will adapt to fit each. Furthermore, it provides a solid base for your own responsive design.
-===How the Responsive Template works===
+===How the Ideal Responsive Template works===
-The <u>Responsive Template</u> includes JavaScript that detects the width or the browser window or screen that is displaying it. After this detection occurs, the appropriate style sheet is selected and displayed to the browser. Additionally, a cookie is set to remember that browser's width for the remainder of the session. When the browser is resized, such as turning a tablet on its side, or clicking and dragging the browser window on a desktop, the style sheet and cookie are updated. The result is that the correct dimensions are displayed to your visitor at all times, and the text and objects are always legible. Scaling and horizontal scrolling are no longer necessary for most devices and screens.
+The <u>Ideal Responsive Template</u> includes JavaScript that detects the width or the browser window or screen that is displaying it. After this detection occurs, the appropriate style sheet is selected and displayed to the browser. Additionally, a cookie is set to remember that browser's width for the remainder of the session. When the browser is resized, such as turning a tablet on its side, or clicking and dragging the browser window on a desktop, the style sheet and cookie are updated. The result is that the correct dimensions are displayed to your visitor at all times, and the text and objects are always legible. Scaling and horizontal scrolling are no longer necessary for most devices and screens.
-The <u>Responsive Template</u> comes bundled with style sheets that control four preset widths: 350px, 700px, 960px, and 1280px. You can tailor the experience for each of the preset widths, alter the code to change them, or even define your own. This skin modifies a wide range of core templates, but no PHP code is altered or changed.
+The <u>Ideal Responsive Template</u> comes bundled with style sheets that control four preset widths: 350px, 700px, 960px, and 1280px. You can tailor the experience for each of the preset widths, alter the code to change them, or even define your own. This skin modifies a wide range of core templates, but no PHP code is altered or changed.
 ==System Requirements and Installation==
-The <u>Responsive Template</u> is designed to work with all X-Cart 4.5.x versions, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.5.0 may work with this template but have not been tested at this time.
+The <u>Ideal Responsive Template</u> is designed to work with all X-Cart 4.6.x versions out of the box, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.6.0 may work with this template but have not been tested at this time.
-===System Requirements===
+===Template Settings===
-To use this add-on you need a working copy of X-Cart GOLD, GOLD PLUS or PLATINUM version 4.5.x installed on your server.
+Visit the Admin area of your store, and go to <u>General Settings</u>-><u>Appearance</u>. Select the new skin ''Ideal Responsive'' from the drop down list at the top, and click '''Apply Changes'''. If the skin does not appear in the list, ensure that the directory <u>ideal_responsive</u> exists in your <u>xcart/skin directory</u> and try clearing the X-Cart cache.
 ==Responsive Design==

@@ Line 27: / Line 27: @@
 # Use an FTP client to upload all the files contained in the archive (retaining the directory structure) to the X-Cart root directory on your server or your hosting account. No files should be overwritten during this process, unless the add-on was previously installed.
 # Visit the Admin area of your store, and go to <u>General Settings</u>-><u>Appearance</u>. Select the new skin ''Ideal Responsive'' from the drop down list at the top, and click '''Apply Changes'''. If the skin does not appear in the list, ensure that the directory <u>ideal_responsive</u> exists in your <u>xcart/skin directory</u> and try clearing the X-Cart cache.
-# Clear the X-Cart cache of temporary files by visiting <u>http://yoursite.com/xcart-dir/cleanup.php</u> (Be sure to replace the <u>http://yoursite.com/xcart-dir/</u> part of the address with the actual address of your X-Cart store).
+# [[X-Cart:Advanced_Tools#Clear_Templates.2FX-Cart_Cache|Clear the X-Cart cache]] of temporary files.
 ==Responsive Design==

← Older revision		Revision as of 09:49, 11 December 2012
Line 33:		Line 33:
	As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.		As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

−	Test your layout changes at various widths. Make note of the style sheets located in <u><xcart_dir>/skin/ideal_responsive/css/</u>, <u>mobile.css</u> controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users, take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <u><xcart_dir>/skin/ideal_responsive/customer/service_js.tpl</u>, where it defines what style sheet to display for particular widths.	+	Test your layout changes at various widths. Make note of the style sheets located in <u><xcart_dir>/skin/ideal_responsive/css/</u>, <u>mobile.css</u> controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users: take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <u><xcart_dir>/skin/ideal_responsive/customer/service_js.tpl</u>, where it defines what style sheet to display for particular widths.

← Older revision		Revision as of 09:28, 11 December 2012
Line 33:		Line 33:
	As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.		As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

−	Test your layout changes at various widths. Make note of the style sheets located in <u><~~Your X-Cart folder~~>/skin/ideal_responsive/css/</u>, <u>mobile.css</u> controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users, take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <u><~~Your X-Cart folder~~>/skin/ideal_responsive/customer/service_js.tpl</u>, where it defines what style sheet to display for particular widths.	+	Test your layout changes at various widths. Make note of the style sheets located in <u><xcart_dir>/skin/ideal_responsive/css/</u>, <u>mobile.css</u> controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users, take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <u><xcart_dir>/skin/ideal_responsive/customer/service_js.tpl</u>, where it defines what style sheet to display for particular widths.

@@ Line 13: / Line 13: @@
 ==System Requirements and Installation==
-The Responsive Template is designed to work with all 4.5.X versions, Gold, Gold Plus, and Platinum. X-Cart versions prior to 4.5.0 may work with this template but have not been tested at this time.
+The <u>Responsive Template</u> is designed to work with all X-Cart 4.5.x versions, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.5.0 may work with this template but have not been tested at this time.
 ===System Requirements===
-To use this add-On you need a working copy of X-Cart Gold, Gold-Plus, or Platinum version 4.5.X installed on your server.
+To use this add-on you need a working copy of X-Cart GOLD, GOLD PLUS or PLATINUM version 4.5.x installed on your server.
 ===Installation===
@@ Line 25: / Line 25: @@
 # Obtain a distribution package for the add-on module by downloading it from the File Area section of your {{QA}}. The distribution package you need is contained in the archive file <u>Responsive_Template_x.y.z.zip</u> where <u>x</u>, <u>y</u> and <u>z</u> are the version numbers of the module. Make sure the version of the module is the same as the version of the installed copy of X-Cart.
 # Decompress the archive with the distribution package to a directory on your system using your favorite compression program (WinZIP or any other archiver).
-# Use an FTP client to upload all the files contained in the archive (retaining the directory structure) to the X-Cart root directory on your server or your hosting account. No files should be overwritten during this process, unless the add-on was previously installed
+# Use an FTP client to upload all the files contained in the archive (retaining the directory structure) to the X-Cart root directory on your server or your hosting account. No files should be overwritten during this process, unless the add-on was previously installed.
-# Visit the admin side of your store, and go to General Settings->Appearance. Select the new skin "Ideal Responsive" from the drop down list at the top, and press "Apply Changes".If the skin does not appear in the list, ensure that the directory ideal_responsive exists in your xcart/skin directory and try clearing the X-Cart cache.
+# Visit the Admin area of your store, and go to <u>General Settings</u>-><u>Appearance</u>. Select the new skin ''Ideal Responsive'' from the drop down list at the top, and click '''Apply Changes'''. If the skin does not appear in the list, ensure that the directory <u>ideal_responsive</u> exists in your <u>xcart/skin directory</u> and try clearing the X-Cart cache.
 # Visit <u>http://<YOUR_XCART_DOMAIN>/xcart/cleanup.php</u> to clear the X-Cart cache of temporary files.