You cannot see this page without javascript.

메뉴 건너뛰기

MH

XE자료실

Lightbox 전용 Hover 위젯 위젯에서 썸네일 클릭시 이미지가 화면위에 출력되는 Lightbox기...
MH FullPage 레이아웃 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃...
Mh_Fullpage 마우스 휠 한번 작동시 전체 화면 스크롤 Fullpage 레이아웃입니...
댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 ...
Lightbox 전용 Slideing 위젯 위젯에서 썸네일 클릭시 이미지가 화면위에 출력되는 Lightbox기...
MH Multi V3.3 - 최신글+내용글+댓글+썸네일(링크, 줌, Lightbox) 이전 버전에서 설명을 보고 오시면 편합니다. [V3.3 특징] 1. 내...
CSS 말줄임 처리하기 일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글...
MH StartStopSlider 위젯 화면 출력이 슬라이딩형식으로 흘러 갑니다. [특징] - 이미지, 제...
Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 Sketchbook5 게시판을 사용하여 글 작성시 상단에 빵조각 메뉴 부...
마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [특징] - 총 3단계의 상하 페이지로 구성되며, 2단계는 2개의 좌우 슬라이딩 페이지로 구성.(총 4개의 페이지) - 2-2 페이지에 내용등 작성하지 않으면 출력되지 않음 - 각 페이지의 배경을 이미지와 색상으로 지정 가능.(아래 이미지에 보이는 색상이 기본 색상) - 첫 페이지의 이미지는 배경 슬라이딩 이미지로도 설정 가능.(총4개의 이미지 지정 가능) - 각 페이지마다 타이틀, 서브타이틀, content(위젯생성)영역, Html영역의 출력 가능. - content(위젯생성)영역은 여러 페이지중 한 곳에서만 가능.(출력안함 가능) - 상단영역과 하단영역의 출력 유무 가능. - 상단영역에 메뉴버턴과 로고이미지와 검색, 사용자 팝업메뉴(로그인/관리/기타) 출력가능. - 하단영역에 Copyright와 이메일, 기타문구 출력가능. - 각 옵션마다 적합한 색상과 크기, 높 낮이 지정 가능.(상하단 바탕색상, 메뉴/버턴/글꼴 색상) - 반응형(모바일) 지원. - 일반 메뉴바 와 반응형 메뉴바 구분 지원(1024px 기준) - Html영역(위젯)에 일반형과 다른 반응형코드 작성 가능. - 반응형 Menu의 경우 로고문자와 로그인을 지원하며, 2차 메뉴는 드롭메뉴로 작동. - 페이지내용이 한 화면을 초과할시 스크롤사용 기능 선택 가능. - 각종 네비 기능 선택 가능.(상하버턴, 좌우버턴, 페이지버턴등) - 페이지 Loop기능 선택 가능.(1페이지에서 3페이지로, 3페이지에서 1페이지로) - SocialXE 모듈설치시 SNS로그인 가능. 소스는 아래 fullPage.js 에서 제공 받아서 XE 에서 작동하게끔 수정 / 변형 했습니다. https://www.alvarotrigo.com/fullPage/
- '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/rxe_point/278628 , 깃허브에는 0.6도 있습니다ㅎ ) - 그 외에도 컴포넌트 이용자가 템플릿을 직접 만들어 활용할 수 있으므로, 견적서, 증빙서류 등 정해진 서식을 출력할 때 활용하는 것도 좋을 것 같습니다. - 풀 페이지, 헤더, 섹션, 푸터 등 4가지 타입의 템플릿을 제공합니다. - 해당 템플릿을 에디터 내 원하는 위치에 삽입할 수 있으며, 전체 덮어쓰기도 할 수 있습니다. 사용 방법 - CKEditor4 기준으로 설명합니다. - 보라색 부분의 아이콘을 누릅니다. - 팝업창이 뜹니다. - 썸네일 리스트의 원하는 템플릿을 골라 에디터에 '추가'하거나 '덮어쓰기'를 하면 에디터에 이렇게 적용됩니다. (템플릿 요소(li)를 더블클릭하면 에디터 커서 위치에 '추가'가 됩니다) - 물론 이미지나 글 내용을 수정할 수도 있습니다. 템플릿 등록 방법 - 컴포넌트 폴더에 templates 이라는 폴더가 있는데요. 이 안에 템플릿 문서 파일이 있는 하위폴더들이 있습니다. - 하위폴더의 이름은 템플릿들의 이름이기도 합니다. - 각각의 하위폴더에는 기본 제공되는 폴더에 있는 것처럼 index.html, info.xml, thumb.jpg가 있어야 합니다. - index.html은 템플릿의 html 코드를 담고 있습니다. 참고로, 기본 제공되는 템플릿은 뉴스레터 이메일 용으로 제작 중인 것이어서 기본적으로 인라인 스타일을 일괄적용하고 있습니다. - info.xml은 템플릿의 정보를 담고 있습니다. 기존 파일을 열어보시면 아시겠지만, admin, full_page, header, section, footer에 관한 정보가 필수적으로 들어가야 합니다. admin 값이 Y면 관리자만 템플릿을 적용할 수 있습니다. N이면 에디터 이용자 모두가 볼 수 있구요. full_page 값이 Y면 전체 문서에 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. header 값이 Y면 문서의 머리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. section 값이 Y면 문서의 본문으로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. footer 값이 Y면 문서의 꼬리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. - thumb.jpg는 팝업창에서 출력하는 템플릿 리스트에서 출력할 썸네일입니다. 크기는 대략 120*100px 정도가 좋습니다. => 이렇게 준비하시면 여러분도 템플릿을 등록해서 언제든 꺼내서 사용하실 수가 있게 되는 겁니다. 주의 사항 - 본 템플릿 컴포넌트는 CKEditor4와 FroalaEditor에서 작동합니다. - 단, 프로알라 에디터의 경우에는 요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다. 테스트 환경 - 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0 - 라이믹스 1.9.6 / PHP 버전: 7.0.22 ... CKEditor4 - XE 1.9.7 / PHP 버전: 5.5 ... FroalaEditor - 스포어 웹호스팅, 카페24 웹호스팅 히스토리 - 2017년 9월 11일 "신기하네요. 레이아웃 만들기" https://xetown.com/rxe_story/729982 - 2017년 9월 13일 "재미난 녀석을 만들고 있습니다 ... 템플릿 컴포넌트" https://xetown.com/rxe_story/731957 - 2018년 6월 14일 "템플릿 컴포넌트 순항 중ㅎㅎ" https://xetown.com/board/996760 - 2018년 6월 17일 "XE에서 컴파일이 안돼요ㅠ(라이믹스에서는 되구요)" https://xetown.com/qna/998893 데모 - 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22 https://bit.ly/2IECAeU (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸) 문하우스에서 만든 템플릿들 - http://moonhouse.co.kr/xe/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF
Category 기타 Data 2018.07.05 Views 72
현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 날씨 위젯 레이아웃이 있어서 그나마 수월하게 끝냈 수 있었습니다. 역시나 이번에도 주소록 파일 만드는데 대부분의 시간을 허비 했습니다. 그나마 경험이 있어서 조금은 빨리 데이터 정리할 수 있었네요 ㅋㅋㅋ 날씨 위젯 0.3 pr_weather_v2_0.3.zip 주의 사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 변경사항 1. 캐시 데이터에 변화가 있으니 캐시파일 재생성 후 사용하시는것이 좋습니다. 2. 코드를 세분화하고 오류체크가 미흡했던 부분들 보완 했습니다. 3. '기본스킨 - 가로형'이 추가되었습니다. 참고로 기존 '기본스킨'은 변경된 부분이 없습니다. - 너비에따라 최대 3개의 날씨 예보를 표시 합니다. - 하단 스크롤을위해 아래 jquery plugin을 사용하였습니다. http://richhollis.github.io/vticker/ 날씨 위젯 0.2 pr_weather_v2_0.2.zip 주의 사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 변경사항 1. 사용하는 쿠키명을 '_pr_w_weather_geo'로 단일화 하였습니다. - 기존에는 위치기반 사용자와 수동으로 지역 선택해서 사용하는 사용자의 쿠키명을 다르게 운영하였는데 이를 하나로 통합 했습니다. - 기존 사용자들의 쿠키들은 위젯에서 확인해서 자동 업데이트 합니다. 2. api통신시 타임아웃을 3초로 변경 하였습니다. - api.func.php 파일 13번째 라인 ($_timeout = 3;)에서 이 시간을 변경 하실 수 있습니다. 위 이미지 참조. 3. 통신방식을 curl로 변경 하였습니다. 4. 위젯 설정값에 '위치값 유효 시간 (분)'을 추가 하였습니다. - 이 값은 위치 기반 사용자의 경우에만 유효합니다. 유효 시간이 지난 후 페이지 새로고침이 발생하면 자동으로 내 위치 찾기 버튼 클릭 이벤트를 발생시켜 나의 위치를 갱신해서 날씨 데이터를 표시 합니다. 5. 위젯 실행시 더이상 날씨 데이터를 만들지 않고 ajax로 처리 합니다. - 페이지 표시할때 날씨 위젯이 캐시 유효기간이 만료되어 이를 갱신하거나 새로운 사용자의 날씨 데이터를 생성하느라 로딩 시간을 꽤나(1~2초) 잡아먹는 경우가 발생 했었습니다. 이를 해결하기위해 페이지 로딩시에 위젯은 유효한 캐시가 있을때만 이 데이터를 html로 뿌려 줍니다. - 유효한 날씨 데이터가 없을때는 기본 화면을 먼저 띄우고 날씨 데이터는 페이지 로딩 이후 ajax로 불러 옵니다. - 날씨 위젯때문에 페이지 로딩이 느려지는일은 이제 없을겁니다. 6. 자료 제공자의 바로가기 링크가 수정되었습니다. - 기상청 : 기존 날씨누리 메인 페이지에서 동네 예보를 검색할 수 있는 서브 페이지로 변경 되었습니다. pc : http://www.weather.go.kr/weather/forecast/timeseries.jsp 모바일 : http://m.kma.go.kr/m/forecast/forecast_01.jsp - World Air Quality : 기존 세계 상황을 볼수있는 페이지에서 자신의 위치 근처의 상활을 볼 수 있는 페이지로 변경. 날씨 위젯 0.1 pr_weather_v2_0.1.zip 주의 1. 데이터를 받아올때 curl이나 snoopy같은 클래스 이용없이 간단하게 file_get_contents을 이용했습니다. 2. 지오로케이션 api는 https가 아니면 작동하지 않을 수 있습니다. 이경우에는 자동 위치확인 아이콘을 클릭하더라도 주소록 선택화면이 뜨로록 했습니다. 그리고 브라우저나 환경(pc, 모바일)에 따라서 정확하지 않은 좌표를 반환 할 수 있습니다. 3.위젯이 작동하기 위해서는 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 7번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 4. 위의 이미지에서 보듯이 5번째 라인에 타임아웃을 5초로 설정하고 있습니다. 5초동안 응답이 없다면 기존 캐시 데이터를 이용하도록 설계되어 있습니다. 설정 1. 스킨의 컬러셋은 '흰색 바탕용'만 작업했습니다. 2. 캐시는 기본제공되는 위쪽의 캐시는 사용하지 마시고 아래쪽에 따로 마련된 '캐시 유지시간'을 사용 하세요. 캐시는 30분 이상 충분히 넉넉하게 사용하시는것을 추천 합니다. 3. 지역을 설정하지않은 사용자에게 보여줄 기본지역은 서울의 중앙 부분쯤인 필동으로 기본값을 정했습니다. 4. 마지막 애드온과 연동 부분은 제가 개인적으로 사용하는 애드온과 연동하기 위한 부분이니 신경쓰지 않으셔도 됩니다. - 여담 입니다만 눈송이 애드온을 보고 제가 개인적으로 사용하던 애드온과 너무 흡사해서 놀란적이 있습니다. 같은 플러그인을 사용해서 눈송이 옵션이 비슷한것을 떠나 실제 날씨와 연동한 아이디어도 비슷해서요 ㅎㅎㅎ 혹시 이 옵션을 이용하시려면 애드온등에서 아래 코드로 체크 하시면 됩니다. if(Context::get('pr_is_snowing') == 'Y' || $_SESSION['pr_is_snowing'] == 'Y') { //눈이나 눈/비가 내리는 날씨 입니다. } 참고 사항 1. 캐시는 캐시 유지시간을 초과했더라도 무조건 삭제하지 않고 새 날씨 데이터를 가져올때 응답이 느려 타임아웃이 발생하면 기존 캐시를 또한번 이용하도록 설계하였습니다. (주의 4번 참조) 2. 주소록 관련 기존 포털 사이트에서는 최종 읍/면/동의 개수가 6,491개 였습니다. 하지만 기상청에서 제공하는 주소록에는 전국 3,504개의 읍/면/동만 제공하더군요. 이 위젯은 기상청 데이터를 이용하므로 기상청의 지역 분류에따랐습니다. 예로 서울 중구의 경우 아래처럼 차이가 납니다. 좌측이 포털사이트, 우측이 기상청 입니다. 3. 기상청에서는 자신들만의 x,y좌표에 따라 구역을 나눠서 최종 데이터를 제공하는것으로 보입니다. 따라서 10자리 지역코드가 다르더라도 x,y좌표가 겹치는 지역이 상당히 많습니다. 그래서 캐시또한 x,y좌표에 따라 관리합니다. 2번에서 밝힌대로 전국 3,504개의 지역이 있지만 x,y좌표 겹치는곳을 제거하면 1,620개 지역으로 압축됩니다. 서울의 경우는 겹치는 지역이나 경기권과 겹치는 경우를 제외하면 18개의 좌표만 남습니다. 4. 지오로케이션 얻어온 좌표기반으로 지역명을 구하는 api를 구글이 제공하기는 합니다만 무료는 하루 2,500쿼리 제한도 있고 또한번 통신을 하므로 속도저하가 있을것으로 판단하여 따로 api를 이용하지않고 주소록에서 지역명을 찾아오도록 했습니다. 다만 속도를 위해 간단하게 기상청의 x,y좌표 기반으로 지역명을 판단하게 만들다보니 지역명이 정확하지 않을 수 있습니다. 예로 아래 지역의경우 모두 같은 x,y좌표를 사용합니다. 따라서 현재 지역이 아래와 같다면 순서에의해 모두 '서대문구 천연동'이라고 표시가 됩니다. 서대문구 천연동 성북구 돈암제2동, 삼선동, 성북동, 정릉제1동, 정릉제2동 종로구 가회동, 교남동, 무악동, 부암동, 사직동, 삼청동, 숭인제1동, 이화동, 종로1.2.3.4가동, 종로5.6가동, 창신제2동, 창신제3동, 청운효자동, 평창동, 혜화동 중구 광희동, 명동, 소공동, 신당동, 을지로동, 장충동, 필동 5. 날씨 아이콘은 아래 링크의 무료 공개된 아이콘을 받아서 제가 간단하게 색을 입혔습니다. https://dribbble.com/shots/1247177-Weather-icons 6. 통합대기 품질은 데이터 제공자의 등급 표시에 따라 표기합니다. 위젯 작동 1. 통합대기 상태를 클릭하면 자세한 수치가 표시됩니다. 2. 위치 기반 3. 지역 수동 선택 4. 위치 기반이던 지역 수동 선택이던 지역 정보를 쿠키에 저장해서 사용합니다. 적다보니 상당히 길어졌네요... 문제가 있다면 댓글 달아주시면 시간 나는대로 수정하겠습니다. 마지막으로... 충분히 테스트 해보시고 사용하시기 바랍니다. ㅎㅎㅎ
Category 위젯 Data 2018.02.07 Views 243
게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 것이 싫어실 경우 적용하시면 됩니다. sketchbook5 게시판을 예로 해서 설명합니다. 1. 게시판설정에서 게시판별로 해당 기능을 켜고 끄게 만듭니다. 아래 코드를 skin.xml의 적당한 곳에 추가합니다. <var name="cmt_line_use" type="radio"> <title xml:lang="ko">댓글 한줄 출력</title> <description xml:lang="ko">댓글이 2줄 이상일때 펼쳐보기 메뉴 출력</description> <options value=""> <title xml:lang="ko">미출력(기본)</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="cmt_line_no" type="text"> <title xml:lang="ko"> ┖ 댓글 출력 라인수</title> <description xml:lang="ko">댓글 출력 라인수(기본 1줄)</description> </var> <var name="cmt_line_h" type="text"> <title xml:lang="ko"> ┖ 댓글 출력 칸높이</title> <description xml:lang="ko">댓글 출력 각 칸의 높이를 지정합니다. (기본 1.5em)</description> </var> 2. _comment.html의 상단부분에 아래 코드 추가 - style 과 script <!--// 댓글 줄수 설정 --> <block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block> <block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block> <style cond="$mi->cmt_line_use=='Y'"> .commentbox{ overflow:hidden; } .commentbox .xe_content{ margin-top:0px; } .commentbox .xe_content.hiddenComment p, .commentbox .xe_content.hiddenComment{ float:left; width:80%; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp:{$mi->cmt_line_no}; line-height:{$mi->cmt_line_h}em; height: {$mi->cmt_line_h*$mi->cmt_line_no}em; } .commentbox .xe_content.hiddenComment p{ width:100%; } .btn-moreComment{ display:none; white-space:nowrap; float:right; margin-top:0px; } .btn-moreComment.hidden {display:none !important;} .btn-closeComment{ display:none; white-space:nowrap; float:right; margin-top:0px; } .btn-closeComment.active{ display:inline-block; } @media screen and (max-width: 533px){ .commentbox .xe_content.hiddenComment{ width:60%; } } </style> <script cond="$mi->cmt_line_use=='Y'"> jQuery(function ($) { var commentbox = $('.commentbox .xe_content'); commentbox.each( function() { $( this ).outerHeight(); if( $(this).outerHeight() > 22*{$mi->cmt_line_no} ){ $(this).addClass('hiddenComment'); var btnMoreCmt = $(this).siblings('.btn-moreComment'); btnMoreCmt.show(); btnMoreCmt.on("click",function(){ $(this).siblings('.xe_content').removeClass('hiddenComment'); $(this).siblings(".btn-closeComment").addClass("active"); $(this).addClass("hidden"); }); //코멘트 닫기 var btnCloseCmt = $(this).siblings('.btn-closeComment'); btnCloseCmt.on("click",function(){ $(this).removeClass("active"); $(this).siblings('.xe_content').addClass('hiddenComment'); btnMoreCmt.removeClass("hidden"); }); } } ); }); </script> 3. _comment.html내의 댓글부분 - {$comment->getContent(false)}아래에 코드 추가 <div class="commentbox"> {$comment->getContent(false)} <div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-down"></i> 펼치기</div> <div cond="$mi->cmt_line_use=='Y'" class="btn-closeComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-up"></i> 접기</div> </div> p.s sbtn_small sbtn-gray 부분과 폰트어썸 아이콘은 웹폰드 에드온을 사용했습니다.
Xedition 레이아웃을 사용해 오면서 별 불만이 없는데 상단에 위치한 검색창이 마음에 들지를 않아서 바꾸어 봤습니다. 생각보다 어렵더군요 ^.^! 1. xedition/layout.html 에서 search부분을 찾아서 수정합니다. 169줄 ~ 181줄 삭제 <div cond="$layout_info->enable_intergration_search === 'Y'" class="search_wrap"> <div class="search_area"> <!-- SEARCH --> <form action="{getUrl()}" method="get" class="search" no-error-return-url="true"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input type="text" name="is_keyword" value="{$is_keyword}" required="required" title="{$lang->cmd_search}" placeholder="Search" /> </form> <!-- /SEARCH --> <a href="#" class="btn_close" title="{$lang->cmd_xedition_search_close}" onclick="return false"><i class="xi-close"></i><span class="blind">{$lang->cmd_xedition_search_close}</span></a> </div> </div> 210줄 ~ 213줄 수정전 <!-- search --> <li cond="$layout_info->enable_intergration_search === 'Y'" class="click"> <a href="#" title="{$lang->cmd_search}"><i class="xi-magnifier"></i><span class="blind">{$lang->cmd_search}</span></a> </li> 수정후 <!-- Search --> <li cond="$layout_info->enable_intergration_search == 'Y'" class="click"> <load target="js/search.js" /> <div class="search-wrapper"> <form action="{getUrl()}" method="get" class="search" no-error-return-url="true"> <div class="input-holder"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input type="text" name="is_keyword" value="{$is_keyword}" required="required" placeholder="Search..." /> <button class="search-icon" title="{$lang->cmd_search}" onclick="searchToggle(this, event);"><i class="fas fa-search fa-2x"></i></button> </div> <span class="close" onclick="searchToggle(this, event);"><i class="fas fa-times fa-2x"></i></span> </form> </div> </li> <style> .search-wrapper .input-holder .search-icon { color:#777;} .search-wrapper.active .close { color:#777; } .search-wrapper.active .input-holder { background:#000; } .search-wrapper .input-holder input[type=text] { color:#fff } input::-webkit-input-placeholder { color:#888; } </style> 2. xedition/css/layout.css 에서 553줄 ~ 601줄 /* Search */ 부분을 아래 코드로 교체합니다. /* Search */ .search-wrapper { position:absolute; top:-7px; left:-25px; } .search-wrapper.active { position:absolute; top:25px; left:-200px; z-index:2: } .search-wrapper .input-holder { overflow:hidden; height:40px; } .search-wrapper.active .input-holder { border-radius:50px; width:200px; } .search-wrapper .input-holder input[type=text] { width:90%; height:20px; padding:0px 30px 0 10px; opacity:0; position:absolute; top:0px; left:10px; background:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:none; outline:none; font-size:14px; } .search-wrapper.active .input-holder input[type=text] { opacity:1; -webkit-transform:translate(0, 10px); -moz-transform:translate(0, 10px); transform:translate(0, 10px); } .search-wrapper .input-holder .search-icon { background:transparent; position:relative; z-index:2; float:right; cursor:pointer; margin:8px 10px 0 0} .search-wrapper .input-holder .search-icon:focus { border:none; outline:none; color:#fff; } .search-wrapper .close { display:none; position:absolute; z-index:2; top:7px; left:210px; cursor:pointer; } .search-wrapper.active .close { display:block; } 3. search.js 파일을 다운 받아서 xedition/js 방에 업로드 합니다. 참고로 아이콘은 폰트어썸을 사용하였으며, layout.html 안에 <style>부분은 검색창의 색상부분입니다. 자기에 맞게끔 색상 변경하시면 됩니다.
[구글 드라이브에 올린 파일 직접 다운로드 링크 넣는 방법] [외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법] 위 두가지 내용을 복합해서 sketchbook5 게시판에 적용하는 방법을 작성합니다. 먼저 위 두가지 내용을 잘 숙지 하셨다 생각하고 작성합니다. A. skin.xml 파일안에 로그인한 회원이 다운받을 URL 이 적혀 있는 확장변수의 입력항목이름 부분에 3개의 설정값을 적용합니다. <var name="extra_mid" type="text"> <title xml:lang="ko">확장변수 mid</title> <description xml:lang="ko">적용될 확장변수 게시판 mid(게시판명)를 기재.</description> </var> <var name="t_logon_name" type="text"> <title xml:lang="ko"> ┖ 확장변수 입력항목 이름(일반텍스트 링크)</title> <description xml:lang="ko">입력항목 이름을 적어주세요. 한줄 입력칸형식("http://다운주소" 직접 입력)</description> </var> <var name="g_logon_name" type="text"> <title xml:lang="ko"> ┖ 확장변수 입력항목 이름(구글 드라이브 전용)</title> <description xml:lang="ko">입력항목 이름을 적어주세요. 한줄 입력칸형식(ID 부분만 붙여 넣기 하세요)</description> </var> <var name="et_logon_name" type="text"> <title xml:lang="ko"> ┖ 확장변수 입력항목 이름(URL 링크)</title> <description xml:lang="ko">입력항목 이름을 적어주세요. URL형식</description> </var> <var name="et_logon_t" type="text"> <title xml:lang="ko"> ┖ 다운로드칸 옵션 설명</title> <description xml:lang="ko">기본 : 클릭하시면 자료가 다운로드 됩니다.</description> </var> [3가지 설정을 간단히 설명] 1. t_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "한줄 입력칸(text)"으로 지정합니다. 그리고 게시판 글 작성시 확장변수 란에 "http://주소" 포함한 전체 주소를 기재하시면 됩니다. 2. g_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "한줄 입력칸(text)"으로 지정합니다. 그리고 게시판 글 작성시 확장변수 란에 구글 드라이브에서 추출한 아래의 주소 형식에서 파란색 부분만 복사해서 기재하시면 됩니다. https://drive.google.com/file/d/1qvYhoNZ2rH320nSHtk7생략.../view?usp=sharing 3. et_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "URL 형식"으로 지정합니다. 그리고 게시판 글 작성시 확장변수 란에 "http://주소 or 주소" 둘중 편한데로 기재하시면 됩니다. B. _read.html 파일안에 "본문 하단" 확장변수부분을 아래와 같이 수정합니다. <!--// 외부 Url 파일 다운로드 --> <!--@if($mid==$mi->extra_mid)--> <!--@if($logged_info)--> <a href="#toggleExtraVars"><img src="./img/login_img.png"></a> <style> #toggleExtraVars { border:1px dotted #fff; padding:5px; font-size:14px; border-radius:5px; } #toggleExtraVars i { color:#fff; margin-right:10px; } #toggleExtraVars .et { font-size:12px; color:#d2d2d2 } .sty { cursor: pointer; background-color:#000; width:210px } </style> <div cond="$val->name==$mi->et_logon_name" id="toggleExtraVars" style="background-color:#747474"><i class="fas fa-download"></i> {$val->getValueHTML()}<span cond="$mi->et_logon_t" class="et"> : {$mi->et_logon_t}</span> </div> <div cond="$val->name==$mi->t_logon_name" id="toggleExtraVars" class="sty" onclick="location.href='{$val->getValueHTML()}'"><i class="fas fa-download"></i> <b class="et"><span cond="$mi->et_logon_t">: {$mi->et_logon_t}</span><span cond="!$mi->et_logon_t">: 클릭하시면 자료가 다운로드 됩니다.</span></b> </div> <div cond="$val->name==$mi->g_logon_name" id="toggleExtraVars" class="sty" onclick="location.href='https://docs.google.com/uc?export=download&id={$val->getValueHTML()}'"><i class="fas fa-download"></i> <b class="et"><span cond="$mi->et_logon_t">: {$mi->et_logon_t}</span><span cond="!$mi->et_logon_t">: 클릭하시면 자료가 다운로드 됩니다.</span></b> </div> <script type="text/javascript"> jQuery.noConflict(); jQuery(function($){ $('#toggleExtraVars').hide(); $('a[href=#toggleExtraVars]').click(function(){ $($(this).attr('href')).toggle(); return false; }); }); </script> <!--@else--> <p><a href="" onclick='javascript:alert("회원가입 로그인후 다운로드가 가능합니다.");'><img src="./img/login_img.png" alt="" class="pr_tooltip" pr_color="dark" pr_position="bottom" title="회원가입 로그인후 다운로드가 가능합니다" /></a></p> <!--@end--> <!--@else--> <!--@end--> [코드 설명] 1. <!--@if($mid==$mi->extra_mid)--> : 적용될 확장변수 게시판 mid를 지정합니다. 2. ./img/login_img.png : 클릭부분을 이미지로 출력한 것임 3. <i class="fas fa-download"></i> : 웹폰트인 "폰터 어썸"을 사용했습니다. 4. $mi->et_logon_t : Download 이미지 클릭시 아래에 출력되는 자료 다운 받기 부분에 나타나는 문구 (기본문구로 ": 클릭하시면 자료가 다운로드 됩니다.") 5. class="pr_tooltip" pr_color="dark" pr_position="bottom" : 비로그인시 출력되는 문구는 "말풍선(툴팁) 애드온" 적용 C. 특징 1. URL형식을 제외한 두가지 형태의 경우 : Url주소를 숨길 수 있습니다. 2. 구글 드라이브 파일의 경우 : 코드를 외우거나 저장할 필요 없이 ID부분만 붙여 넣기 하면 됩니다. (응용하면 다른 확장변수에도 적용 가능) [sketchbook5 게시판 설정] [글 작성] [본문에 출력] Sample View
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...