위젯 코드 생성 후 스타일 적용하기

앞서 말한적이 있지만

xe에서 위젯을 삽입하는 방법은 두가지가 있다.

하나는 페이지에서 페이지 수정을 눌러서 원하는 위젯을 선택해서 삽입하는 방법과

설치된 위젯에서 원하는 위젯을 선택해서 위젯의 소스코드를 만들어서 원하는 부분에 소스코드를 삽입하는 방법이다.

근데

위젯소스코드 생성시에는 스타일을 설정해줄수가 없다.

검색해보면 나오긴 할테지만 굳이 필요가 없었는데

찾아보니 어렵지 않더군.

먼저 위젯 스타일이 뭔지 한번 보자

위에 5개의 위젯이 있다.

모두 컨텐츠위젯 기본스킨이다.

단,,,,,상단 좌측은  스타일을 적용하지 않은 것이고

상단 우측은 심플스타일을 적용

하단은 그레이스타일에서 각기 다른 컬러셋을 적용한 모습이다.

암튼 

위젯코드를 생성하면

<img........ 이렇게 길게 나오는데 끝에다가

 widgetstyle="simple" ws_colorset="white" 요런 것들만 넣어주면 된다.

각각의 위젯스타일마다 설정하는 내용이 조금 다를수 있는데

위젯의 html 파일을 열어보면

<!--@if($widgetstyle_extra_var->ws_colorset == "black")-->

    {@ $_wsClassName = "black"}

<!--@elseif($widgetstyle_extra_var->ws_colorset == "white")-->

    {@ $_wsClassName = "white"}

<!--@else-->

    {@ $_wsClassName = $layout_info->colorset}

<!--@end-->

<!--%import("style.css")-->

{@ $ws_more_url = trim($widgetstyle_extra_var->ws_more_url); }

<div class="simpleWidgetStyle {$_wsClassName}">

    <h2>{$widgetstyle_extra_var->ws_title}</h2>

        <!--@if($ws_more_url)-->

            <!--@if(strtolower(substr($ws_more_url,0,4))=='http')-->

                <a href="{$ws_more_url}" class="widgetMoreLink">

            <!--@else-->

                <a href="http://{$ws_more_url}" class="widgetMoreLink">

            <!--@end-->

            {$widgetstyle_extra_var->ws_more_text}</a>

        <!--@end-->

    {$widget_content}

</div>

위에 붉게 표시한 ws.... 어쩌구 하는 것들이 설정 항목이 된다.

colorset은 이해가 될테고

title는 위젯 상단에 위젯이름이 표시되는 위에 캡쳐에선 sdsd란 것이 되겠고

more url 과 more text는 

캡쳐의 상단 우측에 있는 more란 글자 대신 들어갈 글자와 그 글자 클릭시 연결될 링크 주소를 말하는 것이다.

해서 결국 

소스코드를 생성한뒤

<img class="zbxe_widget_output" widget="content" skin="default" colorset="white" widget_sequence="4365" widget_cache="60" content_type="document" module_srls="107,111" list_type="normal" tab_type="none" markup_type="table" page_count="1" subject_cut_size="65" new_window="Y" option_view="title" show_browser_title="N" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="regdate" order_type="desc" thumbnail_type="crop"  widgetstyle="simple" ws_colorset="white" ws_title="Favorite" ws_more_url="http://gsm.dothome.co.kr/xe/fa" ws_more_text="more"/>

위에 반전된 부분처럼 추가해주면 된다는...