Draft:Banner System - Revision history

Dohtur: Redirected page to X-Cart:Banner System

2012-09-26T08:02:36Z

Redirected page to X-Cart:Banner System

Show changes

Dohtur: /* Banner and image size recommendations */

2012-09-03T03:07:03Z

‎Banner and image size recommendations

Dohtur: /* Banner and image size recommendations */

2012-09-03T02:57:22Z

‎Banner and image size recommendations

Dohtur at 02:51, 3 September 2012

2012-09-03T02:51:29Z

Dohtur: /* Banner and image size recommendations */

2012-09-03T02:37:06Z

‎Banner and image size recommendations

Dohtur: /* Banner and image size recommendations */

2012-09-02T20:45:19Z

‎Banner and image size recommendations

Dohtur at 19:40, 2 September 2012

2012-09-02T19:40:27Z

Dohtur: /* Banner and image size recommendations */

2012-09-02T19:39:07Z

‎Banner and image size recommendations

Dohtur: /* Banner System module configuration settings */

2012-09-02T19:19:57Z

‎Banner System module configuration settings

Dohtur: /* Banner and image size recommendations */

2012-09-02T19:10:53Z

‎Banner and image size recommendations

@@ Line 126: / Line 126: @@
   .....
 }</pre>
-Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties (or the respective values as specified by the '''margin''' shorthand property) of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element. For example, if we have a look at the <u>altskin.css</u> file for the ''ideal_comfort'' skin, we'll see that '''#page-container''' width is specified as 960px, whereas the margin properties of the '''#center-main''' element are sprcified as "margin: 0 0 0 270px;" (The format is "margin: top right bottom left;", so '''margin-right''' property is 0 and '''margin-left''' is 270px). Now if we add up 0 and 270px, and subtract the resulting value from 960px, we'll get 690px. This means that the maximum width for banners displayed in the main column (both the top and bottom locations) is 690px.
+According to the example above, the maximum width for banners displayed in both the left and right columns will be 250px.

@@ Line 126: / Line 126: @@
   .....
 }</pre>
-Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties (or the respective values as specified by the '''margin'' shorthand property) of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element. For example, if we have a look at the <u>altskin.css</u> file for the ''ideal_comfort'' skin, we'll see that '''#page-container''' width is specified as 960px, whereas the margin properties of the '''#center-main''' element are sprcified as "margin: 0 0 0 270px;" (The format is "margin: top right bottom left;", so '''margin-right''' property is 0 and '''margin-left''' is 270px). Now if we add up 0 and 270px, and subtract the resulting value from 960px, we'll get 690px. This means that the maximum width for banners displayed in the main column (both the top and bottom locations) is 690px.
+Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties (or the respective values as specified by the '''margin''' shorthand property) of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element. For example, if we have a look at the <u>altskin.css</u> file for the ''ideal_comfort'' skin, we'll see that '''#page-container''' width is specified as 960px, whereas the margin properties of the '''#center-main''' element are sprcified as "margin: 0 0 0 270px;" (The format is "margin: top right bottom left;", so '''margin-right''' property is 0 and '''margin-left''' is 270px). Now if we add up 0 and 270px, and subtract the resulting value from 960px, we'll get 690px. This means that the maximum width for banners displayed in the main column (both the top and bottom locations) is 690px.

@@ Line 91: / Line 91: @@
 This opens the <u>Banner content</u> page:
 : [[Image:Edit_banner_content2.png|border]]
-Here you can upload images and HTML code that will be your banner's "slides". Depending on the type of content you are going to upload, use the '''Add image''' or the '''Add HTML code''' tab of the <u>Add banner content</u> section. After you click the '''Add content''' button, image slides appear in the '''Banner images''' section, HTML code slides - in the '''Banner HTML content''' section in the upper part of the page:
+Here you can upload images and HTML code that will be your banner's "slides". Depending on the type of content you are going to upload, use the '''Add image''' or the '''Add HTML code''' tab of the <u>Add banner content</u> section. After you click the '''Add content''' button, the slide will be added. Image slides appear in the '''Banner images''' section, HTML code slides - in the '''Banner HTML content''' section in the upper part of the page:
 : [[Image:Edit_banner_content3.png|border]]
 <br />

@@ Line 113: / Line 113: @@
 We do not provide recommendations as to the size of banners or image slides that you should use with Banner System. Every store has its own look, so you will need to use your best judgement when deciding how big your banners should be for each location. However, you can be sure that no matter what size you define for a banner and how big an image you decide to upload as a banner slide, it will not break the rest of your site's content:
 * A banner with the ''Banner width'' property set to a value greater than the width of the column in which it is going to be displayed will be visible only partially (up to the maximum width allowed by the respective column).
-* An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container while retaining aspect ratio. For example, if the width and height of you banner container are, respectively, 400 px and 200 px, and you upload an image whose width and height are, respectively, 200 px and 340 px, the image will be resized to the banner container height value (200 px).
+* An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container while retaining aspect ratio. For example, if the width and height of you banner container are, respectively, 400px and 200px, and you upload an image whose width and height are, respectively, 200px and 340px, the image will be resized to the banner container height value (200px).<br />
+If you wish to size your banner to the maximum width allowed by the column in which it will be displayed, the respective width can be found by looking at your store's skin-specific CSS file <u>/xcart/skin/<skin_name>/css/altskin.css</u> (or - for skins that do not have a skin-specific CSS file at the said location - in the file <u>/xcart/skin/common_files/css/main.css)</u>.
 In this file, the width of the left and right columns of your site are set by the "width" property of the #left-bar and #right-bar elements like so:
 <pre>#left-bar {
@@ Line 127: / Line 126: @@
   .....
 }</pre>
-Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element.
+Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties (or the respective values as specified by the '''margin'' shorthand property) of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element. For example, if we have a look at the <u>altskin.css</u> file for the ''ideal_comfort'' skin, we'll see that '''#page-container''' width is specified as 960px, whereas the margin properties of the '''#center-main''' element are sprcified as "margin: 0 0 0 270px;" (The format is "margin: top right bottom left;", so '''margin-right''' property is 0 and '''margin-left''' is 270px). Now if we add up 0 and 270px, and subtract the resulting value from 960px, we'll get 690px. This means that the maximum width for banners displayed in the main column (both the top and bottom locations) is 690px.

