티스토리 업데이트후 메뉴바 비활성 해결하기/ fastboot 스킨

티스토리 메뉴바 비활성 해결하기

티스토리를 아마도 테터툴즈 설치형 블로그가 나왔을 때 그 시절 즈음에 아마도 티스토리를 처음 가입한 듯 합니다. 그리고는 초대장 배포등도 해주고 처음에는 열심히 했었던 것 같습니다.

바쁜 삶 속에서 무심코 가끔 접해서 들여다 보는게 전부이지만 오래된 연인처럼 추억이 많이 담겨있어서 어쩌면 더 애정이 가는지도 모르겠습니다. 최근에 접해보니 티스토리 업데이트가 많아지면서 기존에 사용했었던 반응형 스킨인 FastBoot 스킨이 메뉴바가 비활성화 되어 있습니다.

 

허걱!!

PC에서 뿐만 아니라 모바일에서도 메뉴창이 비활성화 되어 있습니다. 이런 된장!! 이곳 저것 검색 신공을 더해서 해결했네요~~ 해결하고 나면 또 시간이 지나고 나면 어디를 수정했더라? 하면서 헷갈리는 일이 잦아져서 이제는 차라리 포스팅을 해놓는게 좋을 듯 해서 하나 하나 수정기들은 포스팅을 해놔야겠습니다.

 

메뉴바 비활성 상태

아래 캡쳐와 같이 "▶" 모양을 클릭해도 비활성화가 되어 있습니다. 

▶ 부분을 클릭하면 슬라이딩 방식으로 메뉴 트리가 나와야 하는데 비활성화가 되어서 전혀 반응이 없습니다.

문제는 PC에서가 아니라 모바일에서도 동일하게 비활성화가 되다보니 모바일에서는 아에 메뉴를 확인 할 수가 없는 상태가 되어 버립니다.

PC버젼은 우측에 메뉴 트리 항목이 있기 때문에 다소 불편하더라도 볼 수는 있지만 모바일 버젼에서는 대략 난감이라 모바일 버젼 때문에라도 활성화가 반드시 필요한 부분입니다.

 

 

 

FastBoot 반응형 스킨 메뉴바 활성화 방법

아마도 몇년전 이었던 걸로 기억하는데 그때도 한번 "▶" 모양의 메뉴바가 비활성화가 되었던 적이 있습니다.

그때는 간단하게 아래와 같이 "블로그 메뉴바를 표시합니다"라고 변경만 해주면 간단하게 메뉴바의 비활성화가 해결이 되었습니다.  

혹시라도 표시를 안한다고 되어있나 싶어서 확인해보니 정상적으로 '표시합니다'로 되어있습니다. 

아마도 최근 업데이트 때무이겠지요? ^^

 

 

FastBoot 반응형 스킨 메뉴바 활성화 소스 변경

간단하게 위와 같은 방식일 줄 알았다가 괜히 건드려서 일찍 코 자야 하는데 이렇게 늦은 시간까지 손을 데다보니 어중간하게 마무리하고는 닫는 성격이 못돼서 결국 해결을 하고 포스팅 하고 자게되네요

현재는 아래와 같은 방법으로 수정하면 비활성 부분은 활성화로 바뀌는건 확인을 한 상태입니다.

물론, 제가 http → https 로 강제 변경되면서 FastBoot 스킨이 http로 가져오는 방식때문에 오류가 생긴 부분은 js파일 수정 재업로드, 스킨 html에서의 수정등을 일부 하긴 했지만 그 부분은 최근 글 스킨 이미지가 안보이는 부분, 메뉴별 클릭하면 이미지가 로딩이 안되는 부분 해결하느라 건드린 부분입니다.

 

대부분 정상적으로 돌아가는데 ▶ 모양의 메뉴바만 비활성화 되어 있다면 아래 소스 부분을 수정해주면 됩니다.

 

 

수정해야 할 링크

① 메뉴 > 스킨편집 > html 편집에 들어갑니다.

② html 소스 맨 아래쪽으로 내리면 아래 소스가 있습니다.

③ 아래 소스를 밑에 변경해야 할 소스로 변경해주면 해결이 됩니다.

<!--F Login Button Mapping --> <script> $(document).ready(function(){ 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> ~ </script> 까지 복사해서 붙여넣으면 됩니다.

<script> if(window.T.config.USER.name)    document.getElementById("loginout_append").innerHTML =      '<a href="https://www.tistory.com/auth/logout"><i class="fa fa-unlock fa-fw" title="로그아웃"></i>Logout</a>';  else    document.getElementById("loginout_append").innerHTML =      '<a href="https://www.tistory.com/auth/login"><i class="fa fa-lock fa-fw" title="로그인">Login</i>Login</a>'; </script>

 

 

소스 변경후 메뉴 활성화

이제 위와 같이 소스를 수정해주고 나면 아래와 같이 "▶" 버튼을 누르면 메뉴가 활성화 됩니다.

물론, 모바일 버젼에서도 당연히 활성화가 정상적으로 작동이 됩니다.

 

알고보면 정말 쉬운건데

고치고 변경하고 하다보면 시간이 정말 빨리 흘러가는 듯 합니다.