Data Of MoonHouse

SketchBook5 게시판스킨 - 문하우스 수정버전 V3.0 - 2024.04.10

• 기존 스케치북 게시판 스킨에 덮어 쓰기 해도 잘 작동됩니다. (혹시 모르니 백업은 필수!!) - /modules/board/skins/sketchbook5 에 모든 파일을 덮어 쓰기 하면 됩니다. • XE 사용자의 경우 [ 본문 일반 설정 > 추천/비추천 기능 XE사용 ] 에서 XE사용을 선택하면 됩니다. [ V3.0 수정 ] 1. 폰트어썸 웹폰트와 문하우스 전용 버턴 기능을 에드온에 의존하지 않고 게시판 설정에서 직접 관리 전체설정 > 폰트어썸 사용형태 or Sexy Button 사용형태 2. 게시글 상단 네비에 목록과 쓰기 버턴 추가 3. 공지글 폴딩 형태로 출력 기능 추가 ...

More →

SketchBook5 게시판스...

MH Before V1.1 위젯

[ 특징 ] 1. Before이미지 와 After이미지를 비교하는 위젯 2. 지정 게시판에 Before 이미지를 처음 올리고 After 이미지를 두번째로 업로드 3. 대상 분류 srl값으로도 출력가능 4. 이미지의 사이즈는 첫이미지, 즉 Before이미지의 사이즈를 따라갑니다. 되도록이면 사이즈를 동일하게 만들면 됨 5. 중앙에 화살표를 좌우로 움직이면 Before / After 이미지로 출력 6. 하단문구 지정 가능 7. 게시글의 이미지 순서 지정 가능 [게시판 화면] [위젯 화면] [화살표를 좌로 움직인 화면]

More →

MH Before V1.1 위젯

Mh Make 위젯스타일

문하우스 대문페이지에 있는 위젯스타일입니다. [특징] 1. 테두리의 유무 2. 타이틀 색상, 타이틀 앞 언더바 색상 지정 가능 3. 더 보기 출력 4. V1.1 - 테두리 색상 지정 가능 [설정 화면]

More →

Mh Make 위젯스타일

Mh BigSlider V2.1 위젯 - 2024.04.13

[ V 2.1 특징 ] 1. 내용글 영역에 확장변수 출력가능 2. 확장영역 버턴 대신 내용 출력 3. D-day / 시작전 출력 4. 기간 출력 - https://moonhouse.co.kr/xetip/590008 [ V 2.0 특징 ] 1. 배경 이미지 제거 스킨 추가 2. 어떤 크기라도 가능 3. 슬라이드 내용 가로, 세로 정렬 [ V 1.1 특징 ] 1. Slide 설정에 자동 슬라이드쇼, 마우스 hover시 슬라이드 쇼 일시 중지, 랜덤 재생 추가 2. 마우스 hover시 썸네일 확대 [ 특징 ] 1. 깔금한 슬라이드 배경이미지 적용 2. 3개의 스킨 적용 - 1080px / 850px / 750px 레이아웃폭에 적당한 크기 ...

More →

Mh BigSlider V2.1 위...

Mh Justice Layout V 1.5 [ 2023. 02. 07 ] - Sale 제품(₩39,000)

Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능 4. 상단 메뉴를 자유자재로 선택 가능 • 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴 • 메인 메...

More →

Mh Justice Layout V 1...

Mh SmartBanner Widget V1.1 [2021.01.13] - Sale 제품(₩9,000)

카테고리지정 / 시작,종료설정 / 배경 블랙 / 좌로 이동 / 랜덤 / 네비가능 / 무한루프 / 클릭시 지정사이트로 이동 / 풍선도움말 - "대상 분류값"으로 배너 출력 가능 - "위젯 NO" 처리로 여러개의 배너를 다양한 형태로 생성 가능 - Slide의 다양한 옵션 - Auto기능과 타임지정 가능 - 좌우 네비와 하단에 도트 네비 출력 가능 - 슬라이딩의 방향을 좌우 / 상하로 선택 가능 - 슬라이딩의 모습를 4가지로 선택 가능 - 서서히, 착, 튕기기, Fade - 배너에 마우스 Hover시 풍선도움말 출력 - 게시판의 확장변수와 연동하여 배너 클릭시 지...

More →

Mh SmartBanner Widget...

Mh Brickfolio Widget V1.3 [2023.04.05] - Sale 제품(₩9,000)

[ V1.3 특징 ] [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V1.2 특징 ] 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때) 5. Box를 총8가지의 에니메이션 효과로 출력 6. Box의 색상 / 테두...

More →

Mh Brickfolio Widget ...

Mh Portfolio V1.0

[ V1.0 특징 ] 1. 깔끔한 썸네일 위젯 2. 썸네일 Box에 마우스 Hover시 제목과 내용글이 다양한 효과와 색상으로 출력 -- 효과 15가지, 배경색상 13가지, 버턴색상 17가지 3. 카테고리별 출력도 가능 4. 페이지 기능 가능 -- ajax적용으로 화면 리프레쉬 없이 작동 5. 확장변수를 이용해 버턴출력 가능 6. 다수의 위젯생성도 가능 7. 반응형 지원

More →

Mh Portfolio V1.0

Mh Owl Slide V1.0

