묻고답하기

 

Xe로 들어와 느끼는 가장 큰 어려움 가운데 하나가 소스를 이해하는 것입니다.

 

원래부터 php나 css에 대해 지식이 없는 터였으나.

 

제로보드 4의 경우 대충 짐작으로 때려 맞추면서 이해가 가능했기에

 

수정또한 아주 어려운 일은 아니었지요.

 

근데 Xe는 그렇지 않습니다. 이게 사용하는 Php버전이 달라서인지

 

아니면 개발자가 사용하는 방법이 달라서인지 몰라도

 

아무리 들여다 봐도 이해가 안될때가 너무 많습니다.

 

위젯 스타일 스킨을 하나 다운받아 설치해 봤습니다.

 

아래 그림 같은 것인데요.

 

자료실에서 받은   Xe기본 위젯스타일스킨입니다.

 

주소: http://www.xpressengine.com/?mid=download&category_srl=18322952&package_srl=18324403

 

wi1.gif  

 

 

현재 쓰시는 분도 있겠지만, 테두리의 색상을 변화시켜 사용할 수 있는

 

깔끔한 위젯스타일 스킨입니다.

 

그런데 위의 위젯스타일스킨이 다른것은 다 마음에 드는데  타이틀 아래 출력되는 본문사이에

 

경계가 없어서 선을 하나 넣고 싶었습니다.  아래 그림처럼요 

 

      wi2.gif

 

그래서 소스를 열어봤습니다.

 

위젯스타일 스킨의 소스파일은  widgetstyle.html하고 widgetBoxStyle.css 두개입니다.

그런데 두개의 파일을 아무리 열어넣고 살펴봐도 도무지 어디를 수정해야 할지 모르겠네요.

 

 뭐 알 수 없는게 어디 이런 위젯스타일 스킨 뿐이겠습니까?

 

레이아웃스킨 파일도 역시 다르지 않지만 아무튼 소스이해가 너무 어렵습니다.

 

스킨들이 많이 나오려면. 이런 소스를 이해할 수 있도록 설명해 주는 팁이나 강좌가

많이 나와야 할것 같습니다.

 

 

위의 오리지널 소스 widgetstyle.html 파일소스하고 widgetBoxStyle.css파일 소스를 올립니다.

 

좀 잘 아시는 분께서 좀 속시원하게 설명좀 해 주실 수 없을까요?

 

그리고 보너스로  위의 첫번째 위젯을  아래의 그림처럼 선을 하나 넣으려면

 

어디를 어떻게 수정해야 할지도 좀 가르쳐 주세요.

 

부디  무심히 지나치지 마시고 너그러운 마음으로 가르침을 배풀어 주시길 간청하옵나이다~

 

먼저 widgetstyle.html 파일소스 입니다.

  
<!--%import("css/widgetBoxStyle.css")-->
<div class="widgetBoxContainer {$widgetstyle_extar_var->ws_style}">
    <div class="widgetBox">

        <!--@if($widgetstyle_extar_var->ws_title_image || $widgetstyle_extar_var->ws_title)-->
            <h3 class="widgetBoxHeader" <!--@if($widgetstyle_extar_var->wws_title_colors_title_color)-->style="color:{$widgetstyle_extar_var->ws_title_color};"<!--@end-->>
            <!--@if($widgetstyle_extar_var->ws_title_icon)-->
                <img src="{$widgetstyle_extar_var->ws_title_icon}" />
            <!--@end-->
            <!--@if($widgetstyle_extar_var->ws_title_image)-->
                    <img src="{$widgetstyle_extar_var->ws_title_image}" />
            <!--@else-->
                <!--@if($widgetstyle_extar_var->ws_title)-->
                    {$widgetstyle_extar_var->ws_title}
                <!--@end-->
            <!--@end-->
            </h3>
        <!--@end-->
        {$widget_content}
        {@$widgetstyle_extar_var->ws_more_url=trim($widgetstyle_extar_var->ws_more_url);}
        <!--@if($widgetstyle_extar_var->ws_more_url)-->
            <!--@if(strtolower(substr($widgetstyle_extar_var->ws_more_url,0,4))=='http')-->
                <a href="{$widgetstyle_extar_var->ws_more_url}" class="widgetMore">
            <!--@else-->
                <a href="http://{$widgetstyle_extar_var->ws_more_url}" class="widgetMore">
            <!--@end-->
            <!--@if($widgetstyle_extar_var->ws_more_image)-->
                <img src="{$widgetstyle_extar_var->ws_more_image}" />
            <!--@else if($widgetstyle_extar_var->ws_more_text)-->
                {$widgetstyle_extar_var->ws_more_text}
            <!--@else-->
                more
            <!--@end-->
            </a>
        <!--@end-->
        <span class="rcContainer rcTop">
            <span class="rc tl"></span>
            <span class="rc tr"></span>
        </span>
        <span class="rcContainer rcBottom">
            <span class="rc bl"></span>
            <span class="rc br"></span>
        </span>
    </div>
