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

    MH Before V1.1 위젯
    Mh BigSlider V2.1 위젯 - 20...
    Mh Portfolio V1.0
    Mh Owl Slide V1.0
    Mh Author 위젯 V1.5 (2024.0...
    Mh Width Hover Slide 위젯 V...

Data Of MoonHouse

로고에 플래시파일 사용하기
먼저 레이아웃설정에서 로그이미지에 플래시파일을 넣는 것은 아닙니다. 먼저 플래시파일을 로고로 사용할 레이아웃에서 편집을 누룹니다. <div id="header"> <h1...
2007.09.26
달력 플래시파일
왼쪽 메뉴에 달력으로 사용될 수 있는 달력, 시계겸용입니다. cal.swf <!-- 달력 --> <embed src=http://도메인/경로/cal.swf style="width: 200px; height: 160p...
2007.09.14
플래시파일 익스에서 테두리 나오지 않게 하기
자신이 사용중인 레이아웃을 찾아가서 /zbxe/layouts/xe_official/js/xe_official.js 를 편집기로 열어서 상단에 아래의 소스를 넣어주면 테두리 보이지 않습니다...
2007.09.14

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

My Xe
Xpressengine of Moonhouse
2007.09.26 Tip 로고에 플래시파일 사용하기 5 12314 1
먼저 레이아웃설정에서 로그이미지에 플래시파일을 넣는 것은 아닙니다. 먼저 플래시파일을 로고로 사용할 레이아웃에서 편집을 누룹니다. <div id="header"> <h1> <a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="/jcas/images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a> </h1> 빨간색 부분을 아래와 같이 바꾸면 됩니다. <div id="header"> <h1> <script type="text/javascript">displayMultimedia("/img/logo.swf", "100","30",false);</script> </h1> 여기서 /img/logo.swf 의 경로는 자신이 플래시파일을 저장한 경로와 파일명을 적으시면 됩니다. 참고로 /img/logo.swf는 루트에 img란 방을 만들어서 logo.swf란 파일을 ftp로 먼저 업해 놓은 것입니다.
　┖ layout 에서 위 소스로 바꾸었지만 아직 XE 로그가 그대로 나오는데.... 레이아웃 설정...알라뷰
　┖ 늦게 봤네요.^.^ 죄송 위에 설명한 것을 따라해 보세요. 만약 변경이 되지 않으면 레이...팔공산
　┖ 소스제공 정말고맙습니다. 헌데 화면붙여넣기가 안돼서 일일이 소스를 베껴쓸려고 하니...물사랑
　┖ 죄송합니다. 몰랐네요. 초창기에 시험삼아 우측마우스 금지 소스 넣어 놓은걸 지우지 ...팔공산
　┖ <div id="header"> 부분전체를 찾으신후아래것으로 치환하세요 <div id="header"> <h1>...물사랑
2007.09.14 기타 달력 플래시파일 file 1 9960
왼쪽 메뉴에 달력으로 사용될 수 있는 달력, 시계겸용입니다. cal.swf <!-- 달력 --> <embed src=http://도메인/경로/cal.swf style="width: 200px; height: 160px;">
　┖ 이것도 잘 됩니다.미소엘프
2007.09.14 Tip 플래시파일 익스에서 테두리 나오지 않게 하기 file 3 11801
자신이 사용중인 레이아웃을 찾아가서 /zbxe/layouts/xe_official/js/xe_official.js 를 편집기로 열어서 상단에 아래의 소스를 넣어주면 테두리 보이지 않습니다. ////////////////////////////////////// // IE Embed patch // // @author iezn@iezn.com // @homepage http://iezn.com // @create date 2006.04.19 // @last modify 2006.04.25 // @version 0.41 // 배포시 위내용을 포함해 주시기 바랍니다 ////////////////////////////////////// /** * embed 패치 적용 컨테이너 * null인경우 document 값을 기본으로 합니다 * id값을 설정한경우 설정범위 내에만 적용이 됩니다 * * 본문이나 일부 노드에만 적용할경우 해당 노드의 id 값을 입력하실 수 있습니다 * 예) * var __embed_target_id = "contents"; * 로 처리한경우 body 내에 <태그 id="contents">플래쉬,동영상...</태그> * 안에 내용에만 패치가 적용됩니다 */ if(typeof(__embed_target_id)=='undefined'){ var __embed_target_id = null; } /** * embed 패치를 적용할 태그를 설정합니다 * 기본값은 object,eembed,appelt 태그입니다 * false 값인경우 패치에서 제외됩니다 */ if(typeof(__embed_tags)=='undefined'){ var __embed_tags = {object:true,embed:true,applet:false} } /** * 플래쉬파일중 flashvars 를 사용할경우 해당 플래쉬의 오브젝트아이디:true 값으로 object를 등록해 주세요 */ var __flash_force_objs = {}; if(document.attachEvent){ document.write('<style type="text/css">'); document.write('object,embed{display:none;}'); document.write('</style>'); document.attachEvent('onreadystatechange', function (){ if(__embed_target_id===null){ var __target = document; }else{ var __target = document.getElementById(__embed_target_id); } if (document.readyState == "complete"){ function _replace(obj){ var obj_re = document.createElement(obj.outerHTML); obj_re.style.display='inline'; obj.parentNode.replaceChild(obj_re,obj); } function _inner(obj){ obj.style.display='inline'; var html = obj.outerHTML; var classid = obj.classid.toLowerCase(); if(classid=='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' && typeof(__flash_force_objs[obj.id])=='undefined'){//flash 인경우 obj.insertAdjacentHTML('beforeBegin',html); obj.parentNode.removeChild(obj); }else{ //변경하고자하는 ActiveX classid 를 추가하시기 바랍니다 if(classid=='clsid:6bf52a52-394a-11d3-b153-00c04f79faa6' || //media 7 classid=='clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95' || //6.4 classid=='clsid:6bf52a52-394a-11d3-b153-00c04f79faa6' || classid=='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ){//media player 10 embed_pos = html.indexOf('embed'); if(embed_pos!=-1){//embed 가 존재하는경우 var embed = '<'+html.substr(embed_pos); embed = embed.substr(0,embed.length-9); obj.insertAdjacentHTML('beforeBegin',embed); obj.parentNode.removeChild(obj); }else{ //object로만 되어 있는경우 동영상 부분만 패치한다 var embed = document.createElement('embed'); var total = obj.childNodes.length; embed.setAttribute('autostart',0); if(obj.width){ embed.setAttribute('width',obj.width); } if(obj.height){ embed.setAttribute('height',obj.height); } for(var k=0;k<total;k++){ n = obj.childNodes.item(k).getAttribute("name"); v = obj.childNodes.item(k).getAttribute("value"); if(n=='URL' || n=='url' || n=='FileName'){ n = 'src'; } embed.setAttribute(n,v); } if(embed.getAttribute('src')){ embed.style.display = 'inline'; obj.parentNode.replaceChild(embed,obj); }else{ //파일엑세스 object가 아닌경우는 유지한다 } } } } } if(__embed_tags.object===true){ var objs = __target.getElementsByTagName('object'); var i = objs.length; while(i-->0){ _inner(objs[i]); } } if(__embed_tags.embed===true){ var objs = __target.getElementsByTagName('embed'); var i = objs.length; while(i-->0){ _replace(objs[i]) } } if(__embed_tags.applet===true){ var objs = __target.getElementsByTagName('applet'); var i = objs.length; while(i-->0){ _replace(objs[i]) } } } } ); } 편집한 파일 올립니다.
　┖ 감사합니다VoLcom
　┖ 이소스를 사용시 파일 첨부 버턴이 먹통이 됩니다. 주의 사항 기재 해주시기 바랍니다.정두연
　┖ 언제부터인지는 몰라도 위의 소스가 먹지를 않는군요. 저도 최근에야 알았습니다. 근데...팔공산
Prev 63 64 65 Next
XE 자료
Xpressengine Data of Moonhouse
Xe Tip
Xpressengine Tip of Moonhouse
구글광고넣기....(재밌는경험담 본문에 광고 넣으시려는분 꼭 읽어 보세요...)
구글소스 삽입위치는 저의 경우 다음과 같습니다.... zbxe\modules\board\skins\스킨이름\view_document.html을 열어서 가. 여기에 넣으시면 본문 맨 하단에 위치하게 됩니다... </div> ......구글소스...... <div class="replyAndTrackbackBox"> 나. 여기는 파일다운로드 위치 바로 위에 나타납니다.... <div class="readBody"><div class="contentBody">{$oDocument->getContent()}</div></div> ......구글소스...... <div class="readFooter"> 다. 여기는 댓글 리스트와 입력폼 사이에 나타 납니다... <!-- 댓글 파일 include --> <a name="comment"></a> <!--#include("./comment.html")--> ......구글소스...... </div> <!-- 댓글 입력 폼 --> 라. 여기에 삽입하게 되면....본문과 댓글리스트 사이에 나타나게 됩니다... <!-- 엮인글 파일 include --> <!--@if($oDocument->allowTrackback())--> <a name="trackback"></a> <!--#include("./trackback.html")--> <!--@end--> ......구글소스...... <!-- 댓글 파일 include --> 이상과 같습니다....
　┖ 감사합니다열강하마
구글에드센스 본문 삽입
zbxe\modules\board\skins\스킨이름\view_document.html Simulz 제로보드 사이트와 같이 하려면 view_document.html 파일에서 아래 소스 아랫부분에 구글애드센스를 삽입해보세요. <div class="readBody"><div class="contentBody">{$oDocument->getContent()}</div></div> <애드센스 소스 삽입>
　┖ 소중한 정보 감사합니다.열강하마
최신댓글에 닉네임 출력하기...
최신댓글에 닉네임 출력하기... 조회수: 104, 2007.08.28 16:36:25 게시글 주소 : http://www.zeroboard.com/13284348 엮인글 주소 : http://www.zeroboard.com/13284348/trackback 현재 잡다한 몽상백서 댓글 소스입니다. 댓글 제목 뒤에 닉네임을 넣어봤습니다. (날짜도 나오구요) zbxe/widgets/newest_comment/skins/cozy_simple/list.html 파일을 수정했습니다. <!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 --> <!--%import("css/common.css")--> <!--@if($colorset=="bluish_green")--> <!--%import("css/bluish_green.css")--> <!--@elseif($colorset=="green")--> <!--%import("css/green.css")--> <!--@elseif($colorset=="pink")--> <!--%import("css/pink.css")--> <!--@elseif($colorset=="blue")--> <!--%import("css/blue.css")--> <!--@else--> <!--%import("css/red.css")--> <!--@end--> <div class="commentBox"> <div class="header"> <!--@if($widget_info->title)--> <h2>{$widget_info->title}</h2> <!--@else--> <h2>newest comments</h2> <!--@end--> </div> <div class="document"> <ul> <!--@foreach($widget_info->comment_list as $val)--> {@ $write_time=zdate($val->regdate, "Y-m-d") } {@ $time_check=str_replace(" ","-",$write_time) } {@ $time_check=str_replace(":","-",$time_check) } {@ $time_check=explode("-",$time_check) } {@ $write_time2=mktime($time_check[3],$time_check[4],$time_check[5],$time_check[1],$time_check[2],$time_check[0]) } {@ $now_time=mktime(date("H"),date("i"),date("s"),date("m"),date("d"),date("Y")) } {@ $time_pass=($now_time-$write_time2) } <li><a href="{getUrl('','document_srl',$val->document_srl)}#comment_{$val->comment_srl}">{cut_str(strip_tags($val->content),24,'...')}</a> <!--@if($time_pass < 86400)--> <img src="./new.gif" align=absmiddle> <!--@end--> -{htmlspecialchars($val->nick_name)} {zdate($val->regdate, "Y-m-d")} </li> <!--@end--> </ul> </div> </div> 이소스는 최근댓글에 New아이콘도 함께 출력됩니다. 글 등록후 24시간 동안 New아이콘이 나타납니다.
레이아웃을 처음부터 만들고 싶은 초보분들만 보세요
레이아웃을 처음부터 만들고 싶은 초보분들만 보세요(2-2)조회수: 168, 추천수: 4, 2007.08.28 02:21:40 게시글 주소 : http://www.zeroboard.com/13185554 엮인글 주소 : http://www.zeroboard.com/13185554/trackback 아야어디가 많이 밀렸네요. 잘 될지 모르지만 이제부터 간결하게 가겠습니다. 2-2회 바로 가죠. 오늘 올릴 내용은 아래와 같습니다. 2-2. 레이아웃에서 (1) 이미지 사용법, (2) 자바스크립트와 css파일의 사용법 읽으면서 모르는 말이 나와도 일단 쭉 따라가 봅니다... (1) 이미지 사용법 chochobo 레이아웃에서 이미지를 사용하려면 1) zbxe/layouts/chochobo/ 밑에 images 디렉토리를 생성합니다. 2) 만든 images 디렉토리에 사용할 이미지를 올립니다. 3) layout.html에서 사용하려면 <img src="./images/이미지파일명" /> 위와 같은 이미지 경로를 이용하시면 됩니다. 4) 주의할 점은, 제가 확인한 바로는 layout.html 에 "http://~" 로 시작하는 이미지 경로를 사용하시면 안됩니다. <img src="http://~" /> 이런 식의 이미지 경로는 사용하지 마세요. layout.html파일에서 사용할 이미지는 모두 images 디렉토리에 저장한 후 "./images/이미지파일명" 경로를 이용해 사용하세요. 준비1 : chochobo 디렉토리 밑에 images 디렉토리를 생성한 다음, 아래 첨부파일 2개의 이미지를 images 디렉토리에 chobo.gif chobobg.gif 파일명으로 각각 저장하세요. 무슨 그림인지 한 번 보기도 하세요. (2) js 파일 사용법 1) zbxe/layouts/chochobo/ 밑에 js 디렉토리를 생성합니다. 2) 만든 js 디렉토리에 사용할 js 파일를 올립니다. 3) layout.html 에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다. <!--%import("js파일의경로")--> <!--%import( )-->는 js파일이나 css파일을 불러와야 할 때 사용하는 양식~ 양식입니다. 준비2 : chochobo 디렉토리 밑에 js 디렉토리를 생성한 다음, 빈문서를 하나 불러와 아래 내용을 입력하고 js 디렉토리 밑에 chobo.js 파일명으로 저장하세요. function addfavorites(favoriteurl, favoritetitle){ if (document.all) window.external.AddFavorite(favoriteurl,favoritetitle) } ( 지금 페이지를 즐겨찾기로 지정해주는 자바스크립트 내용입니다. ) 참고 : js 파일에서 images 디렉토리에 있는 이미지의 경로를 사용할 경우에는 chochobo/images/chobo.gif 처럼 해당 레이아웃에서부터 시작하는 경로를 사용하셔야 합니다. (3) css 파일 사용법 1) zbxe/layouts/chochobo/ 밑에 css 디렉토리를 생성합니다. 2) 만든 css 디렉토리에 사용할 css 파일를 올립니다. 3) layout.html에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다. <!--%import("css파일의경로")--> js 파일 불러오기는 방법과 같죠? css파일의 경로만 바꿔 주면 됩니다. 준비3 : chochobo 디렉토리 밑에 css 디렉토리를 생성한 다음, 빈문서를 하나 불러와 아래 내용을 입력하고 css 디렉토리 밑에 chobo.css 파일명으로 저장하세요. body{ background:#FFFFFF url(../images/chobobg.gif) repeat-x; } (body 의 배경색을 흰색으로 하고, 배경그림은 ../images/chochobg.gif 로 하며, 배경그림을 가로로 반복하라는 스타일지정입니다.) 그럼, 1회부터 지금까지 작성한 layout.html 내용을 간결하게 정리해 나가면서 아래처럼 작성 합니다. 그전에 태그 하나 소개합니다. div 태그입니다. 영역 분할 하는데 쓰이는 태그 입니다. 요즘은 레이아웃 잡는데 table 태그를 쓰지 않고 이 div 태그를 이용합니다. <div> 내용 </div> 의 형식으로 쓰시면 됩니다. 각 div에 id나 class 명를 지정할 수 있고 css파일에서 각각의 id와 class의 스타일을 지정할 수 있습니다. div 태그는 p 태그의 단락 구분 속성을 갖고 있어서 화면에 보여주기도 좋습니다. 이게뭐야 싶어도 그냥 div 태그를 써보죠. 트랜드에 뒤쳐지면 안되잖아요. 이 모든 것들을 이번 초초보레이아웃작성 팁으로 작성할 능력이 안되서; 팁 게시가 끝날 때 도움이 될 사이트를 소개하도록 하겠습니다. 그래서 일단은 따라하기...; <!-- js 파일을 가져옵니다. --> <!--%import("js/chobo.js")--> <!-- css 파일을 가져옵니다. --> <!--%import("css/chobo.css")--> <div> <!-- 홈타이틀 --> {$layout_info->home_title} </div> <div> <!-- 로고이미지, 클릭하면 홈으로 이동 --> <a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a> </div> <div> <!-- 이미지를 사용해보자. img 태그를 쓸 때, alt 값 지정하는 것을 잊지 맙시다. --> <img src="/images/chobo.gif" alt="chobo이미지" /> </div> <div> <!-- chobo.js 에 저장했던 즐겨찾기 스크립트를 이용해 봅시다. --> <a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->title}')">즐겨찾기에 추가</a> </div> 이렇게 작성하고 자신의 계정 zbxe/layouts/chochobo/ 디렉토리 밑에 layout.html 파일을 올려서 덮어쓰기 합니다. 위 (1), (2), (3)의 각 준비 과정을 거치고 layout.html 파일도 새로 작성했다면, 이제 화면에 어떻게 출력되는지 볼까요? 아래와 같이 나오면 정상입니다. 미리보기 지금까지 무미건조 했던 모습과는 조금 달라졌죠? 하늘색의 배경그림(chobobg.gif)이 출력되는 이유는 chobo.css 파일을 불러왔고(import) 그 파일의 body{~~~ 스타일 내용이 적용됐기 때문입니다. 파이어 폭스에서 즐겨찾기 기능은 작동을 안하네요;; 아무튼.. 그럼 바뀐 페이지의 소스 보기를 해보세요. 마우스 오른쪽 버튼->소스보기 혹은 단축키(ie 에서는 alt v + c , 파폭에서는 alt v + o)를 이용해서 볼 수 있습니다. 우리가 layout.html 상단에 <!--%import("js/chobo.js")--> <!--%import("css/chobo.css")--> 이 두 줄을 추가했는데 소스 내용의 <head>와 </head> 사이에 잘 찾아보면 <script type="text/javascript" src="/zbxe/layouts/chochobo/js/chobo.js"></script> 와 <link rel="stylesheet" href="/zbxe/layouts/chochobo/css/chobo.css" type="text/css" /> 이 들어가 있는 것을 알 수 있습니다. zbxe의 템플릿이 알아서 추가 해준 것이죠. 역시 zbxe 좋죠? 오늘은 여기까지 입니다. 말씀 드린대로 도움이 될 사이트 소개합니다. 천천히 읽으면서 받아 들이도록 애써 보세요. 저도 다 읽으려면 많이 남았습니다. |-) 1. http://ilmol.com/wp/2005/06/09/25/ 저도 읽어 봤는데 테이블은 이제 과연 어디에 써야하나.. 고민됩니다;; 2. http://ilmol.com/wp/2005/08/15/110/ 쭉 읽어보시고 하단 부분에 보시면 ul 태그에 대해 나옵니 다. 익혀 두세요. 메뉴 사용과 관련해서 많이 나오는 태그 입니다. 3. http://ilmol.com/wp/css 이 페이지와 그곳에 링크된 페이지 그리고 우측 메뉴를 이용해 css에 대해 배워 봅니다. 이제 3회에서 메뉴 출력부분과 본문 출력 부분을 배우면 끝날 것 같습니다. 일단 메뉴 1개부터 다수까지 연결하는 부분을 배우고 출력할 수 있는 여러가지 유형의 메뉴 타입를 제시함으로써 마치려고 합니다. 질문은 댓글이나 쪽지로 주세요. 수고하셨습니다. 좋은 하루 되세요.
서브 메뉴 배경색 바꾸기
서브 메뉴 배경색 바꾸기 조회수: 196, 추천수: 1, 2007.08.17 11:56:06 게시글 주소 : http://www.zeroboard.com/4796401 엮인글 주소 : http://www.zeroboard.com/4796401/trackback 우선 레이아웃 폴더에서 Xe_official에 들어가서 Css에 들어가세요 . 자신이 쓰는 스킨명.css 클릭 하시고 편집에 들어가서 #lnb li a:focus { color:#ffffff; background:#008aff; border:1px solid #008aff;} #lnb li.on a { color:#ffffff; background:#008aff; border:1px solid #008aff;} 파란색 글자를 원하는 RGB색으로 변경하면 됩니다.
Prev 63 64 65