[ 특징 ] 1. 깔금한 배너 롤링 위젯입니다. 2. Auto Slide를 지원합니다. 3. 슬라이드에 타이틀 / 썸네일 / 네비를 지원합니다. 4. 배경색상외 여러 색상들을 지정할 수 있습니다. 5. 타이틀 / 내용 / 각종 옵션등을 지정 가능합니다. 6. 카테고리 출력도 가능합니다. 7. 원본 코드의 테마 색상이 Red에 맞추어져 있어서 기본 색상은 Red입니다. 8. 완벽한 반응형 지원과 모바일에서 스와프기능도 지원합니다. 9. 두종류의 스킨 지원 - Default Skin, All Pictures Skin All Pictures Skin은 게시물안의 모든 이미지들을 불러올 수 있으며 ...

More →

Mh Owl Slide V1.0

Mh Multi Widget V1.6 [2023.04.05] - Sale 제품(₩9,000)

메뉴얼 [ V 1.6 업데이트 내용 ] • 댓글 많은순으로 정렬. https://xetown.com/questions/1394764#comment_1395175 • 예약발행 모듈에 대응 https://xetown.com/download/1721679#comment_1722728 [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V 1.5 업데이트 내용 ] •FirstThumb 스킨 추가 스케치북 게시판 스킨 V 2.1 에 추가된 "첫 게시글만 썸네일 출력 ...

More →

Mh Multi Widget V1.6 ...

Mh Author 위젯 V1.5 (2024.01.10)

V 1.5 수정내용(2024.01.13) 1. 베너스킨 바로가기 확장변수 미작성시 문제 해결 2. 유튜브스킨 추가 - 확장변수 사용자정의 (기본 : transfer) : 위젯상에서 유튜브 재생 가능 합니다만 사이트가 약간 느려집니다. V 1.4.1 수정내용(2021.08.28) - default스킨과 Book스킨을 동시에 출력시 제목글이 좌측으로 밀리는 문제해결 V 1.4 수정내용(2021.02.12) SketchBook5 게시판스킨 - 문하우스 수정버전 V1.8.1 북 갤러리 형태 게시판에 맞추어 "Book 갤러리"스킨 추가 - Book 갤러리형식 게시판의 확장변수를 그대로 가져옵니다 - new, bes...

More →

