부트스트랩3.x 용 레이아웃 퍼블리싱_부가기능2(끝)

이번포스트 목표: 메뉴추가로 위젯페이지를 생성하면서, loginPage모듈선택해서 생성한 페이지를 수정.

수정한 파일명: xe/widgets/login_info/skins/default/login_form.html (스킨을 만들지 않고, 기존스킨을 주석처리 후 부트스트랩3로 적용했음.)

부트스트랩3 참조URL: http://timespace12.dothome.co.kr/bootstrap3/docs/examples/signin.html

작업결과 URL: http://timespace12.dothome.co.kr/xe/loginPage

-참고: 로그인버튼(상단메뉴에서 레이어팝업형식으로 사용시 참조) 변경도 가능합니다.

- 아래는 xe/widgets/login_info/skins/default/login_form.html 로그인스킨 소스 전문 입니다.

<?php /* <load target="default.login.css" /> */ ?>
<load target="login.xml" />
<load target="default.login.js" />
<?php /*
<form id="fo_login_widget" action="{getUrl('','act','procMemberLogin')}" method="post" ruleset="@login" class="account">
 <a href="#acField">{$lang->cmd_login}</a>
 <fieldset id="acField">
  <h2>{$lang->cmd_login}</h2>
  <input type="hidden" name="act" value="procMemberLogin" />
  <input type="hidden" name="success_return_url" value="{htmlspecialchars(getRequestUriByServerEnviroment())}" />
  <input type="hidden" name="xe_validator_id" value="widgets/login_info/skins/default/login_form/1" />
  <div cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'widgets/login_info/skins/default/login_form/1'" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
   <p>{$XE_VALIDATOR_MESSAGE}</p>
  </div>
  <div class="idpw">
   <label for="user_id" cond="$member_config->identifier != 'email_address'">{$lang->user_id}</label>
   <input name="user_id" id="user_id" type="text" required cond="$member_config->identifier != 'email_address'" />
   <label for="user_id" cond="$member_config->identifier == 'email_address'">{$lang->email_address}</label>
   <input name="user_id" id="user_id" type="email" required cond="$member_config->identifier == 'email_address'" />
   <label for="user_pw">{$lang->password}</label>
   <input name="password" id="user_pw" type="password" required />
   <p class="keep">
    <input type="checkbox" name="keep_signed" id="keep_signed" value="Y" />
    <label for="keep_signed">{$lang->keep_signed}</label>
   </p>
   <p class="warning">{$lang->about_keep_warning}</p>
  </div>
  <input type="submit" value="{$lang->cmd_login}" />
  <ul class="help">
   <li><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
   <li><a href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
  </ul>
 </fieldset>
</form>
*/ ?>
<form id="fo_login_widget" action="{getUrl('','act','procMemberLogin')}" method="post" ruleset="@login" class="account" class="form-signin">
    <a href="#acField">{$lang->cmd_login}버튼(상단메뉴에서 레이어팝업형식으로 사용시 참조)</a>
    <fieldset id="acField">
 <h2 class="form-signin-heading">{$lang->cmd_login}</h2>
 <input type="hidden" name="act" value="procMemberLogin" />
 <input type="hidden" name="success_return_url" value="{htmlspecialchars(getRequestUriByServerEnviroment())}" />
 <input type="hidden" name="xe_validator_id" value="widgets/login_info/skins/default/login_form/1" />
 <div cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'widgets/login_info/skins/default/login_form/1'" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 <p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
 <div class="idpw">
  <input name="user_id" id="user_id" type="text" required cond="$member_config->identifier != 'email_address'" placeholder="{$lang->user_id}" class="input-block-level" />
  <input name="user_id" id="user_id" type="email" required cond="$member_config->identifier == 'email_address'" placeholder="{$lang->email_address}" class="input-block-level" />
  <input name="password" id="user_pw" type="password" required placeholder="{$lang->password}" class="input-block-level" />
  <label class="checkbox">
   <input type="checkbox" name="keep_signed" id="keep_signed" value="Y" />{$lang->keep_signed}
  </label>
 </div>
 <input value="{$lang->cmd_login}" class="btn btn-large btn-primary btn-block" type="submit">
 <ul class="help">
  <li><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
  <li><a href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
 </ul>
    </fieldset>
</form>

#### 오늘로써 지난 일주일간 네이버XE(제로보드xe)레이아웃을 부트스트랩3 CSS로 수정과 부가기능 적용법을 공부해 보았습니다. ####

더 이상의 작업은 신규 프로젝트를 시작하게 되면, 지금까지 확인 못한 사항들을 추가로 기록하는 선에서 마치려고 합니다.^^ 끝