</div>
 

 

 

 아래는 widgetBoxStyle.css파일 소스 입니다.

 

  
 @charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
.widgetBoxContainer{ position:relative;}
.widgetBox{ position:relative; *zoom:1; }
.widgetBox:after{content:""; display:block; clear:both; }
.widgetBox .widgetBoxHeader{ font-size:16px; font-family:Tahoma; margin:0; z-index:10;}
.widgetBox .widgetContainer{ position:relative; z-index:10;}
.widgetBox .widgetMore{ position:absolute; display:block; text-decoration:none; font-size:11px !important; white-space:nowrap; font-family:Tahoma; color:#000; text-align:center; z-index:20;}
.widgetBox .widgetMore img{ border:0;}
.widgetBox .rcContainer{ display:block; width:100%; font-size:0; line-height:0; z-index:1; *zoom:1; }
.widgetBox .rc{ position:absolute; display:block; font-size:0; line-height:0; overflow:hidden;}
.widgetBox .rcTop .tl{ top:0;}
.widgetBox .rcTop .tr{ top:0;}
.widgetBox .rcBottom .bl{ top:0;}
.widgetBox .rcBottom .br{ top:0;}
.widgetBoxDred{ padding:8px 0;}
.widgetBoxDred .widgetBox{ background:#fff; border-left:5px solid #ffcccc; border-right:5px solid #ffcccc; *zoom:1}
.widgetBoxDred .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#ff3333;}
.widgetBoxDred .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDred.gif) no-repeat; color:#fff !important;}
.widgetBoxDred .rcTop,
.widgetBoxDred .rcBottom{ height:8px;} 
.widgetBoxDred .rcTop{ position:absolute; top:-8px; left:0;}
.widgetBoxDred .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDred .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDred.png)undefinedundefinedundefinedundefined; _background-image:url(../img/roundedCornerDred.gif)undefinedundefinedundefinedundefined; background-repeat:no-repeat;}
.widgetBoxDred .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDred .rcTop .tr{ background-position:right 0; left:5px;}
.widgetBoxDred .rcBottom .bl{ background-position:0 bottom; left:-5px;}
.widgetBoxDred .rcBottom .br{ background-position:right bottom; left:5px;}
.widgetBoxDgreen{ padding:8px 0;}
.widgetBoxDgreen .widgetBox{ background:#fff; border-left:5px solid #d9efb9; border-right:5px solid #d9efb9; *zoom:1}
.widgetBoxDgreen .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#90d133;}
.widgetBoxDgreen .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDgreen.gif) no-repeat; color:#fff !important;}
.widgetBoxDgreen .rcTop,
.widgetBoxDgreen .rcBottom{ height:8px;} 
.widgetBoxDgreen .rcTop{ position:absolute; top:-8px; left:0;}
.widgetBoxDgreen .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDgreen .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDgreen.png)undefinedundefinedundefinedundefined; _background-image:url(../img/roundedCornerDgreen.gif)undefinedundefinedundefinedundefined; background-repeat:no-repeat;}
.widgetBoxDgreen .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDgreen .rcTop .tr{ background-position:right 0; left:5px;}
.widgetBoxDgreen .rcBottom .bl{ background-position:0 bottom; left:-5px;}
.widgetBoxDgreen .rcBottom .br{ background-position:right bottom; left:5px;}
.widgetBoxDblue{ padding:8px 0;}
.widgetBoxDblue .widgetBox{ background:#fff; border-left:5px solid #d8e6e7; border-right:5px solid #d8e6e7; *zoom:1}
.widgetBoxDblue .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#55ccdd;}
.widgetBoxDblue .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDblue.gif) no-repeat; color:#fff !important;}
.widgetBoxDblue .rcTop,
.widgetBoxDblue .rcBottom{ height:8px;} 
.widgetBoxDblue .rcTop{ position:absolute; top:-8px; left:0;}
.widgetBoxDblue .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDblue .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDblue.png)undefinedundefinedundefinedundefined; _background-image:url(../img/roundedCornerDblue.gif)undefinedundefinedundefinedundefined; background-repeat:no-repeat;}
.widgetBoxDblue .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDblue .rcTop .tr{ background-position:right 0; left:5px;}
.widgetBoxDblue .rcBottom .bl{ background-position:0 bottom; left:-5px;}
.widgetBoxDblue .rcBottom .br{ background-position:right bottom; left:5px;}


