레이아웃 스킨
완성되는데로 올리겠습니다.
layouts_0.2.7.alpha
12/1 일 수정됨
레이아웃 너비 910 픽셀
(이전 레이아웃 너비가 잘못 수정된 걸로 첨부되어서 다시 910픽셀로 맞춰서 올립니다.)
직접 수정
layouts/xe_layout/css/default.css
#gnb li a { display:block; float:left; padding:13px 15px 0 15px; height:25px; color:#282828; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
빨간색 부분을 제거해주면됩니다.
layouts 폴더에 xe_layout 를 업로드합니다.
가. 로그인후 >> 관리 >> 레이아웃 >> 생성 버튼을 클릭하여 생성합니다.
나. 레이아웃 설정 내용
1. 홈 페이지 URL: 자신의 웹사이트 주소를 입력합니다.
2. 상단 메뉴: 메인 부분에 삽일할 메뉴를 선택합니다.
3. 레이아웃 일괄 적용: 체크한후에 저장 버튼을 클릭합니다.
다. 관리 >> 캐시파일 재생성 >> 저장 버튼을 클릭합니다.
2. 레이아웃 너비 수정
layouts/xe_layout/css/default.css
레이아웃 너비부분:
#bodyWrap { width:910px;
#columnRight { width:641px;
#visualArea { width:641px;
3. 검색페이지 수정부분
modules/integration_search/skins/default/css/white.css
#spot { border:8px solid #cecece; width:754px; 에서 너비를 625으로
웹사이트 미리보기
(운영 시간: 오전 8:00 ~ 오후 12:00)
![[레벨:2]](./modules/point/icons/default/2.gif "포인트:675point (83%), 레벨:2/30"){kind=icon}
coll(처음 받는 이용자들은 어느것을 받아야 할지 회깔리는분들 있을거같아 지웠습니다)
레이아웃 너비 수정은
layouts/xe_layout/css/default.css
레이아웃 너비부분:
#bodyWrap { width:910px;
게시판 너비부분:
#columnRight { width:641px;
#visualArea { width:641px;
에서 변경가능하구요.
11/22 이전에 받으신분들은 배경이미지 layouts/xe_layout/images/default 경로에 업로드해 주세요.
나문기사이즈를 늘리면 게시판이 우측으로 몰립니다.
중앙이나 좌측 정렬시키려면 뭘 건드려야 할까요??
layouts/xe_official/layout.html
27~34 라인
<div id="language">
<strong title="{$lang_type}">{$lang_supported[$lang_type]}</strong> <a href="#selectLang" onclick="showHide('selectLang');return false;"><img src="./images/{$layout_info->colorset}/buttonLang.gif" alt="Select Language" width="87" height="15" /></a>
<ul id="selectLang">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>
<!--@end--><!--@end-->
</ul>
</div>
여기는 언어부분이구요.
51~82 라인
<form action="{getUrl()}" method="post" id="isSearch">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />
<label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">{$lang->title}</label>
<ul id="selectOrder">
<li>
<input type="radio" name="search_target" value="title" id="search_target1" />
<label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}</label>
</li>
<li>
<input type="radio" name="search_target" value="content" id="search_target2" />
<label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="title_content" id="search_target3" />
<label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="comment" id="search_target4" />
<label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>
</li>
<li>
<input type="radio" name="search_target" value="tag" id="search_target5" />
<label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>
</li>
</ul>
<input name="is_keyword" type="text" class="inputText" title="keyword" />
<input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
여기는 통합검색부분입니다.
위 두군데를 제거하면됩니다.
![[레벨:5]](./modules/point/icons/default/5.gif "포인트:3050point (94%), 레벨:5/30"){kind=icon}
안녕하세요...일단 수정 했는데..로그인 폼 제거 하고 난 후의 하얀 테두리가 문제네요 ㅠㅠ
어디를 만져야 하는지 가르켜 주시면 감사하겠습니다.( Coll 님 홈피에 사진 올려 뒀어요)
사이즈를 줄인 상태 ( http://www.oldblues.net/mojo )
예광우음주후 이제 수정하였습니다.
게시판의 폭을 790까지 사용하기가 무리이더군요.
임시로 이미지 조정하면서 일단 730에 맞춰사용하고 있지만 차후에도 이미지 리사이즈할려니 머리 아파오네요
빠른 답변 감사합니다.
대강 디자인은 윤곽이 드러나는데, 장님 문고리 잡은 식으로 해서, 기억에 남는게 없네요 ㅠㅠ
또한 머리 아픈게, 페이지나 게시판이 연결이 안되는 일이지만
뚫어져라 쳐다보면 아마 답이 나올거 같습니다..
Coll 님덕분에 멋진 스킨 사용하게 된거 감사드립니다.
http://www.oldblues.net/mojo 최종 수정..
그리고 Coll 님 홈피가 아직 열리지 않아 불필요한 라인 지우지 못하고 있는데, 이것 저것 만지려다 ㅠㅠ 지금껏 해둔거 날라갈까봐 못 만지고 있어요 ㅠㅠ
그리고 새로고침을 누르거나, 페이지를 열면 헤더 부분과 풋터 부분의 배경이 분홍으로 나왔다가 사라지는 현상은 왜 일어 날까요?
1시간째 만져 보는 중인데, 답을 찾을수가 없네요 ㅠㅠ
layouts/xe_layout/xe_layout.html
<div style="padding:15px 25px 15px 25px">
<div id="contentBody">
<div id="columnLeft">
...
</div>
<div id="columnRight">
<!-- 컨텐츠 시작 -->
{$content}
</div>
</div>
<ul id="footer">
위 빨간색 부분을 제거해주면 됩니다.
죄측 너비는 노란색 부분을 제거해주면 됩니다.
"새로고침을 누르거나, 페이지를 열면 헤더 부분과 풋터 부분의 배경이 분홍으로 나왔다가 사라지는 현상은 왜 일어 날까요?" << 이부분은 현재 http://www.oldblues.net/mojo의 웹사이트가 열리지 않는 관계로 확인할 수가 없네요.
layouts/xe_layout/css/default.css
헤더부분
#hdr {
background: #F7632F url(../images/default/header_back.gif) ;
width: 100%;
height: 102px;
margin: 0;
padding: 0;
}
빨간색 부분을 수정하시면됩니다.
푸더부분
#fdr {
background: #F7632F url(../images/default/footer_x.gif) ;
width: 100%;
height: 47px;
margin: 0;
padding: 0;
}
빨간색 부분을 수정하시면됩니다.
새로나제로보드 처음 사용하는 초보자 적용해봤어요~~
근데~~
서브페이지는 적용되는데~~
메인이 그데로에요~~~
어떻게 손을 봐야 할까요?
http://serona.hosting.paran.com/
![[레벨:1]](./modules/point/icons/default/1.gif "포인트:205point (56%), 레벨:1/30"){kind=icon}
승우아빠드뎌 윤곽이 드러 났습니다만, 역시나 문제점이 발생하네요..
http://www.oldblues.net/mojo
http://www.oldblues.net/mojo/?mid=mojomama
Coll 님 홈피에 사진 올려 뒀는데 한번 체크 부탁 드립니다.. ^^
감사합니다.
http://www.oldblues.net/mojo의
삭제 하고픈 공간부분은 기본틀로 하시는 것을 권합니다.
(1차 메뉴와 게시판의 간격을 없애버리면 또 다른 모든 간격을 수정하셔야합니다. 예를들면 게시판의 설명 항목에 적당한 설명을 적고 확인해보면 이 또한 1차메뉴와 게시판의 간격이 붙어 버리는 관계로 ... 기본 간격을 유지하는 것을 권합니다. 이 뿐만아니라 다른 모든 항목들도 수정해야하는 번거로움을 낳게됩니다.)
삭제 하고픈 선부분은 modules/board/skins/xe_board/css/common.css
.boardHeader h3 { float:left; font-size:1.2em; padding:1em 2em .7em 1.2em; background:#ffffff url(../images/common/lineH3.gif) no-repeat right bottom;}
빨간색 부분을 제거해주면됩니다.
게시판 너비부분은
layouts/xe_layout/css/default.css
#columnRight { width:641px;
#visualArea { width:641px;
641를 수정하면됩니다.
/* Site Layout - Column Right */
#columnRight { width:511px; float:right; overflow:hidden;}
빨간색 부분의 정렬부분을 원하는데로 수정하면됩니다.
갤러리 형태 게시판일 경우 이미지 가운데 정렬은
modules/board/skins/xe_board/css/common.css
.thumbnailBox div.cell { display:block; float:left; overflow:hidden; margin-bottom:1em; margin-right:1em;}
이 부분에서
.thumbnailBox div.cell { display:block; float:left; overflow:hidden; margin-bottom:1em; margin-left:0.8em;}
로 교체후에 빨간색 부분만 수정합니다. (0.8em을 자신의 웹사이트에 맞게 조금씩 수정해서 맞춥니다)
이미지 오버
.thumbnailBox div.cell img.thumb { padding:2px; border:1px solid #e0e1db; display:block; margin-bottom:1em; margin-left:auto;margin-right:auto;}
부분을 찾아서 아래줄에
.thumbnailBox div.cell img.thumb:hover { border:1px solid #54564b; }
을 추가합니다.
http://www.oldblues.net/mojo/?mid=mojomama 는 정상적으로 보이는데요?
rejoice좋은 스킨 감사합니다.
근데 저는 스킨 적용하니 로그인폼이 사라졌어요.ㅠ.ㅠ
로그인 스킨 따로 업로드 해야하는거에요?
www.rejoice.co.kr입니다.
![[레벨:4]](./modules/point/icons/default/4.gif "포인트:1960point (87%), 레벨:4/30"){kind=icon}
우갱™안녕하세요. 한가지 질문이 있습니다.
왼쪽에 로그인 위젯 밑으로 각종위젯이 나온 다음 가장 밑에 2차메뉴가 나오는데요
이것을 로그인 위젯 바로 밑에 2차 메뉴가 나오게 하고 그 밑으로 각종 위젯들이 나오게 하려면
어디를 수정해야 하는건가요?
</ol>
<!--@end-->
위젯 1
위젯 2
</div>
<div id="columnRight">
<!-- 컨텐츠 시작 -->
</div> (빨간 부분) 앞줄에 각종 위젯을 추가해주면 됩니다.
승우아빠Coll 님 하나가 잘못되서, 제로보드 지우고 다시 깔았는데, 그부분이 사라지지 않네요..
홈피에 사진 올려뒀습니다..도움말씀 부탁 드립니다..
로고 텍스트(Homeless Blues) 부분은 해당 css 에 text-decoration: none; 을 추가해주면 밑줄이 없어집니다.
참고:
text-decoration: none; // 밑줄 없음
text-decoration: underline; // 밑줄 있음
게시판 부분은 제로보드 최신버전은 다시 받아서
modules/board/skins/xe_board
빨간색 부분의 디렉토리만 덮어씌우면 간단히 해결되겠습니다.
승우아빠http://www.oldblues.net/mojo/?mid=gallery
http://www.oldblues.net/mojo/?mid=girl
이곳을 보면 사진 밑에 길게 그어진 선을 지우려면 어떤 줄을 수정 해야 하는지요?
이리 저리 수정 해보는데 찾을수가 없습니다.
부탁 드립니다. 감사합니다.
.thumbnailBox { margin-top:1em; clear:both; overflow:hidden; border-bottom:1px solid #e0e1db; }
.thumbnailBox div.cell { display:block; float:left; overflow:hidden; margin-bottom:1em; margin-left:2.4em;}
.thumbnailBox div.cell img.thumb { padding:2px; border:1px solid #e0e1db; display:block; margin-bottom:1em; margin-left:auto;margin-right:auto;}
.thumbnailBox div.title { color:#3B96C0; margin-bottom:.2em; overflow:hidden; white-space:nowrap; text-align:center;}
.thumbnailBox div.title a { color:#3B96C0; text-decoration:none;}
.thumbnailBox div.nameAndDate { font-size:.9em; color:#999999; margin-bottom:.2em; text-align:center;}
.thumbnailBox div.nameAndDate a { color:#999999;}
.thumbnailBox div.nameAndDate .author { margin-left:auto; margin-right:right; }
.thumbnailBox div.nameAndDate .author div { display:inline; vertical-align:middle;}
.thumbnailBox div.nameAndDate .date { font:.8em Tahoma; color:#999999;}
.thumbnailBox div.readAndRecommend { font-size:.9em; color:#666666; text-align:center;}
.thumbnailBox div.readAndRecommend .num { font:.8em Tahoma;}
.thumbnailBox div.readAndRecommend .vr { color:#dddddd;}
.thumbnailBox div.readAndRecommend strong.num { font:bold .8em Tahoma; color:#ff6600;}
레이아웃 너비가 바껴서 다시 다 수정해야겠군요;; 그리고 배경이미지가 없습니다..