← Older revision		Revision as of 20:45, 2 September 2012
Line 114:		Line 114:
	* A banner with the ''Banner width'' property set to a value greater than the width of the column in which it is going to be displayed will be visible only partially (up to the maximum width allowed by the respective column).		* A banner with the ''Banner width'' property set to a value greater than the width of the column in which it is going to be displayed will be visible only partially (up to the maximum width allowed by the respective column).
	* An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container while retaining aspect ratio. For example, if the width and height of you banner container are, respectively, 400 px and 200 px, and you upload an image whose width and height are, respectively, 200 px and 340 px, the image will be resized to the banner container height value (200 px).		* An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container while retaining aspect ratio. For example, if the width and height of you banner container are, respectively, 400 px and 200 px, and you upload an image whose width and height are, respectively, 200 px and 340 px, the image will be resized to the banner container height value (200 px).
		+
		+	If you wish to size your banner to the maximum width allowed by the column in which it will be displayed, the respective width can be found by looking at your store's skin-specific CSS file /xcart/skin/<skin_name>/css/altskin.css (or - for skins that do not have a skin-specific CSS file at the said location - in the file /xcart/skin/common_files/css/main.css).
		+	In this file, the width of the left and right columns of your site are set by the "width" property of the #left-bar and #right-bar elements like so:
		+	<pre>#left-bar {
		+	.....
		+	width: 250px;
		+	.....
		+	}
		+	#right-bar {
		+	.....
		+	width: 250px;
		+	.....
		+	}</pre>
		+	Finding out the width of the main column is a bit more complicated: you need to take the values of the '''margin-left''' and '''margin-right''' properties of the '''#center-main''' element and subtract them from the the value of the '''width''' property of the '''#page-container''' element.

@@ Line 110: / Line 110: @@
 You can also edit the content of any of your existing banners using the respective <u>Edit banner content</u> link. For example, you can add more slides to a banner, edit the content of existing slides, re-order the sequence in which the slides are displayed by the banner or temporarily disable certain slides.<br /><br />
-=== Banner and image size recommendations ===
+== Banner and image size recommendations ==
 We do not provide recommendations as to the size of banners or image slides that you should use with Banner System. Every store has its own look, so you will need to use your best judgement when deciding how big your banners should be for each location. However, you can be sure that no matter what size you define for a banner and how big an image you decide to upload as a banner slide, it will not break the rest of your site's content:
 * A banner with the ''Banner width'' property set to a value greater than the width of the column in which it is going to be displayed will be visible only partially (up to the maximum width allowed by the respective column).
 * An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container while retaining aspect ratio. For example, if the width and height of you banner container are, respectively, 400 px and 200 px, and you upload an image whose width and height are, respectively, 200 px and 340 px, the image will be resized to the banner container height value (200 px).

@@ Line 54: / Line 54: @@
 Here are a few notes on the <u>Banner System</u> module configuration settings:
 * '''Banner rotation time delay''': This setting is used for rotating banners. It allows you to set the length of time a banner image or HTML content is displayed within the banner container before being replaced with the next image/HTML content piece.
-* '''Default banner width''' and '''Default banner height''': These settings allow you to set the default width and height for your banners. "Default" means that the respective value will be used if a non-zero width/height value has not been provided in the banner properties.
+* '''Default banner width''' and '''Default banner height''': These settings allow you to set the default width and height for your banners. "Default" means that the respective value will be used for banners for which a non-zero width/height value has not been provided in the banner properties. Note that your ''Default banner width'' and ''Default banner height'' values should be greater than 0 (zero), otherwise your banners using the default width and height will not be visible.
 * '''Unlimited banner display time''': This option sets unlimited display time for all banners. If it is enabled, banner display time settings of individual banners are ignored.
 <br />
 == Creating and managing banners with Banner System ==
 ===Getting started with creating banners: choosing banner location===

← Older revision		Revision as of 19:10, 2 September 2012
Line 110:		Line 110:

	=== Banner and image size recommendations ===		=== Banner and image size recommendations ===
−	We do not provide recommendations as to the size of banners or image slides that you should use with Banner System. Every store has its own look, so you will need to use your best judgement when deciding how big your banners should be for each location. However, you can be sure that no matter what size you define for a banner and how big an image you decide to upload as a banner slide, it will not break the rest of your site's content.	+	We do not provide recommendations as to the size of banners or image slides that you should use with Banner System. Every store has its own look, so you will need to use your best judgement when deciding how big your banners should be for each location. However, you can be sure that no matter what size you define for a banner and how big an image you decide to upload as a banner slide, it will not break the rest of your site's content:
		+	* A banner with the ''Banner width'' property set to a value greater than the width of the column in which it is going to be displayed will be visible only partially (up to the maximum width allowed by the respective column).
		+	* An image with a size larger than the banner container in which it is going to be displayed will be resized to fit the size of the banner container.