티스토리 메뉴바 패치에 따른 FastBoot 로그인/로그아웃 버튼 문제해결

Posted by Readiz
2014.07.05 17:20 반응형 티스토리/FastBoot

로그인/로그아웃 기능 패치



  티스토리에서 개발인력을 충원한다는 공지가 오래전에 있었는데, 그 때문인지는 몰라도 로그인/로그아웃 기능에 변화가 있었습니다. 사용하시는 분들은 알아채지 못할 변화일 수도 있지만 이 기능 변화 때문에 FastBoot 스킨도 영향을 받아서 상단과 Offcanvas에 있는 로그인/로그아웃 버튼이 먹통이 되는 현상이 있었네요. 뭐하라님께서 제보해주셔서 수정하는 방법에 대해서 알려드리고자 포스팅합니다.


skin.html


  아래 부분이 찾으셔야 할 부분입니다. (삭제해야할 부분)

	
<!--F Login Button Mapping -->
<script>
	var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
	tmpLogin.className = "";
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
	document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
</script> 
	


  이 부분을 일단 지우신 다음에 </html> 다음 부분에 아래에 새로 적어드리는 코드를 넣어주시면 됩니다. 티스토리에서 메뉴바를 불러올 때 페이지 맨 하단 부분에 메뉴바 관련 코드를 집어넣는 것으로 위치를 수정해서 발생하는 문제였습니다. 이렇게 하면 페이지 로딩이 끝난 다음에 메뉴바를 로딩하기 때문에 더 빨라보이는 효과가 있어서 티스토리에서 패치를 한 것으로 생각됩니다.



  </html> 다음에 새로 넣으셔야 할 부분


	
<!--F Login Button Mapping -->
<script>
	var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
	tmpLogin.className = "";
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
	document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
	$('#lnav ul li ul a')[0].outerHTML = tmpLogin.outerHTML;
</script> 
	



  수정 후 되어야 할 모습


	
	<script>if (ielt9 == 1) window.jQuery || document.write('<script src="./images/jquery-1.11.0.min.js"><\/script>');
	else if(ielt9 == 0) window.jQuery || document.write('<script src="./images/jquery-2.1.0.min.js"><\/script>');</script>
    <!--F FastBoot_Plugins -->
	<script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js?05156"><\/script>');</script>
    <script src="./images/fastboot.min.js?0507"></script>
    <!--[if (gt IE 8)|!(IE)]><!--><script src="./images/fastboot_offcanvas.min.js"></script><!--<![endif]-->
	<div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-2x"></i></div>
</body></html>
<!--F Login Button Mapping -->
<script>
	var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
	tmpLogin.className = "";
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
	tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
	document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
	$('#lnav ul li ul a')[0].outerHTML = tmpLogin.outerHTML;
