Layout de una página de usuario

La estructura del HTML de las páginas presentadas al usuario durante un pago es presentada aquí a manera de facilitar la creación de plantillas de CSS personalizadas para un tema visual.

Las clases {tema-visual}-theme y {modo-ui}-display son dinámicas y dependen de los valores al abrir la página, según se explica en tema visuales.

Actualmente, sólo existe un layout llamado block, cuya estructura es indicada más abajo.

Block layout

<html>
  <head></head>
  <body id="pageBody" class="theme-{tema-visual} display-{modo-ui} adams-block-theme">
    <div class="page-content">
      <form id="pageForm">
        <div id="pageView" class="theme-page-view">
          <div id="pageHeader" class="theme-page-header">
            <div class="theme-header-bar">
              <div class="theme-header-col theme-header-logo">
                <div class="theme-logo-large"></div>
                <div class="theme-logo-small"></div>
              </div>
              <div class="theme-header-col theme-header-info">
                <div class="theme-header-intro"></div>
                <div class="theme-header-title"></div>
                <div class="theme-header-hint"></div>
              </div>
            </div>
          </div>
          <div id="pageAlert" class="page-alert"></div>
          <div class="theme-content"></div>
          <div id="pageFooter" class="theme-page-footer">
            <div class="theme-footer-buttons">
              <a id="pageCancelButton" class="theme-button-cancel"></a>
              <button id="pageCancelButton" class="theme-button-cancel"></button>
            </div>
            <div class="theme-footer-info"></div>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

Herramientas del sitio

Layout de una página de usuario

Block layout