{"title":"Customizing","category":"default","creationDate":1776961627,"content":"<div class=\"sc-notice warning\"><div>\n<p><strong>Hosted Payment Pages are no longer available<\/strong><\/p>\n<p>To accept payments through an Adyen-hosted page, use our <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Hosted%2BCheckout\">Hosted Checkout<\/a>.<\/p>\n<p>This page is for the classic Hosted Payment Pages (HPP) integration, which has reached end-of-life.  We are no longer processing transactions though HPP.<\/p>\n<\/div><\/div>\n<p>This chapter covers the basics of editing the Skin files you downloaded from the <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>. Adyen provides some example Skins should you need a reference or starting point. If your requirements are not too complex, creating your Skin may only consist of replacing a logo and one or two images.<\/p>\n<p>As described previously, a Skin comprises of some files available in the Adyen CA as a ZIP archive with the following structure. The CA as a ZIP archive with the following structure (assuming that the SkinCode of your Skin is 57Hw8sLg):<\/p>\n<p><img alt=\"\" src=\"\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/SkinFiles.png\" \/><\/p>\n<p>The contents of the ZIP file must exactly match the layout above else the CA rejects ZIP file while uploading. File names and directory names are case-sensitive and, as a rule, extra subdirectories are not allowed and filenames should be composed of simple characters (specifically only characters in the range [a-z A-Z 0-9_-.])<\/p>\n<p>Expected contents of each subdirectory:<\/p>\n<ul>\n<li>\n<p><strong>css<\/strong><\/p>\n<p>This directory contains the customized stylesheets for including in each page. The main stylesheet is screen.css, which is valid for the media type screen. Optionally, you can also supply a print.css to format a print version of the page. The optional screen_ie6.css file is included conditionally in Microsoft Internet Explorer version 6 or lower as a workaround for some non-standard interpretations of the CSS stylesheet standard. To include stylesheets in the pages, see HTML Skeleton.<\/p>\n<\/li>\n<li>\n<p><strong>img<\/strong><\/p>\n<p>You can include any images referenced in the stylesheets or HTML include using this directory. Filenames should be composed of simple characters.<\/p>\n<\/li>\n<li>\n<p><strong>inc<\/strong><\/p>\n<p>You may provide custom HTML content such as menus, shop links, navigation, etc. This directory contains the HTML fragments that enable you to do so. If an included file is language-dependent, it is possible to supply an include for each language locale. To know the location of these includes in a page, see HTML Skeleton.<\/p>\n<\/li>\n<li>\n<p><strong>res<\/strong><\/p>\n<p>This directory contains files named resources_$localename.properties with text overrides for the text in payment pages. The main file is resources.properties which overrides the default string (language locale en_GB). For overriding a string in French, you create file resources_fr.properties. The format of the resource files, as well as the allowed overrides, are described below.<\/p>\n<\/li>\n<li>\n<p><strong>js<\/strong><\/p>\n<p>This directory contains the JavaScript code for the Skin. Add all the custom JavaScripts to the custom.js file to be included on each page.<\/p>\n<\/li>\n<\/ul>\n<p>Refer the <a href=\"\/pt\/online-payments\/classic-integrations\/hosted-payment-pages\/payment-reminder-email\">payment reminder email<\/a> for more details about using and skinning.<\/p>\n<h2 id=\"payment-page\">Payment page<\/h2>\n<p>A skin payment page has the following structure:<\/p>\n<p><img alt=\"\" src=\"\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/AppendixCVisualisationoftheHTMLStructure.png\" \/><\/p>\n<h3 id=\"payment-pages-html-skeleton\">Payment page's HTML skeleton<\/h3>\n<pre><code class=\"language-html\">    &lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\n        \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\n    &lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/&gt;\n        &lt;title&gt;Page Title&lt;\/title&gt;\n            &lt;link rel=\"stylesheet\" media=\"screen\" type=\"text\/css\" href=\"\/hpp\/css\/reset.css\" \/&gt;\n            &lt;link rel=\"stylesheet\" media=\"screen\" type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/screen.css\" \/&gt;\n            &lt;link rel=\"stylesheet\" media=\"print\"  type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/print.css\" \/&gt;\n            &lt;script type=\"text\/javascript\" src=\"\/hpp\/js\/default.js\"&gt;&lt;\/script&gt;\n            &lt;script type=\"text\/javascript\" src=\"\/sf\/$SkinCode\/js\/custom.js\"&gt;&lt;\/script&gt;\n        &lt;!--[if lt IE 7]&gt;\n            &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/screen_ie6.css\" \/&gt;\n        &lt;![endif]--&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;!-- ### inc\/cheader_[locale].txt or inc\/cheader.txt (fallback) ### --&gt;\n        &lt;form id=\"pageform\" action=\"\" method=\"post\" onsubmit=\"return formValidate(this);\"&gt;\n        &lt;script type=\"text\/javascript\"&gt;\n        \/\/&lt;![CDATA[\n        if (notNull(document.getElementById('pageform'))) {\n            document.getElementById('pageform').setAttribute(\"autocomplete\",\"off\");\n        }\n        \/\/]]&gt;\n        &lt;\/script&gt;\n        &lt;div id=\"content\"&gt;\n            &lt;div id=\"pmcontent\"&gt;\n            &lt;!-- ### inc\/pmheader_[locale].txt or in\/pmheader.txt (fallback) ### --&gt;\n            &lt;div class=\"padDiv1\"&gt;&lt;\/div&gt;\n\n            &lt;!-- ==================== --&gt;\n            &lt;!-- Adyen Main Content  --&gt;\n            &lt;!-- ==================== --&gt;\n\n            &lt;div class=\"padDiv2\"&gt;&lt;\/div&gt;\n            &lt;!-- ### inc\/pmfooter_[locale].txt or inc\/pmfooter.txt (fallback) ### --&gt;\n            &lt;!-- ### inc\/customfields_[locale].txt or inc\/customfields.txt (fallback) ### --&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div id=\"foot\"&gt;\n            &lt;div id=\"footc\"&gt;\n                &lt;div id=\"nextstep\"&gt;\n                    &lt;div id=\"nextstepc\"&gt;Next Step Text&lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div id=\"footerb1div\"&gt;\n                  &lt;input onclick=\"\" type=\"submit\" id=\"mainSubmit\" value=\"continue\" class=\"footerB nextB\" \/&gt;\n                &lt;\/div&gt;\n                &lt;div id=\"footerb2div\"&gt;\n                   &lt;input onclick=\"\" type=\"button\" id=\"mainBack\" value=\"previous\" class=\"footerB backB\" \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;\/form&gt;\n        &lt;!-- ### inc\/cfooter_[locale].txt or inc\/cfooter.txt (fallback) ### --&gt;\n    &lt;\/body&gt;\n    &lt;\/html&gt;<\/code><\/pre>\n<h2 id=\"stylesheet\">Stylesheet<\/h2>\n<p>The skin framework was designed to provide maximum flexibility when designing and creating your layout.<\/p>\n<p>Payment page structure\u00a0shows the HTML skeleton, which generates each page and indicates where to represent each element of skin files, However, if the default flow model is modified using a stylesheet virtually, you can create any layout.<\/p>\n<p>If you examine the HTML in\u00a0HTML Skeleton, you see that the first included stylesheet is reset.css. This stylesheet is always included to nullify the default HTML styling applied by the browser (default styling can vary between browsers). Using the reset.css stylesheet makes it much easier to create a layout which renders consistently across browsers.<\/p>\n<pre><code class=\"language-css\">@media screen {\n    \/* Do not forget to set a foreground and background color *\/\n    \/* on the 'html' or 'body' element! *\/\n    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td\n    {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-weight: inherit;\n        font-style: inherit;\n        font-size: 100%;\n        line-height: 1;\n        font-family: inherit;\n        text-align: left;\n        vertical-align: baseline;\n    }\n    a img,:link img,:visited img {\n        border: 0;\n    }\n    table {\n        border-collapse: collapse;\n        border-spacing: 0;\n    }\n    ol,ul {\n        list-style: none;\n    }\n    q:before,q:after,blockquote:before,blockquote:after {\n        content: \"\";\n    }\n}\n@media print {\n    .hideforprint {    display: none;}\n}\n\/* Some Layout Shortcuts *\/\n.r { text-align: right; }\n.l { text-align: left; }\n.fr { float: right; }\n.fl { float: left; }\n.b { font-weight: bold; }\n.mid { vertical-align: middle; }\n.red { color: #c00; }<\/code><\/pre>\n<div class=\"sc-notice info\"><div>\n<p>You may notice that there are some simple stylesheet classes, which do not strictly belong in reset.css. This is purely an optimization to reduce the number of requests to the server.<\/p>\n<\/div><\/div>\n<h2 id=\"editing-the-files\">Editing the files<\/h2>\n<p>The default settings for a skin are as follows:<br \/>\n<img alt=\"\" src=\"\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/worddav23f8b4e9cb1ce65a91d2e349fc871926.png\" \/><br \/>\nAfter you have downloaded a skin, you can edit the files and directories to customize it. Here are some quick changes that you can easily implement.<\/p>\n<h3 id=\"header-image\">Header image<\/h3>\n<ol>\n<li>\n<p>Save the header image that you want to use in the image directory of the skin files.<\/p>\n<\/li>\n<li>\n<p>Update the screen.css file to reference your header image.<\/p>\n<ol>\n<li>\n<p>The latest version of the default skins has an\u00a0<strong>HPP new style V2<\/strong>\u00a0section added to the screen.css file. Make sure to replace the #logoheader code in that section.<\/p>\n<pre><code class=\"language-css\"># logoheader:\n{\n    height: 118px;\n    background: url(\"..\/img\/&lt;imageName&gt;\");\n    background-position: left;\n    background-repeat: no-repeat;\n    background-color: white;\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3 id=\"payment-method-logos\">Payment method logos<\/h3>\n<ol>\n<li>\n<p>Save the logos you want to use in the\u00a0img\u00a0directory of the skin files.<\/p>\n<\/li>\n<li>\n<p>Update the screen.css file to override the .pmB element as shown:<\/p>\n<pre><code class=\"language-css\">.pmB&lt;paymentMethodName&gt;\n{\n    background-image: url(\"..\/img\/&lt;imageName&gt;\");\n    width: 400px;\n    height: 42px;\n    padding-left: 85px;\n    text-align: left;\n    margin-bottom: 6px;\n    font-size: 1.1em;\n    background-color: transparent !important;\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3 id=\"font-colors\">Font colors<\/h3>\n<p>Update the screen.css file to set the fonts you want to use:<\/p>\n<pre><code class=\"language-css\">html\n{\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 1.1em;\n}<\/code><\/pre>\n<h3 id=\"pay-button\">Pay button<\/h3>\n<ol>\n<li>\n<p>Save the logos you want to use in the\u00a0img\u00a0directory of the skin files.<\/p>\n<\/li>\n<li>\n<p>Update the screen.css file to add the following line to the .paySubmit block:<\/p>\n<pre><code class=\"language-css\">.paySubmit\n{\n    background: url(\"..\/img\/&lt;imageName&gt;\");\n    background-repeat: no-repeat;\n    height: 16px;\n    width: 50px;\n    font-size: 0px;\n    border: 0px;\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2 id=\"automatically-open-the-credit-card-payment-option\">Automatically open the credit card payment option<\/h2>\n<ol>\n<li>\n<p>Open the cfooter.txt file from the\u00a0<em>inc<\/em> folder of the skin files.<\/p>\n<\/li>\n<li>\n<p>Add the following script to the file and save:<\/p>\n<pre><code class=\"language-xml\">&lt;\/div&gt;\n&lt;script type=\"text\/javascript\"&gt;\n  if (collapsecard) {\n    setTimeout(function() {\n         show(collapsecard, 'completeCard.shtml', 'card', 'brandCodeUndef');\n    }, 1000);\n  }\n&lt;\/script&gt;<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2 id=\"custom-payment-methods\">Custom payment methods<\/h2>\n<p>Adyen offers an option to display custom payment methods on your payment page. To configure your customer payment method, contact the\u00a0<a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a>.<\/p>\n<p>After the\u00a0Support\u00a0Team has configured your custom payment method, you can set a custom payment method button and a custom payment method name. A custom payment method's name starts with \"c_\" (for\u00a0example, \"c_customPaymentMethod\").<\/p>\n<h3 id=\"button-image\">Button image<\/h3>\n<p>To change the button image that is shown for a standard payment method or to add the image of your custom payment method, you must add the image file to the\u00a0img\u00a0directory of your skin. You then need to add an extra style to your screen.css file. The syntax of this style in shown in the code block:<\/p>\n<pre><code class=\"language-css\">.pmB&lt;paymentMethodName&gt; { background-image: url(\"..\/img\/&lt;imageName&gt;\") !important; }<\/code><\/pre>\n<p>For example, if your custom payment method name is c_mycustomPayment and you have added an image file mycustomPayment.png to the\u00a0img\u00a0directory of your skin, the style that you should add to your screen.css file is:<\/p>\n<pre><code class=\"language-css\">.pmBc_mycustomPayment { background-image: url(\"..\/img\/mycustomPayment.png\") !important; }<\/code><\/pre>\n<h3 id=\"button-name\">Button name<\/h3>\n<p>Add the button name of your custom payment method to the\u00a0resources.properties file. If you require specific translations for different languages, you can add this to the resource files.<\/p>\n<p>The syntax for the button name is:<\/p>\n<pre><code class=\"language-css\">pm.&lt;payment method name&gt;.buttonName=&lt;Insert display name&gt;<\/code><\/pre>\n<p>For example, if your custom payment method is c_mycustomPayment the entry in your resource file would be:<\/p>\n<pre><code class=\"language-css\">pm.c_mycustomPayment.buttonName=My Custom Payment Method Name<\/code><\/pre>\n<h3 id=\"custom-favicon-ico\">Custom favicon.ico<\/h3>\n<p>To override the default icon shown in the URL area when on the payment pages, place your favicon.ico\u00a0file in\u00a0the\u00a0img\u00a0directory of the skin. It will be picked up\u00a0automatically by the payment pages.<\/p>\n<div class=\"sc-notice info\"><div>\n<p>If you do not have tools to create a custom favicon.ico file, you can generate one online at: <a href=\"http:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">http:\/\/www.favicon.cc\/<\/a><\/p>\n<\/div><\/div>\n<h2 id=\"numeric-keyboard\">Numeric keyboard<\/h2>\n<p>A full keyboard is shown if a shopper makes a payment using mobile or tablet. To overcome this issue, Adyen introduced a\u00a0<code>card.card_number_field_type<\/code>\u00a0field, which shows only the numeric keyboard when a shopper selects credit card field.<\/p>\n<p>To integrate this field to your skin, follow these steps:<\/p>\n<h3 id=\"for-a-new-skin\">For a new skin<\/h3>\n<p>If you are adding a new skin, the resource key called in the\u00a0resource.properties file is\u00a0<code>card.card_number_field_type<\/code>. Make sure that the value\u00a0of the card.card_number_field_type is tel.<\/p>\n<p>If the value entered is an integer the\u00a0input type also should be\u00a0integer. After you have entered the values, the numeric keypad is shown on mobile devices, including tablets.<\/p>\n<h3 id=\"for-an-existing-skin\">For an existing skin<\/h3>\n<p>If you are using an old skin, it should be extended to use this feature. Add\u00a0key and value in the resource.properties the card.card_number_field_type.\u00a0<\/p>\n<p>Add the following CSS in the screen.css\u00a0to hide the number controls for desktop:<\/p>\n<pre><code class=\"language-css\">input[type='tel'] {\n    -moz-appearance:textfield;\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n}<\/code><\/pre>","url":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/hosted-payment-pages\/skin\/customizing","articleFields":{"id":"24217125","type":"page","_expandable":{"operations":""},"status":"current","sitemap":{"priority":0.3},"parameters":{"anchor_new":"<a href=\"\/online-payments\">Online payments<\/a>","parent_page":"classic Hosted Payment Pages (HPP)"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/hosted-payment-pages\/skin\/customizing","title":"Customizing","content":"\nHosted Payment Pages are no longer available\nTo accept payments through an Adyen-hosted page, use our Hosted Checkout.\nThis page is for the classic Hosted Payment Pages (HPP) integration, which has reached end-of-life.  We are no longer processing transactions though HPP.\n\nThis chapter covers the basics of editing the Skin files you downloaded from the Customer Area. Adyen provides some example Skins should you need a reference or starting point. If your requirements are not too complex, creating your Skin may only consist of replacing a logo and one or two images.\nAs described previously, a Skin comprises of some files available in the Adyen CA as a ZIP archive with the following structure. The CA as a ZIP archive with the following structure (assuming that the SkinCode of your Skin is 57Hw8sLg):\n\nThe contents of the ZIP file must exactly match the layout above else the CA rejects ZIP file while uploading. File names and directory names are case-sensitive and, as a rule, extra subdirectories are not allowed and filenames should be composed of simple characters (specifically only characters in the range [a-z A-Z 0-9_-.])\nExpected contents of each subdirectory:\n\n\ncss\nThis directory contains the customized stylesheets for including in each page. The main stylesheet is screen.css, which is valid for the media type screen. Optionally, you can also supply a print.css to format a print version of the page. The optional screen_ie6.css file is included conditionally in Microsoft Internet Explorer version 6 or lower as a workaround for some non-standard interpretations of the CSS stylesheet standard. To include stylesheets in the pages, see HTML Skeleton.\n\n\nimg\nYou can include any images referenced in the stylesheets or HTML include using this directory. Filenames should be composed of simple characters.\n\n\ninc\nYou may provide custom HTML content such as menus, shop links, navigation, etc. This directory contains the HTML fragments that enable you to do so. If an included file is language-dependent, it is possible to supply an include for each language locale. To know the location of these includes in a page, see HTML Skeleton.\n\n\nres\nThis directory contains files named resources_$localename.properties with text overrides for the text in payment pages. The main file is resources.properties which overrides the default string (language locale en_GB). For overriding a string in French, you create file resources_fr.properties. The format of the resource files, as well as the allowed overrides, are described below.\n\n\njs\nThis directory contains the JavaScript code for the Skin. Add all the custom JavaScripts to the custom.js file to be included on each page.\n\n\nRefer the payment reminder email for more details about using and skinning.\nPayment page\nA skin payment page has the following structure:\n\nPayment page's HTML skeleton\n    &lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\n        \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\n    &lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/&gt;\n        &lt;title&gt;Page Title&lt;\/title&gt;\n            &lt;link rel=\"stylesheet\" media=\"screen\" type=\"text\/css\" href=\"\/hpp\/css\/reset.css\" \/&gt;\n            &lt;link rel=\"stylesheet\" media=\"screen\" type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/screen.css\" \/&gt;\n            &lt;link rel=\"stylesheet\" media=\"print\"  type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/print.css\" \/&gt;\n            &lt;script type=\"text\/javascript\" src=\"\/hpp\/js\/default.js\"&gt;&lt;\/script&gt;\n            &lt;script type=\"text\/javascript\" src=\"\/sf\/$SkinCode\/js\/custom.js\"&gt;&lt;\/script&gt;\n        &lt;!--[if lt IE 7]&gt;\n            &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"\/sf\/$SkinCode\/css\/screen_ie6.css\" \/&gt;\n        &lt;![endif]--&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;!-- ### inc\/cheader_[locale].txt or inc\/cheader.txt (fallback) ### --&gt;\n        &lt;form id=\"pageform\" action=\"\" method=\"post\" onsubmit=\"return formValidate(this);\"&gt;\n        &lt;script type=\"text\/javascript\"&gt;\n        \/\/&lt;![CDATA[\n        if (notNull(document.getElementById('pageform'))) {\n            document.getElementById('pageform').setAttribute(\"autocomplete\",\"off\");\n        }\n        \/\/]]&gt;\n        &lt;\/script&gt;\n        &lt;div id=\"content\"&gt;\n            &lt;div id=\"pmcontent\"&gt;\n            &lt;!-- ### inc\/pmheader_[locale].txt or in\/pmheader.txt (fallback) ### --&gt;\n            &lt;div class=\"padDiv1\"&gt;&lt;\/div&gt;\n\n            &lt;!-- ==================== --&gt;\n            &lt;!-- Adyen Main Content  --&gt;\n            &lt;!-- ==================== --&gt;\n\n            &lt;div class=\"padDiv2\"&gt;&lt;\/div&gt;\n            &lt;!-- ### inc\/pmfooter_[locale].txt or inc\/pmfooter.txt (fallback) ### --&gt;\n            &lt;!-- ### inc\/customfields_[locale].txt or inc\/customfields.txt (fallback) ### --&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div id=\"foot\"&gt;\n            &lt;div id=\"footc\"&gt;\n                &lt;div id=\"nextstep\"&gt;\n                    &lt;div id=\"nextstepc\"&gt;Next Step Text&lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div id=\"footerb1div\"&gt;\n                  &lt;input onclick=\"\" type=\"submit\" id=\"mainSubmit\" value=\"continue\" class=\"footerB nextB\" \/&gt;\n                &lt;\/div&gt;\n                &lt;div id=\"footerb2div\"&gt;\n                   &lt;input onclick=\"\" type=\"button\" id=\"mainBack\" value=\"previous\" class=\"footerB backB\" \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;\/form&gt;\n        &lt;!-- ### inc\/cfooter_[locale].txt or inc\/cfooter.txt (fallback) ### --&gt;\n    &lt;\/body&gt;\n    &lt;\/html&gt;\nStylesheet\nThe skin framework was designed to provide maximum flexibility when designing and creating your layout.\nPayment page structure\u00a0shows the HTML skeleton, which generates each page and indicates where to represent each element of skin files, However, if the default flow model is modified using a stylesheet virtually, you can create any layout.\nIf you examine the HTML in\u00a0HTML Skeleton, you see that the first included stylesheet is reset.css. This stylesheet is always included to nullify the default HTML styling applied by the browser (default styling can vary between browsers). Using the reset.css stylesheet makes it much easier to create a layout which renders consistently across browsers.\n@media screen {\n    \/* Do not forget to set a foreground and background color *\/\n    \/* on the 'html' or 'body' element! *\/\n    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td\n    {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-weight: inherit;\n        font-style: inherit;\n        font-size: 100%;\n        line-height: 1;\n        font-family: inherit;\n        text-align: left;\n        vertical-align: baseline;\n    }\n    a img,:link img,:visited img {\n        border: 0;\n    }\n    table {\n        border-collapse: collapse;\n        border-spacing: 0;\n    }\n    ol,ul {\n        list-style: none;\n    }\n    q:before,q:after,blockquote:before,blockquote:after {\n        content: \"\";\n    }\n}\n@media print {\n    .hideforprint {    display: none;}\n}\n\/* Some Layout Shortcuts *\/\n.r { text-align: right; }\n.l { text-align: left; }\n.fr { float: right; }\n.fl { float: left; }\n.b { font-weight: bold; }\n.mid { vertical-align: middle; }\n.red { color: #c00; }\n\nYou may notice that there are some simple stylesheet classes, which do not strictly belong in reset.css. This is purely an optimization to reduce the number of requests to the server.\n\nEditing the files\nThe default settings for a skin are as follows:\n\nAfter you have downloaded a skin, you can edit the files and directories to customize it. Here are some quick changes that you can easily implement.\nHeader image\n\n\nSave the header image that you want to use in the image directory of the skin files.\n\n\nUpdate the screen.css file to reference your header image.\n\n\nThe latest version of the default skins has an\u00a0HPP new style V2\u00a0section added to the screen.css file. Make sure to replace the #logoheader code in that section.\n# logoheader:\n{\n    height: 118px;\n    background: url(\"..\/img\/&lt;imageName&gt;\");\n    background-position: left;\n    background-repeat: no-repeat;\n    background-color: white;\n}\n\n\n\n\nPayment method logos\n\n\nSave the logos you want to use in the\u00a0img\u00a0directory of the skin files.\n\n\nUpdate the screen.css file to override the .pmB element as shown:\n.pmB&lt;paymentMethodName&gt;\n{\n    background-image: url(\"..\/img\/&lt;imageName&gt;\");\n    width: 400px;\n    height: 42px;\n    padding-left: 85px;\n    text-align: left;\n    margin-bottom: 6px;\n    font-size: 1.1em;\n    background-color: transparent !important;\n}\n\n\nFont colors\nUpdate the screen.css file to set the fonts you want to use:\nhtml\n{\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 1.1em;\n}\nPay button\n\n\nSave the logos you want to use in the\u00a0img\u00a0directory of the skin files.\n\n\nUpdate the screen.css file to add the following line to the .paySubmit block:\n.paySubmit\n{\n    background: url(\"..\/img\/&lt;imageName&gt;\");\n    background-repeat: no-repeat;\n    height: 16px;\n    width: 50px;\n    font-size: 0px;\n    border: 0px;\n}\n\n\nAutomatically open the credit card payment option\n\n\nOpen the cfooter.txt file from the\u00a0inc folder of the skin files.\n\n\nAdd the following script to the file and save:\n&lt;\/div&gt;\n&lt;script type=\"text\/javascript\"&gt;\n  if (collapsecard) {\n    setTimeout(function() {\n         show(collapsecard, 'completeCard.shtml', 'card', 'brandCodeUndef');\n    }, 1000);\n  }\n&lt;\/script&gt;\n\n\nCustom payment methods\nAdyen offers an option to display custom payment methods on your payment page. To configure your customer payment method, contact the\u00a0Support Team.\nAfter the\u00a0Support\u00a0Team has configured your custom payment method, you can set a custom payment method button and a custom payment method name. A custom payment method's name starts with \"c_\" (for\u00a0example, \"c_customPaymentMethod\").\nButton image\nTo change the button image that is shown for a standard payment method or to add the image of your custom payment method, you must add the image file to the\u00a0img\u00a0directory of your skin. You then need to add an extra style to your screen.css file. The syntax of this style in shown in the code block:\n.pmB&lt;paymentMethodName&gt; { background-image: url(\"..\/img\/&lt;imageName&gt;\") !important; }\nFor example, if your custom payment method name is c_mycustomPayment and you have added an image file mycustomPayment.png to the\u00a0img\u00a0directory of your skin, the style that you should add to your screen.css file is:\n.pmBc_mycustomPayment { background-image: url(\"..\/img\/mycustomPayment.png\") !important; }\nButton name\nAdd the button name of your custom payment method to the\u00a0resources.properties file. If you require specific translations for different languages, you can add this to the resource files.\nThe syntax for the button name is:\npm.&lt;payment method name&gt;.buttonName=&lt;Insert display name&gt;\nFor example, if your custom payment method is c_mycustomPayment the entry in your resource file would be:\npm.c_mycustomPayment.buttonName=My Custom Payment Method Name\nCustom favicon.ico\nTo override the default icon shown in the URL area when on the payment pages, place your favicon.ico\u00a0file in\u00a0the\u00a0img\u00a0directory of the skin. It will be picked up\u00a0automatically by the payment pages.\n\nIf you do not have tools to create a custom favicon.ico file, you can generate one online at: http:\/\/www.favicon.cc\/\n\nNumeric keyboard\nA full keyboard is shown if a shopper makes a payment using mobile or tablet. To overcome this issue, Adyen introduced a\u00a0card.card_number_field_type\u00a0field, which shows only the numeric keyboard when a shopper selects credit card field.\nTo integrate this field to your skin, follow these steps:\nFor a new skin\nIf you are adding a new skin, the resource key called in the\u00a0resource.properties file is\u00a0card.card_number_field_type. Make sure that the value\u00a0of the card.card_number_field_type is tel.\nIf the value entered is an integer the\u00a0input type also should be\u00a0integer. After you have entered the values, the numeric keypad is shown on mobile devices, including tablets.\nFor an existing skin\nIf you are using an old skin, it should be extended to use this feature. Add\u00a0key and value in the resource.properties the card.card_number_field_type.\u00a0\nAdd the following CSS in the screen.css\u00a0to hide the number controls for desktop:\ninput[type='tel'] {\n    -moz-appearance:textfield;\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n}","type":"page","locale":"pt","boost":15,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Classic integrations for Ecommerce","lvl3":"Hosted Payment Pages","lvl4":"Skins for Hosted Payment Pages","lvl5":"Customizing"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/online-payments","lvl2":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations","lvl3":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/hosted-payment-pages","lvl4":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/hosted-payment-pages\/skin","lvl5":"\/pt\/online-payments\/classic-integrations\/hosted-payment-pages\/skin\/customizing"},"levels":6,"category":"Online Payments","category_color":"green","tags":["Customizing"]},"articleFiles":{"AppendixCVisualisationoftheHTMLStructure.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/AppendixCVisualisationoftheHTMLStructure.png\" \/>","SkinFiles.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/SkinFiles.png\" \/>","worddav23f8b4e9cb1ce65a91d2e349fc871926.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/60.classic-integrations\/04.hosted-payment-pages\/01.skin\/01.customizing\/worddav23f8b4e9cb1ce65a91d2e349fc871926.png\" \/>"}}