</script> 
	


  다만 이전과 다르게 로딩 후 살짝 튕겨보이는 현상이 있기는 할 것입니다. 기존에는 페이지 로딩중에 로그인/로그아웃 여부를 알 수 있어서 거의 사용자가 알아채지 못하게 로그인/로그아웃을 감지할 수 있었는데 티스토리 패치 이후로는 그것이 불가능하네요..

  FastBoot 스킨의 로그인/로그아웃 기능을 사용하고 계신 분들은 위 내용 참고하시어 수정해주시면 되겠습니다. 감사합니다. ^^



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 스킨 수정중에 로그인 부분에 이상이 있어
    내가 잘못 건드린줄 알고 한참 헤메다
    포기 하고 있었는데 그런 문제가 있었나 보네요

    좀전에 가르쳐 준대로 해서 해결 했습니다.
    역시 최고. . . ^^
    감사 합니다.
  2. 아 /html 뒤에도 코드가 들어갈 수 있는거였나요? 처음알았네요!
    잘 수정했습니다.
    티스토리가 스킨개발자들 심심하지 말라고 바꿔봤나봐요^^
  3. 잘보고갑니다.

  4. 왜 적용하여도 문제일까요 ㅠㅠ?

    다른 부분이 잘못되었나..
    • 2차 도메인을 쓰고 계시면 티스토리 메뉴바를 보이게 설정하셔야만 합니다.
    • 감사합니다!! 잘해결되었습니다^^
  5. 안그래도 이상했는데 저만 그런게 아니었군요.. 감사합니다 ^^
  6. 전 왜 그대로 했는데 안되는걸까요.....ㅜ.ㅜ
    여전히 로그인 상태에서도 'login'으로 나오네요...

    원래 있던 코드 지우고 올려주신 코드 그대로 </html> 아래에 붙여넣었는데...
    • 2차 도메인을 쓰고 계시면 티스토리 메뉴바를 보이게 설정하셔야만 합니다.
    • 아~ 그거였네요.
      말씀해주신대로 메뉴바 보이게 했더니 정상적으로 나오네요.
      감사합니다~^^
  7. 감사합니다..^^
    이제 막 설치하고 여기저기 만져보고 수정하고 있었는데요~
    안그래도 마침 이게 왜이러지~ 했는데..
    잘 수정했습니다.. ^^
  8. 티스토리가 패치를했군요.
    빠른 스킨패치 감사합니다.
    요즘 바쁘신가봐요? 글올라오는게 조금 더디네요
  9. 글과는 맞지않는 이야기이긴 합니다만

    블로그 주소를 설정에서 바꾸고 난뒤에

    Home부분에 글을 작성하여도 새 글이 나타나지 않습니다

    어떻게 해결해야 할까요?
  10. 티스토리 메뉴바를 아예 없애고 싶은데 어떻게 해야 할까요?ㅠㅠ
  11. 그런 이상한 점 보긴 봤는데 기분 탓 인가 했는데 버그였군요.
    버그 수정이 됬네요.
    감사합니다.^^
  12. 저는 2차도메인도 수정해 봤는데 안되네요...
    트랙백 달아놓고 블로그에 소스 올려놓을게요
  13. 정말 궁금한 것이 있어서 문의를 드립니다. 지난 몇개월간 식상하던 제 스킨을 덕분에 뜨거운 반응을 받으며 잘 사용하고 있습니다. 그런데, 한가지 문제점이 있어서 문의를 살짝 드려봅니다.

    스킨을 바꾸니 다른 점은 괜찮은데 가로폭이 줄어들어서 기존에 사용했던 포스팅 글들을 죄다 수정을 해야하는 고초를 겪고 있어요. 기존 1단형 스킨으로 가로 960px 를 사용하고 있었거든요. 어찌된 일인지 글설정에는 960px으로 되어 있는데 정작 글을 작성하고 중간 점검차 미리보기를 하면 780px쯤에서 글이 한칸 아래로 내려가 있네요. 어떻게 해결 할 수 없나요?
  14. 혹시 2차 도메인 관련 문제를 해결했는데도 정상적으로 로그인/로그아웃 표시가 되지 않으시는 분들은 <body></html> 이 두가지가 SKIN.html에 포함되어있는지 확인해보시길바랍니다. 저 같은 경우에는 별다른 작업을 하지 않았는데 이 두가지가 소스에서 빠져있더라구요 ㅎ
    • 감사합니다. ^^
    • 으아아 감사합니다!
      분명히 건든적이 없는데 이게 없었네요.
      덕분에 해결했습니다!
    • 감사합니다. ㅎㅎ
      덕분에 해결!!
  15. 짝짝짝 감사해요 정말 /html 뒤에 코드가 들어가는 건 첨 알았네요
  16. 좋은 정보 감사합니다 ㅎ
    이 블로그에서 좋은 정보 많이 알아가네요 ㅎ
    • 2015.01.02 17:58
    비밀댓글입니다
    • 펙센
    • 2015.03.01 18:53 신고
    이상하게 저는 바꾸어도 로그인/로그아웃이 변하지 않네요.
    왜그럴까요?
    • 저도 되지가 않았었는데, 이 방법으로 간신히 해결했으니 알려드리겠습니다.

      이 스크립트는 아예 지워버리세요.

      <!--F Login Button Mapping -->
      <script>
      var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
      tmpLogin.className = "";
      tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
      tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
      document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
      </script>

      그리고 이걸 아예 끼워넣어야 할 겁니다.

      <script>if (ielt9 == 1) window.jQuery || document.write('<script src="./images/jquery-1.11.0.min.js"><\/script>');
      else if(ielt9 == 0) window.jQuery || document.write('<script src="./images/jquery-2.1.0.min.js"><\/script>');</script>
      <!--F FastBoot_Plugins -->
      <script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js?05156"><\/script>');</script>
      <script src="./images/fastboot.min.js?0507"></script>
      <!--[if (gt IE 8)|!(IE)]><!--><script src="./images/fastboot_offcanvas.min.js"></script><!--<![endif]-->
      <div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-2x"></i></div>
      </body></html>
      <!--F Login Button Mapping -->
      <script>
      var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
      tmpLogin.className = "";
      tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
      tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
      document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
      $('#lnav ul li ul a')[0].outerHTML = tmpLogin.outerHTML;
      </script>

      이렇게 하니까 전 성공적으로 적용되었습니다.

      혹시 2차링크를 사용하고 있으실 경우라면 메뉴바를 보이게 해야 한다고 합니다.
      그럼 제 댓글이 적게나마 도움이 되었기를 바랍니다.
  17. 감사합니다. 이글을 이제서야 보고 적용했네요~
    본문글 하단에 카테고리 다른글 목록부분이
    썸네일로 나오는 스킨이 이뻐서
    티스토리 최근스킨인 #2 로 바꿨다가 아무래도 여러가지 부분에서
    Readiz님 스킨보다 부족해서 다시 복원했네요.
    저같이 다 떠먹여 줘야 아는 코드무식자에겐 FastBoot스킨이 없었음 반응형 스킨 엄두도 못냈을거 같아요~

    카테고리 글 썸네일로 표현하는기능도 시간나실때 연구해서 알려주시면... (굽씬굽씬..)
    지금도 넘 좋은 스킨 쓸수있게 해주셔서 감사해요~
  18. 대체 뭘 어쩌라는건지 모르겠구만요.
    그대로 소스코드를 붙여놔도 계속해서 메뉴바가 열렸다닫혔다하는데 대체 뭡니까?

티스토리 툴바