선하나 넣는 것이 이렇고 어렵고 험한 길인것이 참 갑갑합니다.. 

 


 

 

 

글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
아제나 휴지통 어떻게 비우나요? [1] 2010.04.24 by klaist
아이우에온 XE설치시 에러가 뜨는데 뭐가 문제인가요? [1] file 2010.04.24 by klaist
김재순 레이아웃에 로그인폼을 넣고 싶어요 [1] file 2010.04.24 by klaist
h83 게시판달기 [1] 2010.04.24 by klaist
딜러sg 카페에서 닉네임 변경 후 글쓰면..  
vonzone .htaccess 파일을 건드린 이후 IE6에서 홈페이지가 안 나옵니다 [1] 2010.04.23 by 현원
왕바우 xpresseditor 를 크게할수 없나요?  
새올 스팸(스펨)관련 질문 드립니다. [2] 2010.04.23 by k2man
영구만세 XE 옛 버전(1.1.4, 09.01.05 발표)은 어디? [1] 2010.04.23 by serendip
또별 비정상적 루트로 회원가입 차단방법 문의 [2] 2010.04.23 by serendip
서현보 컬러셋 다양한 깔끔한 게시판 없나요 ㅠㅠ [1] 2010.04.23 by 아카스
루빈카잔 초기 설치시 에러메세지 [1] file 2010.04.23 by 아제나
신승민279 XE 설치가 계속 맴돕니다. [1] file 2010.04.23 by 아제나
머구리 SSL인증서버 이용할려는데요 [1] 2010.04.23 by 백성찬
主從 대용량 파일 첨부가 안됩니다(300MB는 되고 500MB는 안됩니다. phpinfo에서 2000MB로 설정했습니다) [1] file 2010.04.23 by Hide_D
주하니 비회원도 추천 가능하게 [1] 2010.04.23 by 블루파티
토마토맨 xe 1.4.x 의 db 연관성구조와 설명 부탁드립니다. [1] 2010.04.23 by 현원
아아악내눈 게시판 설정-스킨관리에서 업로드한 배경이미지를 불러오는 방법을 알고 싶습니다. [1] file 2010.04.23 by 앙띠2
스카이피아 위젯 상단 공백생기는거 때문에 질문드립니다. [2] file 2010.04.23 by 앙띠2
스카이피아 위젯 상단 공백생기는 문제 입니다. 소스 수정시.. [1] file 2010.04.23 by 앙띠2
moog 회원정보 프로필에 나오는 목록 바꾸려면 어떻게 해야하나요? [1] 2010.04.23 by 블루파티
토마토맨 xe에서 게시판 생성, 메뉴생성등등을 할때 한글만 입력하고 저장하면 글이 깨집니다 [2] file 2010.04.23 by 앙띠2
바람과비 태그 검색에 관해서 질문드립니다. file  
ㅊㅊㅋ 게시판 데이터추출툴을 이용할려고 하는데요... file  
burster 1.4.0.11 업뎃이후........아 ! 미치겠네. [1] file 2010.04.23 by 현원
NOKORK 캐시파일 재생성시 Unexpected error 가 발생합니다. [1] file 2010.04.23 by 쥬시쿨
무실 현원님! 질문입니다. [1] 2010.04.23 by 현원
이진적사고 layout_info에 저장되어 있는 값을 랜덤으로 표현하고 싶습니다. [1] 2010.04.23 by 현원
정소영548 제로보드 구식 사용하다가 유학다녀왓는데 [1] 2010.04.23 by 현원
황비 진짜 고수님의 도움을 간절히 바랍니다. [1] file 2010.04.23 by 현원