| 설치경로 | ./layouts/2010_jowrney_release |
|---|---|
| 라이선스 | LGPL v2 (권장) |
| 홈페이지 | http://jowrney.com/xe/SYXELayout |
| 간단한 소개 | 안녕하세요. 저니입니다. 개인적인 용도로 만든 레이아웃을 배포용도로 제작하기란 좀처럼 쉬운 일이 아닌 듯 합니다. 미약하나마 XE에 기여하고자 배포용 레이아웃을 공개합니다. |
Jowrney XE
개인적인 용도로 만든 레이아웃을 배포용도로 제작하기란 좀처럼 쉬운 일이 아닌 듯 합니다.
미약하나마 XE에 기여하고자 배포용 레이아웃을 공개합니다.
하지만, 완벽한 레이아웃 제작은 어렵기 때문에 다음과 같은 제약사항이 있습니다.
1. 개발환경
맥 OSX 스노우레드 주로 파이어폭스에서 테스트
테스팅 브라우저 : IE6,7,8, 사파리4, 크롬, 파이어폭스 (오페라는 지원하지 않습니다.)
2. 한국어, 영어, 일어 만 제공됩니다.
저니 2010 레이아웃(2010 Jowrney Layout)
XE 레이아웃
라이센스 : LGPL2
버전 : 0.1
제작자 : Jowrney Kim (http://www.jowrney.com / jowrney@jowrney.com)
설치 경로 : ./layouts/2010_jowrney_release
로그인 위젯 스킨 설치경로 : ./widgets/login_info/skins/2010_jowrney_release
개요
개인홈페이지로 제작되었던 레이아웃을 배포용으로 변경하여 만든 버전입니다.저니레이아웃의 라이센스는 기본적으로 XE와 동일한 라이센스(LGPL2)가 적용되나,
내부에 사용된 아이콘 요소들에 각각의 정책에 따릅니다.
이 레이아웃을 사용하기 위해 별도로 이 레이아웃에 맞는 로그인 위젯 스킨도 설치해 주어야 합니다.
Pinvoke
관련링크 : http://www.pinvoke.com
IconDrawer
관련링크 : http://www.icondrawer.com
위의 아이콘을 사용하기 위해서는 자신의 홈페이지에 관련 링크를 표시해주어야됨.
icondrawer같은 경우는 일부만 가능하고 아이콘에 따라 정책이 조금씩 다름.
설치
이 게시글의 첨부파일을 다운로드 받아서 압축을 풀고, 아래의 경로에 업로드합니다.
[XE root]/layouts/2010_jowrney_release
[XE root]/widgets/login_info/skins/2010_jowrney_release
이하 레이아웃 사용방법에 대해서는 XE사이트의 메뉴얼을 참조해주시기 바랍니다.
XE메뉴얼 : http://xe.xpressengine.net/wiki
저의 개인홈페이지용 레이아웃과 배포용 레이아웃은 약간의 차이가 있습니다.
특히 아이콘 관련되서는 배포하는 것이 아니기에 주의하시기 바랍니다.
또한 아울러 몇몇 아이콘들은 pinvoke(http://www.pinvoke.com)과
iconDrawer(http://www.iconDrawer.com)에서 자신의 홈페이지에 자신들의 링크를
걸어줄때만 유효한 사항으로 반드시 숙지해주시기 바랍니다.
적용해봤는데요.. 상단에 숨겨진 슬라이드메뉴..
레이아웃 설정에서 메뉴 선택해도 거긴 적용이 안되는데요 상단의 슬라이드 메뉴는 수작업으로 고쳐줘야하나요?
메뉴가 기본적으로 감춰진 상태라 처음 접속해본 느낌은 참 깔끔하다 좋다.. 이런건데..
메뉴가 아예 없으니 개인적인 생각으로는 것도 좀 그렇네요.. 한 몇초 보여주다 삭 사라지면 좋을거 같습니다.
처음 접속시 맨위 슬라이드 메뉴를 펼침상태로 보여주려고 합니다.
소스를 보니 ..
if(xGetCookie("keepToggle") == "true"){
document.getElementById("layoutContents").style.top = '-39'+'px';
document.getElementById("toggleBtn").style.backgroundPosition='0'+'px '+'-26'+'px';
//토글 상태 변수 파악이 되지 않아 Click함수로 대체 처리.
jQuery("#toggleBtn").click(toggleOn(true));
}
쿠키값이 true 면 안의 내용을 실행하는거 맞죠?
저기에 처음 접속한 상태의 쿠키가 없으면 이란 조건을 추가하면 될거 같은데요.. 코딩을 어찌 해야 하는지 알려주셔요.. (__)
안녕하세요. 댓글을 이제서야 봤네요 ㅎㅎ
쿠키값이 true로 설정하면 됩니다.
해당파일은 /js/jowrney.js 파일을 열어보시면요. 라인 18~38 코드는 아래와 같습니다.
/**
* 토글 숨긴 메뉴 쿠키 저장
* xSetCookie(name, value, expire, path);
* xGetCookie(name);
* xDeleteCookie(name, path);
*/
var expire = new Date();
var days = 1;
var path = "/"
expire.setTime(expire.getTime()+(days*24*60*60*1000));
xDeleteCookie("keepToggle");
xSetCookie("keepToggle", true, expire);
jQuery("#toggleBtn").toggle(
function () {
toggleOn(true);
xDeleteCookie("keepToggle");
xSetCookie("keepToggle", true, expire);
},
function () {
toggleOn(false);
xDeleteCookie("keepToggle");
xSetCookie("keepToggle", false, expire);
}
);
위와 같이 파란색의 코드를 사이에 추가해주시면 되겠습니다.
수고하세용. ;-)
설명해주신대로 적용해서 원하는 결과를 얻었습니다.
또한가지 계속 해봐도 안되는게 있는데요.. 원체 제가 아는게 없는 와중에 수정해볼라고 하니 여러모로 손발이 수고스럽군요.. 자꾸 질문드리게 되어 죄송합니다.
이 레이아웃의 하단 메뉴를 가운데로 정렬시키려고 하는데요.. css 에서 수정하면 되는거 같길래 그곳에 여러 곳?? 을 막 쑤셔대구 있는데요.. 바뀌질 않아요..
float 으로 어쩌고 저쩌고 된 상태라 그런거라 추측이 되는데 어찌해야 하는지 알려주시면 정말 고마울거에요 ㅜㅜ
안녕하세요. 박봉팔님
레이아웃 하단메뉴를 가운데로 정렬 시킬려면 width가 고정된 값이면 쉬운데요. 자동으로 늘어나는 메뉴에 대해서 적용하기는 좀 까다로울 것 같습니다.
관련 내용은 css/white.css(검정 스킨인 경우 css/black.css)파일 열어보시면 줄 번호 147번을 보시면 되는데요. 우선 아래와 같이 변경해봅니다.
.bottomBay .bottomMenu {position: absolute; height:20px; border:1px solid #f00; width:940px}
.bottomBay .bottomMenu ul {list-style: none; margin:0px auto; border:1px solid #00f; width:300px}
.bottomBay .bottomMenu li {float:left; list-style:none; margin-right:15px; }
.bottomBay .bottomMenu li a {color:#aaa; text-decoration: none; font-size: 12px}
.bottomBay .bottomMenu li a:hover {color:#3b8dc9; text-decoration: underline}
파란색으로 변경된 부분이 메뉴의 전체 컨테이너 영역이구요. 이부분은 현재 레이아웃 기준으로 width값을 940px로 해두었기 때문에 가로영역을 정의해주었습니다. 이를 확인하기 위해 border에 값을 주어서 육안으로 확인하고 테스트 이후에는 삭제해주시면 됩니다.
다음으로 그 안의 하단메뉴영역의 컨테이너 영역을 정확히 맞춰야됩니다. 메뉴를 모두 표시한 이후의 사이즈를 고정시켜면 쉽게 센터 영역에 잡을 수 있는데요 현재 위에서는 붉은 글씨로 메뉴 영역 300px정도 차지하고 있다고 가정하였습니다.
이처럼 영역 범위를 정확하게 기술하였다면, margin:0px auto의 속성이 적용할 수 있게 되고 이는 해당 메뉴를 센터 정렬하게 할 수 있습니다.
단일 텍스트로 inline속성을 가진다면 text-align:center 와 같은 속성으로 간단히 할 수 도 있겠지만 위의 경우는 가능하지 않습니다.
이보다 더 자세한 정보를 원하시면 HTML 태그에 대한 전반적인 지식이 좀 필요하신데요.
아래의 사이트에서 얻으실 수 있을 것입니다.
http://www.trio.co.kr 로 방문하셔서 CSS2문서를 참조.
또는 http://www.w3.org/TR/CSS2/(영문) 문서를 참조하세요.
초보자가 상단 메뉴 배너 설정에 문제(힘든점)가 있을듯 합니다
쉽게 설명 해주시면 더 더욱 좋으리라 사료 됩니다
수고하셨습니다
으~아~ 멋있다~ 감탄~ 좋은 사이트보았습니다.
얄팍한 지식으로 레이아웃을 꾸며보려고 매일 아둥바둥 거렸는데,
넘 마음에 드네요^^
사람냄새 풀풀나는 좋은 사이트이네요~
즐겁게 여러모로 잘 보았습니다.
추천드렸습니다. 깔끔한 레이아웃입니다.
근데 윗윗분 말씀대로 막상 다른 레이아웃처럼 사용하기에는 약간 불편한 점이 있네용.
left쪽도 이상하게 건드리면 먹통이 되어서 left.html을 직접 손보고 있는데
그러면 필연적으로 레이아웃을 여러개 생성할때도 공통적으로 적용되어서
ftp상으로 디렉터리를 따로 생성해서 각기 별개의 레이아웃으로 유지해야 되서
다음 배포하실 때는 inc폴더의 것들을 모두 layout.html로 포괄하여 처리할 수는 없나 합니다 ㅋㅋ
게시판 스킨도 배포해주시길 기원하며 아무튼 추천!
멋진 레이아웃 입니다. ㅎㅎ
한번 사용해 보려고 열심히 수정중인데 생각보다 힘드네요 ㅎㅎ;;
제가 실력이 없다보니..ㅠ
상단 메뉴에서 그림파일로 된 메뉴 부분을 수정 하고 싶은데
5개 메뉴에 다른 이미지 파일을 사용 하고 싶은데 어느부분을 어떻게 수정해야 하나요?
레이아웃이 상당히 이쁘네요 ^^
그리고 혹시 수정해서 써도 되는지 궁금합니다.
또한 저니님 홈피에서 보니 게시판이 상당히 이쁘던데...
공개해주실수 있을지 여쪄봅니다.^^
좋은하루되세요