Skip to content

우리끼리 가치할래?우리끼리 가치할래?

조회 수 25 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄 첨부
Extra Form

카카오공유링크와 메뉴위젯.png

 

 스케치북5 레이아웃 위젯 설정 부분들의 수정 기록 

 내용 : class="section calendar 와 class="section clock 부분은 요즘의 구글 크롬 등의 부라우저 에서는 지원이 중단된 swf 플레시 오브젝트로 구성된 달력과 시계 위젯이라 지금은 출력이 안된다 이 부분을 사용하기 위해 레이아웃을 커스텀 했다 

수정1. 

스케치북5 레이아웃 경로의 conf.xml 파일을 찾아서 해당 부분을 레이아웃에 플레싱 시키고 레이아웃 설정에 사용되는 

달력 위젯 설정 부분과 시계위젯 설정 부분의 내용들을 수정한다 그냥 사용해도 되지만 이후에  레이아웃을 수정 하다보면 혼돈이 올것같아 임의대로 사용 목적에 따라 수정했다.

<title xml:lang="ko">위젯 설정</title>

<var name="calendar" type="select">

<title xml:lang="ko">달력 위젯(유니클로)</title>

<description xml:alng="ko">'유니클로' 달력 위젯을 사용합니다.</description>

<options value="">

<title xml:lang="ko">사용 안함(기본)</title>

</options>

<options value="Y">

<title xml:lang="ko">사용</title>

</options>

</var>

<var name="clock" type="select">

<title xml:lang="ko">시계 위젯(다음 위젯)</title>

<description xml:alng="ko">'다음 위젯뱅크' 의 시계 위젯을 사용합니다.</description>

<options value="">

<title xml:lang="ko">사용 안함(기본)</title>

</options>

<options value="Y">

<title xml:lang="ko">사용</title>

</options>

                         </var>

이 부분을 아래 처럼 costom1 costom2 이름으로 수정했다 

주의할 부분은 사용자가 직접 html 형식이나 위젯 코드로 넣을수 있는 사이드의 상 하단 커스텀 위젯 항목의 이름이 costom1_wgt 와 costom2_wgt 로 되어있어 나중에 이부분을 편집하기위해 css 작업이나 레이아웃 class 를 주기위한 작업을 진행할때 class 네임에 주의를 기하자 

<title xml:lang="ko">위젯 설정</title>

<var name="costom1" type="select">

<title xml:lang="ko">1.사용자 고정 위젯(커스텀 1.)</title>

<description xml:alng="ko">'커스텀 위젯'1번쩨 커스텀 위젯을 불러오는 영역 입니다.</description>

<options value="">

<title xml:lang="ko">사용 안함(기본)</title>

</options>

<options value="Y">

<title xml:lang="ko">사용</title>

</options>

</var>

<var name="costom2" type="select">

<title xml:lang="ko">2.사용자 고정 위젯(커스텀 2.)</title>

<description xml:alng="ko">'커스텀 위젯'2번쩨 커스텀 위젯을 불러오는 영역 입니다.</description>

<options value="">

<title xml:lang="ko">사용 안함(기본)</title>

</options>

<options value="Y">

<title xml:lang="ko">사용</title>

</options>

</var>

pc위젯.jpg

 

2. layout.html 수정 

*첫번쩨 항목은 메뉴 위젯을 출력하는 부분이다 일단 스타일 테그 부분을 직접 코딩해서 레이아웃에 올려놓았다 이 부분은 나중에 스타일 테그를 분리시켜 css 파일에 적용 하는게 관리가 편하다. 일단은 이렇게 진행했다

 <div style="border:1px solid #DDD; width=160px; height=;" >

                                <img class="zbxe_widget_output" widget="navigator" skin="vertNavigator" colorset="layout" menu_srl="65" start_depth="2" />

                               </div> 