Mh Author 위젯 V1.5 (...

Mh Sideways Layout

[특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌우에 마우스 Hover시 자동으로 슬라이딩 됩니다. •좌측 삼선 햄버거 메뉴형식 / 페밀리 사이트 / 자체 로그인 지원합니다. •카카오 지도를 지원합니다 - 카카오톡 앱키 입력 필수 •본문 아래에 각 섹션 바로가기 아이콘을 지원합니다. •완벽한 반응형으로 작동합니다. •메세지 보내기(Contact Us)를 적용할려면 contactfree.zip 위젯을 설치하면 됩니다. •갤러리 섹션은 Lightbox 전용 Hover 위젯 을 사용했습니다.

More →

Mh Sideways Layout

Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품(₩19,000)

[ V2.2 특징 ] •Colorbox Skin 추가 - 첫화면에 박스출력 - Auto Slide 지원 •본문 메뉴(GNB)를 상단 가로 형태에서 좌측 삼선 햄버거 형태로 변경 •배경이미지 슬라이드 로딩 기능을 적용 Demo - https://moonhouse.co.kr/cb [ V2.0 LightBox Skin 특징 ] •LightBox Skin 추가 -- 지연님 요청 •Default Skin은 이미지를 전체화면 Fullscreen 으로 출력되는 반면 LightBox Skin은 이미지의 원본 크기로 출력됩니다. Demo - https://moonhouse.co.kr/lb [특징] •레이아웃과 위젯의 콜라보로 이루어진 전체화면 갤러리 스킨입니다. •레이아웃...

More →

Mh Gallery Layout &am...

Widgets Of MoonHouse

Data Of MoonHouse

Prev 5 6 7 8 9 Next

Layouts Of MoonHouse

    • Mh Sideways Layout
    • [특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌...
    • 2022.05.16
    • 문하우스 Simple 레이아웃 V 1.4 (2020.12.13 Up)
    • V1.4 수정내용(2020.12.13) 1. 코드정리 2. 자체 로그인 탑재 V1.3.1 수정내용 1. 심플레이아웃과...
    • 2015.05.18
    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.1
    • [ V1.1 특징 ] 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 ...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.2
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26

XE Of MoonHouse

게시판으로 간단한 거래장부 만들기 스케치북 게시판에 카카오지도 출력 V1.2 예전에 Tip으로 올렸던 2개의 내용을 합쳐서 하나의 게시판스킨으로 만들어 보았습니다. 기본 코드는 스케치북 게시판 스킨을 그대로 가져 왔습니다. [ V1.2 수정 ] • "게시판 목록에서 확장변수 바로 수정 애드온" 을 게시판과 모바일에 적용 원 게시글 : https://xetown.com/download/1666779 Tip 게시글 : https://moonhouse.co.kr/xetip/553814 • 게시목록 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정 하는 기능 추가 https://moonhouse.co.kr/xetip/554284 [ V1.1 수정 ] • 지도출력 사용시 php상위버전(7.2이상) 에서 지도화면 일부만 출력되는 문제 해결 기능은 거래장부에 확장변수로 주소 입력시 지도가 출력되는 게시판입니다. 자세한 기능 내용들은 두개의 Tip을 읽어 보시면 됩니다. 1. 받으신 파일의 압축을 풀어서 /modules/board/skins/mh_books 설치를 합니다. 2. "Mh 거래장" 스킨으로 게시판을 생성 합니다. 3. 확장변수에 자신이 원하는 항묵들을 추가합니다. 4. 지도를 출력하기위해서는 "카카오톡 앱키 입력"이 필수 입니다. https://developers.kakao.com 접속해서 받으시면 됩니다. 다양하게 활용할 수 있으므로 받아놓으시면 좋습니다. 5. "스킨 설정"을 자신이 원하는 형태로 설정합니다. 6. 본문 작성시 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣으시면 편합니다. http://tablesgenerator.com/html_tables 7. 목록형태 8. 본문 내용 10. 모바일 11. 위젯출력 - Mh_multi 위젯
- V 1.2 UP [2021.01.22] 1. 각각의 색상 지정 2. 시각을 "분전" "시간전" "일전"으로 세분화 3. 코드정리 MH카멜레온댓글위젯에 문하우스 대문페이지의 최근댓글에 적용된 최근댓글에 new아이콘 붙이고, 시간대별로 내용글칼라를 변환시키는 소스를 추가해서 MH카멜레온위젯을 업그레이드합니다. mh_comment.zip를 다운받아서 압축을 풀고 mh_comment폴더를 widgets폴더안에 업로드합니다. 기존의 MH카멜레온댓글위젯을 사용중이시라면 덮어 씌우기 하시면 됩니다. 만약 수정을 하실려면 list.html파일을 편집기로 열어서 23줄부터 수정을 하시면 됩니다. <!--@if($val->getRegdate("YmdH")>date('YmdH',strtotime("-24hours")))--> <!--@if($widget_info->display_regdate == 'Y')--> <span class="date" style="color:#ff6600">{zdate($val->regdate, "m-d")}</span> <!--@end--> <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:#ff6600">{$val->getSummary($widget_info->commant_count)}<img src="images/new.gif" border="0"></a> <!--@elseif($val->getRegdate("YmdH")>date('YmdH', strtotime("-48hours")))--> <!--@if($widget_info->display_regdate == 'Y')--> <span class="date" style="color:#009900">{zdate($val->regdate, "m-d")}</span> <!--@end--> <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:#009900">{$val->getSummary($widget_info->commant_count)}</a> <!--@else--> <!--@if($widget_info->display_regdate == 'Y')--> <span class="date" style="color:#808080">{zdate($val->regdate, "m-d")}</span> <!--@end--> <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:#808080">{$val->getSummary($widget_info->commant_count)}</a> <!--@end-->
Prev 6 7 8 Next
기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다. 만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문이네요 @.@ 말풍선 애드온 0.1 pr_tooltip_v0.1.zip 애드온을 적용 한다음 말풍선이 필요한곳에 pr_tooltip 클래스를 추가해 주시면 해당 태그에 마우스를 가져가면 말풍선을 띄워주는 애드온 입니다. 추가로 지정 가능한 속성은 아래와 같습니다. pr_uid : 애드온에서 관리하기위해 부여하는 번호입니다. 영문, 숫자, 하이픈, 언더바로만 구성할 수 있습니다. pr_color : 말풍선의 색을 지정합니다. pr_position : 말풍선의 위치를 지정합니다. title : 말풍선에 띄울 글을 지정합니다. 사용 가능한 색상 코드는 아래와 같습니다. 색상은 bootstrap에서 따왔습니다. 태그에 pr_color="primary" 이런식으로 사용하시면 됩니다. 사용가능한 말풍선 위치 지정 코드는 아래와 같습니다. 말풍선을 우상단에 띄우고 싶다면 pr_position="t_right" 로 적어 주시면 됩니다. 이 애드온의 사용법은 크게 두가지로 나눌 수 있습니다. 1. 직접 코딩 아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 title, pr_color, pr_position을 지정 합니다. 마우스를 가져가면 Point History라고 적힌 노란 말풍선이 상단 중앙에 뜨게 됩니다. 2. 애드온에서 관리 아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 pr_uid만 지정을 합니다. 이상태에서는 마우스를 가져가도 말풍선은이 뜨지안습니다. 애드온 설정화면에서 위에 지정한 pr_uid번호인 info-001의 옵션값들을 지정 후 저장합니다. 이후부터는 해당 태그에 마우스를 가져가면 말풍선이 뜨게 됩니다. 우선순위 태그에 모든 속성을 지정하고 pr_uid까지 지정했어도 해당 uid에대한 설정값이 애드온에 있다면 애드온에 설정한값이 우선합니다. 아래처럼 pr_uid가 001로 지정하고 모든 속성을 코딩했어도 애드온 설정에 001의 설정값이 있다면 기존 코딩은 무시되고 애드온 설정값으로 변경되어 출력됩니다. 위의 애드온 설정창의 uid: 002의 경우처럼 title만 지정된 경우는 다른 값은 코딩값대로 유지되며 title만 변경되어 출력합니다. [문하우스의 적용팁] https://moonhouse.co.kr/423318 p.s 색상을 알아보기 쉽게 blue, orange, red 같이 쉽게 적용한 파일 올립니다. 문하우스 프로그램들은 수정한 파일로 적용됩니다. pr_tooltip.zip
업데이트 1.2.6 - php 5.3.x 이하 버전과 호환성 해결 1.2.5 - default 스킨에서 애드온 출력 요소들의 margin과 padding 값을 기본 0으로 할당 (웹지기님 제안) 1.2.4 - ajax 적용 후 스크롤탑 이동시 특정 요소로 위치 지정 가능 (Artistudy님 제안) 1.2.4에선 ajax 호출 후 (무조건 페이지 최상단으로 가게 하지 않고) 어떤 요소로 가게 할지 애드온 사용자가 직접 입력하게 했습니다(.rd, #cmtPosition 등). 최상단으로 가게 하려면 'AJAX 쪽 이동 후 위치'에 body를 입력하면 됩니다. 1.2.3 - ajax 적용시 스크롤탑 이동 여부 옵션 처리 (스트렌져님 제안) 1.2.2 - ajax 처리 후 페이지 최상단으로 이동하게끔 수정 (Artistudy님 제안) 1.2.1 - 본문 내비 버튼이 본문에 고정되지 않던 문제(를 아예 내비 버튼용 파일을 따로 만들고 별도로 불러오도록 함으로써) 수정 - 이제 안정화 버전이라 생각하고 당분간 자중하겠습니다ㅠ 1.2 - 에디터 컴포넌트 요소가 구현되지 않던 문제 해결 : (예시) 멀티미디어 컨텐츠 - http://bit.ly/2wawyvD : (예시) 설문조사 - http://bit.ly/2vaLpsN - 본문 내비 버튼을 js가 아니라 css로 불러옴으로써, 본문보다 늦게 로딩되던 문제 수정 1.1 - AJAX 옵션 사용시, 실행되지 않던 다른 애드온의 js파일을 재실행하도록 함 개요 - 게시판 본문에 임의의 문자열을 넣어 본문 내용을 쪽 단위로 나눠볼 수 있게 해주는 애드온입니다. - 매뉴얼, 보고서, 논문 같이 분량이 긴 문서는 물론, 카드뉴스나 컷툰 같은 콘텐츠 구현에도 적합합니다. - AJAX 옵션을 사용하면, 전체 페이지 새로고침 없이 쪽 이동을 하기도 합니다. 미리보기 - http://bit.ly/2v1HmyR 기본 기능 - 페이지 브레이커 : 임의의 문자열을 지정하면, 해당 문자열을 기준으로 쪽 나누기가 실행됩니다. 본문에 해당 문자열이 포함되어 있지 않으면 애드온 실행이 중지됩니다. - 페이지 링크 개수 : 페이지네이션에서 보여줄 링크의 개수를 설정할 수 있습니다. 게시판 모듈에서 사용하는 page_count와 비슷한 기능을 수행합니다. - 페이지네이션 스킨 : 기본 제공되는 default 스킨 외에, 사용자가 스킨을 만들면 사이트 특성에 맞는 효과적인 콘텐츠 관리가 가능합니다. (예. 콘텐츠 슬라이더, 페이지네이션 스타일링 등) Default 스킨 설정 - AJAX 옵션 : ajax 처리를 지원합니다. 단, ajax 옵션을 사용하면, 본문만 새로 읽어들이기 때문에, 다른 애드온과 충돌의 여지가 있으며 사이트 광고 수익에도 영향을 줄 수 있습니다. - 본문 내비 버튼 : 이 기능을 사용하면 본문 중앙 양 끝으로 쪽 이동(prev, next) 버튼이 삽입됩니다. 이 기능을 사용하지 않으면 쪽 이동 버튼은 본문과 페이지네이션 사이에 위치하게 됩니다. [실현화면] [편집화면]
문하우스 Tip 1) 0.3 업데이트 (2017-09-19) 개요 각주 스타일링 작업을 완료(?)했습니다. 몇몇 부분에서 호환성 테스트는 아직 끝나지 않았습니다. 가령 다음과 같은 문제가 있을 수 있습니다. : XE에서 관리자 외에는 각주 입력을 못할 수 있습니다. : 크롬 외의 브라우저, 특히 MS 엣지에서는 각주 편집 수행과정에서 높은 확률로 에러가 동반될 수 있습니다. : CKEditor 스킨 외에서는 각주 컴포넌트와 애드온 사용을 권장하지 않습니다. 업데이트 사항 각주 내용에서 각주 마커로 이동 링크 장착 (오징님) 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)★ 해시 링크 이동시 이동 속도 설정 추가 각주 번호 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)★ 각주 해시 링크 이동시 링크 타겟에 하이라이트 효과 자동링크 애드온에 대비하여, 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님) 향후 업데이트 계획 크롬에서 드래그 후 삭제 시 reorder가 되지 않는 문제 엣지와의 호환성 문제 (간장게장님) XE와의 호환성 문제 정리 (간장게장님) CK에디터 외 다른 웹에디터와 호환성 문제 모바일 UI 개선 또는 별도 구성 XE용 removeHackTag 수정 매뉴얼 작성 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님) 말풍선 미리보기에서 말줄임표 (웹지기님) 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠) 0.2 업데이트 (2017-09-17) 기능 향상 각주 입력창에서 CK에디터 4.7.3 버전을 CDN을 통해 불러오게 됩니다. 각주 아이콘을 교체했습니다. (VJT님, 휴리파파님) 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 직접 지정할 수 있습니다. (웹지기님) ... 각주 컴포넌트 설정에서 할 수 있습니다. 각주 창 팝업 후 커서가 에디터 안으로 자동 포커스됩니다. (socialskyo님) 각주 내용 섹션 아래로 커서 이동이 가능하게끔, 각주 생성 후에는 맨 아래에 <p>&nbsp;</p>를 추가하게 됩니다. (socialskyo님) 댓글단에서는 각주 컴포넌트 작동을 금지합니다. (웹지기님) ... 각주 편집 애드온이 활성화돼야만 댓글에서 각주 컴포넌트 버튼의 출력을 막을 수 있습니다. 버그 수정 새로운 글쓰기 상황에서 각주 편집 애드온이 동작하지 않는 문제를 해결했습니다. IE에서 각주번호가 포함되지 않은 영역을 복사하거나 잘라낼 때 동작하지 않던 문제를 해결했습니다. 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화된 문제를 해결했습니다. 본문에서 각주 번호가 모두 사라질 때 각주 내용 섹션도 제거하게 됩니다. 반면 각주 내용 섹션이 없을 때 각주 붙여넣기가 시도되는 경우에는 각주 내용 섹션도 되살아나게 됩니다. 각주 입력 및 붙여넣기 후 커서가 각주 번호 안으로 위치하던 문제를 해결했습니다. 각주 번호 끝에 공백 문자를 첨가함으로써 새로 생성된 sup 태그에 문서 편집이 영향을 받지 않을 수 있도록 했습니다. 개요 각주 에디터 컴포넌트와 별책부록 편집용 애드온을 첨부해봅니다. 현재 업로드하는 버전은 베타테스트용입니다. 컴포넌트 파일은 각주 입력과 수정, 애드온 파일은 각주 복사-잘라내기-붙여넣기-삭제 기능을 담당합니다. 컴포넌트 파일은 필수이며, 애드온 설치를 하지 않으시면, 위의 편집기능을 수동으로 하셔야 하며, 본문에서 스타일링된 디스플레이를 구현할 수 없습니다. 2. 권장 환경 라이믹스 + 크롬60 / IE11 + CKEditor 위 환경이 아니라면 편집용 애드온이 오작동을 일으킬 수 있습니다. 3. 사용방법 따로 말씀 안 드려도 아시리라 믿습니다. 에디터에서 아래 그림의 아이콘을 클릭하고 입력하면 됩니다 4. 덧붙이는 말 개발 현황은 링크에서 확인할 수 있습니다. http://bit.ly/2etMIwY 각주 각주의 preview 영역의 가로크기 조절은 /modules/editor/components/ap_footnote/common/ap_footnote.js 파일안에 106줄 obj.css('width', 300); 숫자부분을 알맞게 조정하시면 됩니다.
Prev 6 7 8 Next
비회원 댓글 작성이 가능한 게시판에서 원글 작성자가 댓글을 남길 경우 댓글 닉네임옆에 (글쓴이)라고 표시를 하려고 합니다. 공개된 팁을 댓글 관련 페이지 댓글 닉네임을 표시하는 부분에서 아래 소스 코드를 적용했습니다. <div class="ed comment-content"> <div> <div class="ed flex flex-middle margin-bottom-xxsmall"> <div class="ed inline-flex flex-middle margin-right-small"> <h6 class="ed text-bold text-row-medium margin-right-xsmall margin-bottom-remove<!--@if(($comment->member_srl != 0 && ($comment->member_srl == $oDocument->variables[member_srl] || ($comment->member_srl * -1) == $oDocument->variables[member_srl])) || ($comment->member_srl == 0 && $comment->getIpaddress() == $oDocument->get('ipaddress')))--> text-primary<!--@end-->"> <a class="ed link-reset" cond="!$comment->member_srl && $comment->homepage" href="{$comment->getHomepageUrl()}" target="_blank">{$comment->getNickName()}</a> <span cond="!$comment->member_srl && !$comment->homepage">{$comment->getNickName()}</span> <a cond="$comment->member_srl" href="#popup_menu_area" class="ed link-reset member_{$comment->member_srl}" onclick="return false">{$comment->getNickName()}</a> <!--// 댓글 작성자가 글 작성자인 경우 표시--> <!--@if(($comment->member_srl != 0 && ($comment->member_srl == $oDocument->variables[member_srl] || ($comment->member_srl * -1) == $oDocument->variables[member_srl])) || ($comment->member_srl == 0 && $comment->getIpaddress() == $oDocument->get('ipaddress')))--> <span style="font-weight: normal;">( 글쓴이 )</span> <!--@end--> 정상적으로 잘 작동 ( 글작성자가 댓글을 남길경우 닉네임옆에 (글쓴이 )표시 )이 되는데요. 한가지 비회원이 댓글을 남길경우 해당 글작성자가 아님에도 불구하고 댓글 닉네임옆에 (글쓴이)가 표시되는 문제가 있습니다. 여러가지 시도를 해봤는데 해결이 안되는데요. 혹시 도움 좀 받을 수 있을까요? [답변] https://xetown.com/questions/1669674#comment_1669797 <!--// 댓글 작성자가 원글 작성자인 경우 표시--> <!--@if( abs($oDocument->get('member_srl')) >0 || abs($comment->member_srl ) > 0 )--> <!--@if( abs($comment->get('member_srl')) === abs($oDocument->get('member_srl')) )--> <span style="margin-left:10px; padding:2px 3px; border-radius:3px; color:#fff; background:#ff6600; font-size:11px">질문자</span> <!--@end--> <!--@else--> <!--@if( ($comment->getIpaddress() == $oDocument->get('ipaddress') ))--> <span style="margin-left:10px; padding:2px 3px; border-radius:3px; color:#fff; background:#ff6600; font-size:11px">질문자</span> <!--@end--> <!--@end-->
앞선 팁에서 table을 div로 wrap해서 화면사이즈에 반응성을 높여주는 디자인을 소개했는데요. 사실 table을 스와이핑 또는 수평 스크롤하더라도 모바일 세로 화면에 컬럼 수(열)가 많다면 자신이 어떤 내용을 보고 있는지 파악하기 어려울 때가 많습니다. 그럴 때 '제목'과 특정열을 고정시켜주면 이용자들의 테이블 내용 파악에 큰 도움을 줄 수 있습니다. 크게 두 가지 방법이 있습니다. 1) 해당 열(컬럼)의 position을 absolute, fixed 등을 지정해주고 그에 대응해 js로 스크롤 이벤트를 걸어주기. 다만 절차가 좀 복잡합니다. 2) 해당 열(컬럼)의 position을 sticky로 걸어주기. 매우매우 간단합니다!! 테이블형 게시판 스킨을 기준으로 예시해보겠습니다. 1. 목록 파일 html 수정 - 우선 앞선 팁에서처럼 수평스크롤이 작동할 수 있게 table 코드 위 아래로 div로 wrapping을 해줘야겠죠? 이에 대해서는 앞선 팁을 참고해주세요 :) - 그리고 고정시킬 열을 식별할 수 있도록 클래스 속성을 붙여줍니다. 사용자정의의 확장변수 일련번호(idx)가 3번이고 변수명(eid)은 name이라고 가정해보겠습니다. 그러면 아래처럼 th 태그와 td 태그를 수정해주시면 됩니다. - 테이블 헤더 부분 <th scope="col" cond="$val->idx != -1" class="fixed"|cond="$val->idx==3"><span><a href="{getUrl('sort_index', $val->eid, 'order_type', $order_type)}" rel="nofollow">{$val->name}</a></span></th> - 테이블 바디 부분 (공지사항도 동일합니다^^) <td cond="$val->idx != -1" class="fixed"|cond="$val->idx==3">{$document->getExtraValueHTML($val->idx)|noescape}&nbsp;</td> => 이렇게 하면 고정시킬 테이블 열에 fixed라는 클래스가 붙게 됩니다. => 위에는 일련번호를 기준으로 한 것이구요. 번호(idx)가 아니라 변수명(eid)에 따라 클래스명을 붙여주고 싶다면 class="fixed"|cond="$val->idx==3 대시 class="fixed"|cond="$val->eid === 'name'" 이라고 하면 됩니다. ... 아울러 사용자정의가 아니라 기본 변수(제목, 등록일 등)에 클래스 값을 줄 수도 있을 텐데 어렵지 않게 하실 수 있을 거라 봅니다. 2. css 수정 - 이제 fixed에 적용할 스타일을 첨가해야겠습니다. - 다음과 같이 적용하겠습니다. .board_list th.fixed, .board_list td.fixed { position: sticky; left: 0; z-index: 1; background-color: #f6f6f6; } - left값과 z-index값은 위의 값을 기준으로 각자 사정에 맞게 조절하시면 될 겁니다. - background-color는 테이블 배경색이 지정되어 있는데 th나 td의 색상이 투명일 경우에 대비해서 지정해놓은 것입니다. 스크롤 이동에 따라 투명 배경의 th나 td 요소가 고정되어 있다면 그 아래로 다른 th나 td가 겹쳐서 보일 수가 있거든요. 이 점도 참고해보시면 좋을 겁니다. . 3. 결과 - 이렇게 하면 대략 다음과 같은 모양새가 나오게 됩니다 ;) 어때요? 참 쉽죠? [문하우스 Tip] /modules/board/skins/sketchbook5/skin.xml <var name="sticky_select" type="radio"> <title xml:lang="ko">목록(거래장형) 게시판 좌우 스크롤 기능 고정칸 선택</title> <description xml:lang="ko"> 게시목록의 항목이 많아서 좌우 수평 스크롤, 스와이프 기능적용시 고정칸을 선택하는 방법 * https://xetown.com/tips/1183430 </description> <options value=""> <title xml:lang="ko">적용안함(기본)</title> </options> <options value="e"> <title xml:lang="ko">확장변수</title> </options> <options value="t"> <title xml:lang="ko">제목</title> </options> </var> <var name="sticky" type="text"> <title xml:lang="ko"> ┖ 확장 변수 선택시 고정칸 적용 확장 변수 ID</title> <description xml:lang="ko">게시목록 좌우 수평 스크롤, 스와이프 설정시 고정 변수 ID</description> </var> <var name="sticky_bcolor" type="text"> <title xml:lang="ko"> ┖ 고정칸 배경색상</title> <description xml:lang="ko">고정 확장변수칸 배경색상을 지정.(기본 #fff)</description> </var> /modules/board/skins/sketchbook5/_list_normal.html 에서 상위 설명 class="fixed"|cond="$val->idx==3" 부분을 아래 빨간색으로 수정 - 총3군데 확장변수 부분 <!--@if($mi->sticky_select == 'e')--> class="fixed"|cond="$val->eid == $mi->sticky" <!--@end-- 제목컬럼을 고정칸으로 적용하는 방법은 아래와 같이 수정하면 됩니다. class="title" // 부분들을 찾아서 - 총 3군데 class="title <!--@if($mi->sticky_select == 't')-->t_fixed<!--@end-->" <style> .board_list th.fixed, .board_list td.fixed, .board_list th.t_fixed, .board_list td.t_fixed { background-color:{$mi->sticky_bcolor}; } .board_list th.t_fixed, .board_list td.t_fixed, .board_list th.fixed, .board_list td.fixed { position: sticky; left: 0; z-index: 1; background-color:#fff; } </style> 다른 항목으로 바꾸어도 되겠죠(이름, 날짜등)
XeTown에서 윤삼님이 만드신 게시판 목록에서 카테고리/확장변수 바로 수정 애드온 좀더 자세한 설정 방법과 SketchBook5 게시판스킨 - 문하우스 수정버전 에 적용하는 방법입니다. 1. https://xetown.com/download/1666779 에 접속해서 해당 에드온을 다운로드후 페이지 설명대로 합니다. 2. /modules/board/skins/sketchbook5_MH/skin.xml 파일에 추가 <var name="eid_up1" type="text"> <title xml:lang="ko">게시판수정 확장 변수 ID One</title> <description xml:lang="ko">게시판목록에서 확장변수를 직접 수정할수 있는 확장변수의 ID를 작성(기본 update)</description> </var> <var name="eid_up2" type="text"> <title xml:lang="ko">게시판수정 확장 변수 ID Two</title> <description xml:lang="ko">게시판목록에서 확장변수를 직접 수정할수 있는 확장변수의 ID를 작성(기본 update1)</description> </var> 3. /modules/board/skins/sketchbook5_MH/_list_normal.html 파일에서 빨간색 부분 추가 - Notice(공지), Normal(게시글) 2군데 <td cond="$val->idx!=-1" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$val->idx})"|cond="$grant->manager && in_array($val->eid, array($mi->eid_up1, $mi->eid_up2))" class="<!--@if($val->eid=='link_url')-->link_url<!--@else-->m_no<!--@end-->"> 4. 게시판설정 > 확장변수에서 수정할 확장변수를 생성합니다. 기존의 것을 수정해도 됩니다. 5. 게시판설정 > 스킨설정에서 수정할 "확장변수 ID"를 에드온에서 작성한 eid중에서 작성합니다. 6. 게시판설정 > 게시판정보 > 목록설정 에서 해당 확장변수를 추가합니다. 7. 게시판목록에서 주문확인란을 클릭하면 확장변수를 수정할 수 있는 팝업창이 출력됩니다. 획장변수를 사용해서 선택전,후 / 날짜변경등의 기능으로 멋진 애드온이 만들어진 것 같습니다. 이런 멋진 작품을 무료로 배포해 주신 윤삼님에게 감사드립니다. 8. V 0.1.3 에서는 카테고리 입력 부분도 수정할 수가 있습니다. /modules/board/skins/sketchbook5_MH/_list_normal.html 파일에서 빨간색 부분 추가 - Notice(공지), Normal(게시글) 2군데 <td cond="!$mi->show_cate && $mi->use_category=='Y'" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$document->get('category_srl')}, 'category')"|cond="$grant->manager && $use_category_update" class="cate" style="color:{$category_list[$document->get('category_srl')]->color}"|cond="$category_list[$document->get('category_srl')]->color!='transparent'"><strong>{$category_list[$document->get('category_srl')]->title}</strong></td> [ SketchBook5 게시판스킨 - 문하우스 수정버전 1.9.3 에서 확장변수 바로 수정 애드온 모바일에 적용하는 방법} 1. 위의 내용대로 준비 합니다. 2. 게시판설정 > 스킨설정 > 목록 유형을 "거래장형"으로 선택하면 됩니다. 목록형에서도 작동되게끔 수정 - 2022. 03. 21 3. 확장변수 전체를 출력할려면 게시판설정 > 스킨설정 > 웹진형 설정 (*표시 : '모바일(목록)형'과 공통) > "확장변수 출력(*)" 을 출력으로 선택하면 됩니다. 4. 스마트폰에 적용한 화면 5. 스케치북 모바일 스킨 수정방법 /modules/board/skins/sketchbook5_MH/_list_m.html 파일 하단 아래 부분 삭제 <a class="hx" <!--@if(!$mi->link_board)-->href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}"<!--@else-->href="{$document->getExtraEidValue('link_url')}" target="_blank"<!--@end--> data-viewer="{getUrl('document_srl',$document->document_srl,'listStyle','viewer','page','')}"><span class="blind">Read More</span></a> 빨간색 추가 수정 <!--// 일반 목록 --> <li loop="$document_list=>$no,$document" class="<!--@if($document_srl==$document->document_srl)-->select <!--@end-->clear"> <!--// 썸네일 영역 --> <div class="rt_area<!--@if($mi->list_m_tmb && $document->thumbnailExists())--> is_tmb<!--@end-->" style="text-decoration:none" onclick="location.href='{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}';"> <div cond="$mi->list_m_tmb" class="tmb_wrp"> <!--// 썸네일 --> ~ 생략~ 삭제한 부분에 추가 ~ 생략~ </div> </div> <!--// 모바일 확장변수 && 분류 --> <div style="margin-top:10px; line-height:30px"> <block loop="$list_config=>$key,$val" cond="$val->idx!=-1" > <span onclick="showUpdateExtraModal(this, {$document->document_srl}, {$val->idx})"|cond="$grant->manager && in_array($val->eid, array($mi->eid_up1, $mi->eid_up2))" style="margin-right:10px"> <!--@if($val->eid==$mi->eid_up1)--> {$val->name} : <b>{$document->getExtraValueHTML($val->idx)}</b> <!--@end--> <!--@if($val->eid==$mi->eid_up2)--> {$val->name} : <b>{$document->getExtraValueHTML($val->idx)}</b> <!--@end--> </span> </block> <span cond="$mi->use_category=='Y' && $document->get('category_srl')" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$document->get('category_srl')}, 'category')"|cond="$grant->manager && $use_category_update"> <span>분류 : </span><b>{$category_list[$document->get('category_srl')]->title}</b> </span> </div> p.s SketchBook5 게시판스킨 - 문하우스 수정버전 1.9.3 버전에는 수정부분 기본으로 포함 되어져 있습니다. • 확장변수 바로 수정 애드온 mh스킨 /addons/ap_extra_update/skins/mh.zip
예전 XE 버전에서는 많은 레이아웃들에 언어를 선택할 수 있는 메뉴들이 있었는데 최근 라이믹스로 넘어오면서 이 기능이 거의 없어져 버렸습니다. 요번에 다국어 사이트 작업을 하면서 꼭 필요한 기능이라서 작업후 방법을 남깁니다. 먼저 사용중인 레이아웃의 layout.html 파일을 열어서 최상단에 아래의 코드들을 적용하면 됩니다. * 레이아웃스킨/layout.html <!--언어및 국기선택--> <block cond="$li->lang_Use =='Y' && !Mobile::isMobileCheckByAgent()"><include target="language.html" /></block> *레이아웃스킨/conf/info.xml <var name="lang_Use" type="select"> <title xml:lang="ko">★ 상단 언어영역 출력</title> <description xml:lang="ko">상단에 언어영역 출력</description> <options value=""> <title xml:lang="ko">출력 안함</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="lang_Flag" type="select"> <title xml:lang="ko"> ┖ 언어영역 국기출력</title> <description xml:lang="ko">상단에 언어영역에 각 국기 출력</description> <options value=""> <title xml:lang="ko">출력 안함</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="account_colorset" type="select"> <title xml:lang="ko"> ┖ 언어영역 컬러셋</title> <description xml:lang="ko">원하시는 배경 컬러셋을 선택해주세요.</description> <options value="a_white"> <title xml:lang="ko">흰색바탕</title> </options> <options value="a_black"> <title xml:lang="ko">검정바탕</title> </options> </var> *레이아웃스킨/language.html <load target="css/account.css" /> <load cond="$li->account_colorset=='a_white'" target="css/a_white.css" /> <load cond="$li->account_colorset=='a_black'" target="css/a_black.css" /> <ul class="account"> <li class="language"> <!-- class="language" | class="language open" --> <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em> <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button> <ul class="languageList"> <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val} {$lang_type} </span></button></li> <!--@end--><!--@end--> </ul> </li> <!--@if($li->lang_Flag == "Y")--> <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> <a href="#" onclick="doChangeLangType('{$key}');return false;"><img src="img/flag/flag.{$key}.gif" width="20px" height="11px" style="margin-top:-15px"></a> <!--@end--><!--@end--> <!--@end--> </ul> * 첨부파일안 내용물 a_black.css / a_white.css / account.css 3개의 css파일 국기이미지 img/flag language.html Language.zip 첨부파일을 다운 받아서 레이아웃스킨 폴더에 덮어 씌우면 됩니다.
글 작성 시나 수정 시 특정 확장 변수를 관리자만 보이고 수정할 수 있게 하는 방법입니다. [sketchbook5 게시판을 기준] /modules/board/skins/sketchbook5/write_form.html 아래 부분을 <table cond="count($extra_keys)" class="et_vars exForm bd_tb"> <caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption> <tr loop="$extra_keys=>$key,$val"> <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td>{$val->getFormHTML()}</td> </tr> </table> 아래와 같이 수정하면 됩니다. <table cond="count($extra_keys)" class="et_vars exForm bd_tb"> <caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption> <tr loop="$extra_keys=>$key,$val"> <!--// admin_select 로 확장변수ID 생성시 관리자에게만 출력 --> <!--@if($val->eid!=='admin_select')--> <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td>{$val->getFormHTML()}</td> <!--@else--> <!--@if($grant->is_admin && $val->eid=='admin_select')--> <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td>{$val->getFormHTML()}</td> <!--@end--> <!--@end--> </tr> </table> 확장 변수ID를 admin_select로 해야 합니다. 빨간테두리 부분은 글작성시나 수정시 관리자만 보입니다. [ 다른 간단한 방법 ] - 똑띠님이 남기신 간단한 방법 write_form.html 파일에서 빨간색 부분만 추가하고 _secret 로 끝나는 확장변수 ID를 작성하면 됩니다. <!--// 확장변수명이 _secret로 끝날때 숨김처리 하기(관리자는 예외) --> {@$match = preg_match('/_secret$/is', $val->eid)} <!--@if($match != 1 || $grant->is_admin)--> <th cond="" scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td cond="$val->eid!==$mi->etc_name">{$val->getFormHTML()}</td> <!--@end-->
Prev 6 7 8 Next