This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
merchant:existing_merchant:selfcare_system:settings:pay_pages [2018/12/03 10:26] 127.0.0.1 external edit |
merchant:existing_merchant:selfcare_system:settings:pay_pages [2019/07/26 15:09] robinc [Pay Pages] added @import CSS tag is blocked for HPP customization |
||
---|---|---|---|
Line 40: | Line 40: | ||
data/media/merchant/existing_merchant/selfcare_system/settings_pay_pages3-nu.png"/></html> | data/media/merchant/existing_merchant/selfcare_system/settings_pay_pages3-nu.png"/></html> | ||
- | Advanced mode allows you to directly edit the CSS of the page and also the HTML of the Header and Footer. It is recommended not to use Auto Update in this mode. | + | Advanced mode allows you to directly edit the CSS of the page and also the HTML of the Header and Footer. It is recommended not to use Auto Update in this mode. The @import CSS tag is blocked for HPP customization. |
Because of the custom CSS that cannot be reverted to the same constraints as the Basic Mode, once you have entered Advanced mode you cannot go back to Basic Mode styling. | Because of the custom CSS that cannot be reverted to the same constraints as the Basic Mode, once you have entered Advanced mode you cannot go back to Basic Mode styling. | ||
Line 48: | Line 48: | ||
When finished with your parameter selections, select **Save Changes** or **Return to Template List**. | When finished with your parameter selections, select **Save Changes** or **Return to Template List**. | ||
+ | **Using Level 3 Enhanced Data** | ||
+ | |||
+ | If you are using enhanced data, more specificaly, Level 3 enhanced data, your transactions might have items. If you want them to be visible for your customer, you should mark **Display Enhanced Data** or manually add the following piece of style to your template. | ||
+ | |||
+ | <code css> | ||
+ | a#enhancedDataLink { | ||
+ | color: #0000ff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #enhancedData { | ||
+ | display: none; | ||
+ | } | ||
+ | #enhancedData h4 { | ||
+ | font-size: 1.2em; | ||
+ | border-bottom: 1px solid #eeeeee; | ||
+ | padding-bottom: 0.6em; | ||
+ | margin-bottom: 0.6em; | ||
+ | } | ||
+ | #enhancedData ul { | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | border-bottom: 1px solid #eee; | ||
+ | padding: 0 0.6em 0.6em; | ||
+ | margin-bottom: 0.6em; | ||
+ | } | ||
+ | #enhancedData .total, | ||
+ | #enhancedData .summary { | ||
+ | border: 1px solid #ccc; | ||
+ | background: none; | ||
+ | border-radius: 5px; | ||
+ | padding: 0.6em; | ||
+ | } | ||
+ | #enhancedData li { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | padding: 0.2em 0 0.4em; | ||
+ | } | ||
+ | #enhancedData li span { | ||
+ | display: table-cell; | ||
+ | } | ||
+ | #enhancedData .label { | ||
+ | padding-right: 1em; | ||
+ | min-width: 100px; | ||
+ | } | ||
+ | #enhancedData .info { | ||
+ | text-align: right; | ||
+ | } | ||
+ | .bold { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | </code> | ||