카페24 인터넷쇼핑몰 제작_ 게시판디자인수정/게시판 색상변경
카페24 인터넷쇼핑몰 제작_ 게시판디자인수정/게시판 색상변경

여기서 사용하는 스킨은 카페24 무료스킨 중 카페24 디자인센터의 카페24 디자인 꽃입니다.



고객센터 게시판의 색상을 위에서 아래로 바꿔보겠습니다.



카페24 쇼핑몰 관리자 페이지에 접속을 합니다.
디자인관리-> HTML 디자인 설정-> 게시관리화면New-> 게시판 목록으로 들어갑니다.



페이지 모듈 리스트-> 글목록의 편집으로 들어갑니다.



HTML 편집에서 ctrl+F로 _title02를 찾아 모두 삭제합니다.



삭제한 후 쇼핑몰의 게시판을 확인해 보면 위와 같이 바뀐 것을 확인 할 수 있을 꺼에요.



이제 HTML 편집의 소스를 모두 복사하셔서 드림위버로 가지고 오세요.
아랫부분에 <tr>을 선택하시고 Properties에서 폰트 색상과 배경색상을 설정해 주세요.
그리고 B를 눌러 폰트는 두껍게 변경해 주세요.



그런 다음 <table>을 선택하시고 Rows를 3으로 변경해 주세요.



첫번 째 칸 <tr>을 선택하시고 ctrl+X로 잘라냅니다.



잘라내고 나면 두칸이 남는 데요.
 두번째 칸에 ctrl+V로 붙여넣기 하면 위와 같이 세칸이 생성되고 두번째 칸에 붙여넣어 질꺼에요.
첫번 째 줄 <tr>을 선택하고 Properties의 빨간색 테두리 친 아이콘을 선택해서 셀을 모두 합칩니다.
세번 째 줄도 똑같이 해주세요.



첫번째 줄 <tr>을 선택하시고 배경색상과 높이(H)를 설정합니다.
세번째 줄도 똑같이 해주세요.
저는 높이를 첫번째 줄은 2로 세번째 줄은 1로 설정했습니다.
그럼 아래 그림 처럼 두께가 다르게 설정 됩니다.
첫번째, 세번째 줄을 각각 클릭해서 소스 부분에 &nbsp;를 삭제해 주세요.
변경한 소스를 모두 복사해서 HTML 편집에 붙여넣기 합니다.



여기까지 하면 게시판이 위와같이 변경되어 있을 겁니다.
이제 글목록의 보라색 줄과 보라색 아이콘을 수정해 보겠습니다.



HTML 편집 아랫쪽 글목록의 편집을 선택합니다.

 


소스 아랫부분에 위와 같은 소스가 있을 꺼에요.
빨간 색 밑줄 친 부분을 삭제하고 bgcolor부분에 
bgcolor="색상값"을 입력해 주세요. 
 


마지막으로 HTML 편집 옆의 이미지등록으로 들어가셔서
위의 아이콘을 원하는 아이콘으로 바꿉니다.



위와 같이 게시판이 수정되었습니다.
원하는 색상으로 게시판 꾸며 보시길 바랍니다.






Posted by 맛있는세상