*두번쩨 항목은 카카오공유 베너 부분 (카카오 출력 위젯의 스타일시트는 layout.css 부분에 cass=kakaolink 추가해 줬다 이 부분의 <P> 스타일도 관리를 위해서 나중엔 css 파일로 분리해 주자 )

     <div class="kakaolink">

         <p style="text-align:center"><a href="javascript:sendLink()" id="kakao-link-btn">

                            <img filemime="/image/kakao_icon.png" filename="kakao_icon.png" src="https://hothoney.co.kr/urikkiri/img/kakao_icon.png" style="max-width:132px; height:132px" alt="Kakao share" title="카카오로 공유해 주세요">

                            </a>

                                </p></div></div>

 카카오 공유 링크를 불러오는 스크립트 파일은 레이아웃 경로의 js폴더에 파일로 저장하고 레이아웃 편집에 설정 -> 헤더부분 문서 첨가 부분의  에서 링크로 불러올수있게 경로를 첨부한다.      

 

3.스타일 시트 파일 편집 

 

레이아웃의 layout.css 스타일 시트 파일을 열어 원본 기준 아래 부분들을 편집했다.

*원본 기준   

173~175 line 

/*

#aside .section.calendar{width:162px;margin:0 4px 10px;padding:18px;background:#FCFCFC;border:1px solid #DDD}

#aside .section.calendar:hover{border-color:transparent}

#aside .section.clock{margin-bottom:10px}

*/

*편집한 추가 부분들 

수정본 174~186 line 

/*사이드 커스텀 위젯 1~2 수정 .*/

/*

#aside .section.costom1{width:162px;margin:0 4px 10px;padding:18px;background:#333;border:1px solid #DDD}

#aside .section.costom1:hover{border-color:transparent}

#aside .section.costom2{width: 162px;margin: 0 4px 10px;padding:18px;background: #ebbe1c;border:1px solid #666}

#aside .section.costom2>.kakaolink{width: 157px;margin:0 2px 2px ;border:1px solid #ffeb3b;border-radius:8px}

#aside .section.costom2:hover{border-color:transparent}

*/

/*사이드 상단 사용자 처리 위젯 커스텀 1 위젯 영역 */

/*

#aside .section>.costom1_wgt{margin: 10px;padding-left: 12px;padding-right: 12px;background:#333;border:1px solid #DDD}

#aside .section>.costom1_wgt:hover{border-color:transparent} #aside .section>.costom1_wgt:hover{background-color:transparent}

*/

/*사이드 하단 사용자 처리 위젯 커스텀 2 위젯 영역 */

/*

#aside .section>.costom2_wgt{margin: 10px;padding-left: 12px;padding-right: 12px;background:#9e9e9e;border:1px solid #888} #aside .section>.costom2_wgt:hover{border-color:transparent} #aside .section>.costom2_wgt:hover{background-color:transparent}

*/

/* 최근 위젯 */*위 스타일시트 파일 편집 부분에 추가된 부분은 (ex: 사이드 상단  사용자 처리 위젯  커스텀 1 위젯 영역 ) 사이드 레이아웃의 사용자 위젯 코드 삽입 부분에 사용하기 위해서 추가한 부분이다 

모바일 해상도 문제로 pc 에서는 출력되는 커스텀 위젯이 mobile 에서는 출력이 안된다 

pc 레이아웃과 mobile 레이아웃을 구분해 사용하는 환경이라 따로  모바일 설정에서 이부분을 사용하기 위해서 만들어 준다.

 

4. 모바일 레이아웃에 출력으로 사용할 위젯코드 (아래 코드들은 모바일 레이아웃 설정의 상하단 위젯 삽입 부분에 넣는 코드 들이다 

 <!-- //위젯1 상단 : 메뉴 출력 위젯 //---->

    <div class="section">

      <div class="costom1_wgt">

         <p style="text-align:center">

                               <div style="border:1px solid #DDD; width=160; height=;">

                                <img class="zbxe_widget_output" widget="navigator" skin="vertNavigator" colorset="layout" menu_srl="65" start_depth="2" />

                               </div> </p></div></div>

   <!---// 위젯 2 하단 카카오 공유 개인 위젯 //----->

    <div class="section">

       <div class="costom2_wgt">

       <p style="text-align:center; padding-top: 6px; border: 1px solid #888; border-radius: 8px;">

       <a href="javascript:sendLink()" id="kakao-link-btn">

                            <img filemime="/image/kakao_icon.png" filename="kakao_icon.png" src="https://hothoney.co.kr/urikkiri/img/kakao_icon.png" style="max-width:132px; height:132px" alt="Kakao share" title='카카오로 공유해 주세요">

                            </a>

                                </p></div></div>

 *이 코드들의 costom_wgt 클라스 부분이 위에 편집한 레이아웃 시트 파일의 상하단 위젯 사용을 위해서 편집한 내용이 들어간 곳이다 

 

   모바일메뉴위젯 .jpg

 

모바일카카오공유.jpg

 

  pc 레이아웃의 사이드 costom_wgt 부분은 아직 사용할 일이 없엇 이 부분은 모바일처럼 편집을 안했다.

   나중에 필요할때 이 기록을 참고삼아 편집하자 

 ※ 레이아웃을 사용하다 보면 편집할때가 간간히 있는데 여기저기 편집한 부분이 많아지다 보면은 내가 어디를 편집 했는지 모르게 된다 

*추가수정 : 공유 링크  생성후 테스트를 해보다 오류를 발견함 -메인 페이지의 레이아웃이나 단독으로 사용하는 페이지 들에서는 정상적으로 작동을 하다가 게시판의 글에서 링크를 하면 만들어놓은 스크립트 파일내의 페이지가 전송 되는게 아니라 게시판 글이 전송되더라 

원인을 조사해 보니 게시판내 sns 공유버턴중  카카오 링크 버턴 (게시글 공유버턴)의 javascript:sendLink() 스크립트를 불러와 게시판에서 사이드의 (모바일 하측) 공유를 클릭하면 게시글의 sns 공유 스크립트가 먼저 적용 되면서 게시글이 전송되 버린다 

수정은 링크 부분의 javascript:sendLink()링크를 javascript:sendLink_hom() 로 수정한후 layout의 js 폴더에 저당된 javascript:sendLink.js 파일의 이름을 javascript:sendLink_hom,js 로 수정후 해당 파일을 열여 javascript:sendLink() 부분을 열어 javascript:sendLink_hom() 로 수정해 주어서 게시판 보드의 스크립트 파일과의 충돌을 피함으로 수정했다.

 이렇게 기록으로 남겨둬서 나중에 혼돈을 방지하자 

 

 


  • profile
    김실장 2022.06.30 13:04
    아직 수정중 ... 테스트 끝나면 기록을 다시 남기자

사이트 관리

사이트관리내역

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
48 라이믹스기록 스티커 메모 위젯 (Sticky Note) 모바일 터치 오류 file 김실장 2022.08.25 22
47 설정기록 방명록 댓글 오류 (스케치북 5 스킨) file 김실장 2022.08.23 18
46 라이믹스기록 스케치북 게시판 get_sign 속성 수정 file 김실장 2022.07.25 25
45 라이믹스기록 스케치북5 정보보기 - 맴버 스킨의 자동로그인 관리 / 작성댓글보기 탬플릿 오류 1 file 김실장 2022.07.15 21
44 라이믹스기록 핫튜브 / 자료실 게시판 오류 -유튜브 링크 바로 임베드 애드온 설치로해결 2 file 김실장 2022.07.14 20
43 라이믹스기록 라이믹스형 스케치북 게시판 카카오톡 & 트윗터 공유 추가 file 김실장 2022.07.13 26
42 라이믹스기록 카카오톡 외 왭 공유 게시글 이미지 첨부 오류 file 김실장 2022.07.13 20
41 라이믹스기록 라이믹스 업그레이드 오류내용들-(정검해봐야할 기록 정리) 2 file 김실장 2022.07.11 25
40 라이믹스기록 라이믹스 업그레이드 후 소셜xe 로그인 오류 1 김실장 2022.07.11 30
39 라이믹스기록 XE 에서 rhymix 로 업그레이들 하였다. 5 file 김실장 2022.07.10 35
38 수정기록 블로그 상단 메뉴 바 컬러 변경 file 김실장 2022.07.07 15
37 수정기록 카카오톡 sns 공유 이미지 불러오기 오류 file 김실장 2022.07.04 16
36 수정기록 스케치북 5 게시판 (제목 컬러설정)오류 1 file 김실장 2022.07.04 22
35 수정기록 사이드바 / 최신글 /최신댓글 /태그 리스트 수정 1 file 김실장 2022.07.02 25
34 수정기록 스케치북5 게시판 sns 공유버턴 트윗터 오류 file 김실장 2022.07.01 26
» 수정기록 pc와 mobile위젯 편집 (카카오 공유링크) 1 file 김실장 2022.06.30 25
32 수정기록 카카오 공유 링크 만들기 위한 말풍선 아이콘.png file 김실장 2022.06.28 28
31 라이믹스기록 스케치북5 레이아웃 사용못하는 사이드 위젯들을 커스텀하자 file 김실장 2022.06.28 30
30 설정기록 스케치북 게시판 웹진형 설정 file 김실장 2022.06.27 21
29 수정기록 스케치북5 레이아웃 카테고리 위젯문제 해결 file 김실장 2022.06.27 19
28 수정기록 니코(nico) 위젯 스타일 모바일형으로수정 file 김실장 2022.06.27 22
27 수정기록 웹콘 소프트의 슬라이드 갤러리 Carousel 위젯 수정 file 김실장 2022.06.26 18
26 수정기록 위젯 페딩값 수정과 이미지 파일 수정 file 김실장 2022.06.26 22
25 수정기록 최신글 위젯 모바일 사용성 편집 file 김실장 2022.06.26 22
24 수정기록 클라우드 태그위젯 폰트 색상코드 변경 file 김실장 2022.06.25 16
23 수정기록 회원 정보 탭 수정 (sns관리탭, 회원 정보탭) file 김실장 2022.06.25 16
22 수정기록 페이스북 소셜 로그인 앱 오류수정 1 file 김실장 2022.06.24 24
21 수정기록 내정보 탭의 로그인 기록창과 sns 관리 창 변경 file 김실장 2022.06.24 22
20 수정기록 사이트 레이아웃 기본 로그인창 소셜 로그인 기능 수정 기록 file 김실장 2022.06.24 27
19 수정기록 사이트 레이아웃 기본 로그인창 소셜 로그인 기능 수정 계흭 기록 file 김실장 2022.06.24 19
18 수정기록 게시판 스킨 쓰기 설정 변경 김실장 2022.06.24 24
17 수정기록 소셜 XE 구글 fix 버전 설치 후 수정 목록 1 file 김실장 2022.06.23 19
16 수정기록 스케치북 5 게시판의 위저드기능 사용안함 설정 file 김실장 2022.06.22 22
15 수정기록 스케치북 5 게시판 카카오톡 공유 사용설정 김실장 2022.06.22 22
14 수정기록 UTF-8 인코딩의 BOM (Byte Order Mark) 문제로 레이아웃 깨짐 file 김실장 2022.06.22 9
13 수정기록 변칙 모바일 레이아웃 해상도 수정 적용 file 김실장 2022.06.21 19
12 수정기록 댓글 쓰기창 문구 수정 김실장 2022.06.21 23
11 수정기록 인증메일 재전송 창 수정 3 file 김실장 2022.06.21 25
10 수정기록 모바일 기본로그인 창 사이즈 변경 - 모바일 전체메뉴 보기 컬러 변경 file 김실장 2022.06.20 19
9 수정기록 costom파일 생성 김실장 2022.06.20 18
Board Pagination Prev 1 2 Next
/ 2

Recent Articles

Recent Comment

sketchbook5, 스케치북5

sketchbook5, 스케치북5