댓글을 달아 주세요

  1. 지인 2012.03.21 13:31  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다^^ 고맙습니다.

  2. 지인 2012.03.22 18:07  댓글주소  수정/삭제  댓글쓰기

    {{*
    파일 내용 : 게시판 글 목록
    변수 설명 :

    $c_3_u1title : 페이지타이틀
    $c_3_u1 : 글 목록
    $board_list_paging : 페이징
    $c_3_u1ps : 상품검색 option
    *}}
    {{$c_3_u1title}}

    <tr bgcolor="{{$tab_array.c_3.bgcolor}}">
    <td height="20">{{$c_3_u15}}</td>
    </tr>
    <tr bgcolor="{{$tab_array.c_3.bgcolor}}">
    <td height="10"><img src="{{$img_array.c_3.3.url}}" border="0"> {{$board_list_info[0]}}</td>
    </tr>
    <tr bgcolor="{{$tab_array.c_3.bgcolor}}">
    <td height="5">{{$c_3_u1e}}</td>
    </tr>
    <tr bgcolor="{{$tab_array.c_3.bgcolor}}">
    <td height="5">{{$g_3_u18}}</td>
    </tr>
    <form action="/front/php/b/board_write_a_new.php" method="post" name=list_form>
    <input type='hidden' name='mode' value='move_board_ck'>
    <input type='hidden' name='board_no' value='{{$board_no}}'>
    <input type='hidden' name='offset' value='{{$offset}}'>
    <input type='hidden' name='page' value='{{$page}}'>
    <input type='hidden' name='search' value='{{$search}}'>
    <input type='hidden' name='search_key' value='{{$search_key}}'>
    <tr bgcolor="{{$tab_array.c_3.th_bgcolor}}">
    <td height="30">
    <table border="0" cellspacing="0" cellpadding="0" width=100%>
    <tr align="center" bgcolor="#999999" style="display:{{$blog_display} color: #666; font-weight: bold;">
    <td height="2" colspan="17" class="font13_"></td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF" style="display:{{$blog_display} color: #666; font-weight: bold;">
    <td width="50" class="font13_">{{$ck_all}}번호</td>
    <td width="1" class="font13"></td>
    <td width="172" class="font13" style="display:{{$is_product_info}}">상품정보</td>
    <td width="1" class="font13" style="display:{{$is_product_info}}"></td>
    <td class="font13" style="display:{{$is_cate_info}}">카테고리</td>
    <td width="1" class="font13" style="display:{{$is_cate_info}}"></td>
    <td class="font13" style="display:{{$blog_display}}">제목</td>
    <td width="1" class="font13" style="display:{{$blog_display}}"></td>
    <td width="82" class="font13" style="display:{{$blog_display}}">작성자</td>
    <td width="1" class="font13" style="display:{{$use_date_display}}"></td>
    <td width="82" class="font13" style="display:{{$use_date_display}}">작성일</td>
    <td width="1" class="font13" style="display:{{$use_cnt_display}}"></td>
    <td width="46" class="font13" style="display:{{$use_cnt_display}}">조회</td>
    <td width="1" class="font13" style="display:{{$is_use_recom_display}}"></td>
    <td width="30" class="font13" style="display:{{$is_use_recom_display}}">추천</td>
    <td width="1" class="font13" style="display:{{$is_use_point_display}}"></td>
    <td width="70" class="font13" style="display:{{$is_use_point_display}}">평점</td>
    </tr>
    <tr align="center" bgcolor="#CCCCCC" style="display:{{$blog_display} color: #666; font-weight: bold;">
    <td height="1" colspan="17" class="font13_"></td>
    </tr>
    {{$c_3_u1}}
    </table>
    </td>
    </tr>
    {{$c_3_u13}}
    {{$c_3_u12}}
    </form>
    <tr bgcolor="{{$tab_array.c_3.td_bgcolor}}">
    <td height="20">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <form action="{{$PHP_SELF}}" method="post">
    <input type='hidden' name='board_no' value='{{$board_no}}'>
    <input type='hidden' name='offset' value='0'>
    <input type='hidden' name='page' value='1'>
    <input type='hidden' name='gallery_list_type' value='{{$gallery_list_type}}'>
    <tr>
    <td width="73" height="28" align="center">
    <select name="search_date">
    <option value="week" {{$search_selected.week}}>일주일</option>
    <option value="month" {{$search_selected.month}}>한달</option>
    <option value="month3" {{$search_selected.month3}}>세달</option>
    <option value="all" {{$search_selected.all}}>전체</option>
    </select>
    <select name="search">
    <option value='subject' {{$search_selected.subject}}>제목</option>
    <option value='content' {{$search_selected.content}}>내용</option>
    <option value='writer_name' {{$search_selected.writer_name}}>글쓴이</option>
    <option value='member_id' {{$search_selected.member_id}}>아이디</option>
    <option value='nick_name' {{$search_selected.nick_name}}>별명</option>
    {{$c_3_u1ps}}
    </select></td>
    <td width="367"><input type="text" name="search_key" value="{{$search_key}}" size="15"> <input type="image" src="{{$img_array.c_3.4.url}}" align="absmiddle" hspace="2"></td>
    <td width="220" align="right"><span style="display:{{$write_button_display}}"><a href='{{$default_href[1].write_href}}?{{$default_href[0]}}&gallery_list_type={{$gallery_list_type}}'><img src="{{$img_array.c_3.5.url}}" hspace="10" border='0'></a></span></td>
    </tr>
    </form>
    </table>


    열번도 넘게 연습중인데...저는 그대로 해서 붙여넣기만 하면 페이지 표시가 안되네요..뭐가 문제일까요...ㅠ

  3. 서웅 2012.09.07 10:03  댓글주소  수정/삭제  댓글쓰기

    잘 보고 있습니다. 감사합니다.
    그런데, 여기서는 드림위버란 것이 나오는데
    프로그램을 따로 갈아야 하는 것인가요?
    (드림위버 사용 않고 자체적으로 할 수 있는 방법은 없는지 궁금합니다.)

    • 맛있는세상 2012.09.07 20:35 신고  댓글주소  수정/삭제

      드림위버라는 프로그램이 있습니다.
      사용하지 않는다면 일일이 해당 소스를 알아서 쳐넣어야 하는데 초보분들에겐 굉장히 어려운 작업일 듯 합니다. 드림위버를 구하는 것이 더 쉬우실 거에요..

  4. 강추 2013.09.26 11:34  댓글주소  수정/삭제  댓글쓰기

    카페24쇼핑몰 구버젼 사용중인데요.

    게시판때문에 힘드네요. 나머지 코딩은 다했는데

    게시판에서 걸리네요.

    게시판 테이블 줄이는 방법좀 알려주세요. ㅠㅠ

    테이블 사이즈가 가로폭을 900으로 맞췄는데

    게시판사이즈는 1000으로 고정된듯해요. 가로폭을 100%에서 픽셀로 줄여도 bg색상이 계속 나오는 현상.

    고수님 알려주세요.