혹시 카테고리 별로 바탕색상이 다르게 나오는 방법이 있나요?

혹시 카테고리 별로 바탕색상이 다르게 나오는 방법이 있나요?

QA

혹시 카테고리 별로 바탕색상이 다르게 나오는 방법이 있나요?

답변 3

본문

832881567_1716523018.3037.png

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>

<!-- masonry 관련 설정 by 벌이뉨 2018.05.04 -->
<script src="<?=$board_skin_url?>/jquery.masonry.min.js?1"></script>
<script>
  $(function(){

    var $container = $('#container_k');
  
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box_k',
        isFitWidth: true,
        isAnimated: true,
        animationOptions: {
          duration: 200,
          easing: 'linear',
          queue: false
        }
      });
    });
  
  });
</script>
<style>
    #container_k {
      margin-bottom: 0px;
      border-radius: 0px;
      clear: both;
      -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
              border-radius: 0px;
    }
    
    .centered_k { margin: 0 auto; }
    
    .box_k {
        border : 0.1px solid #eaeaea;
        margin: 0.0em;
        padding: 0px;
        background: #fff;
        font-size: 11px;
        line-height: 1.4em;
        float: left;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
              
        -moz-box-shadow: 0px 0px 0px #ffffff;
        -webkit-box-shadow: 0px 0px 0px #ffffff;
        box-shadow: 0px 0px 0px #ffffff;
    }
    .col_k { width: 100px;}

    @media screen and (max-width:50px) {    
        .col_k { width: 10px;}
    }
    @media screen and (max-width:50px) {
        .col_k { width: 165px;}
    }
    @media screen and (max-width:50px) {
        .col_k { width: 137px;}    
    }
</style>
<!-- masonry 관련 설정 by 벌이뉨 2018.05.04 끝-->


<!-- 게시판 목록 시작 { -->
<div id="bo_gall" style="width:<?php echo $width; ?>">

    <?php if ($is_category) { ?>
    <nav id="bo_cate">
        <h2><?php echo $board['bo_subject'] ?> 카테고리</h2>
        <ul id="bo_cate_ul">
            <?php echo $category_option ?>
        </ul>
    </nav>
    <?php } ?>


    <!-- 게시판 페이지 정보 및 버튼 시작 { -->
  
    <!-- } 게시판 페이지 정보 및 버튼 끝 -->

    <form name="fboardlist"  id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
    <input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
    <input type="hidden" name="sfl" value="<?php echo $sfl ?>">
    <input type="hidden" name="stx" value="<?php echo $stx ?>">
    <input type="hidden" name="spt" value="<?php echo $spt ?>">
    <input type="hidden" name="sst" value="<?php echo $sst ?>">
    <input type="hidden" name="sod" value="<?php echo $sod ?>">
    <input type="hidden" name="page" value="<?php echo $page ?>">
    <input type="hidden" name="sw" value="">

    <?php if ($is_checkbox) { ?>
    <div id="gall_allchk">
        <label for="chkall" class="sound_only">현재 페이지 게시물 전체</label>
        <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
    </div>
    <?php } ?>

    <div id="container_k" class="centered_k">
        <?php for ($i=0; $i<count($list); $i++) {

            $classes = array();
            
            $classes[] = 'gall_li';
            $classes[] = 'col-gn-'.$bo_gallery_cols;

            if( $i && ($i % $bo_gallery_cols == 0) ){
                $classes[] = 'box_clear';
            }

            if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
                $classes[] = 'gall_now';
            }
         ?>
         
            <div class="box_k col_k"">
                <div class="gall_chk">
                <?php if ($is_checkbox) { ?>
                <label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>
                <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
                <?php } ?>
                <span class="sound_only">
                    <?php
                    if ($wr_id == $list[$i]['wr_id'])
                        echo "<span class=\"bo_current\">열람중</span>";
                    else
                        echo $list[$i]['num'];
                     ?>
                </span>
                </div>
                <div class="gall_con">
                    <?php
                        if ($list[$i]['is_notice']) { // 공지사항 
                           $img_content = "<a href='{$list[$i]['href']}'><span class='is_notice'>공지</span></a>";
                        } else {
                            $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

                            if($thumb['src']) {
                                $img_content = "<a href='{$list[$i]['href']}'><img src='{$thumb['src']}' alt='{$thumb['alt']}'></a>";
                            } else {
                                $img_content = '';
                            }
                        }
                         if($img_content != ""){
                     ?>
                            <div class="gall_img"> 
                                <?=$img_content?>
                            </div>
                    <?
                        }
                    ?>
                    <div class="gall_text_href">
                        <?php
                        // echo $list[$i]['icon_reply']; 갤러리는 reply 를 사용 안 할 것 같습니다. - 지운아빠 2013-03-04
                        if ($is_category && $list[$i]['ca_name']) {
                         ?>
                        <a href="<?php echo $list[$i]['ca_name_href'] ?>" class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></a>
                        <?php } ?>
                        <a href="<?php echo $list[$i]['href'] ?>" class="bo_tit">
                            <?php echo $list[$i]['subject'] ?>
                            <?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt">+ <?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
                            <?php
                            // if ($list[$i]['link']['count']) { echo '['.$list[$i]['link']['count']}.']'; }
                            // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }

                            if (isset($list[$i]['icon_new'])) echo rtrim($list[$i]['icon_new']);
                            if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
                            //if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
                            //if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
                            if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
                             ?>
                         </a>
                    </div>
                    <div class="gall_name">
                      
                        
                    </div>
                    
                </div>
            </div>

        <?php } ?>
        <?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
    </div>

     <?php if ($list_href || $is_checkbox || $write_href) { ?>
    <div class="bo_fx">
        <?php if ($list_href || $write_href) { ?>
        <ul class="btn_bo_user">
            <?php if ($is_checkbox) { ?>
            <li><input type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <li><input type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <li><input type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <?php } ?>
            <?php if ($list_href) { ?><li><a href="<?php echo $list_href ?>" class="btn_b01 btn">목록</a></li><?php } ?>
            <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02 btn">쓰기</a></li><?php } ?>
        </ul>
        <?php } ?>
    </div>
    <?php } ?>
    </form>
     
       <!-- 게시판 검색 시작 { -->
    <fieldset id="bo_sch">
        <legend>게시물 검색</legend>

        <form name="fsearch" method="get">
        <input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
        <input type="hidden" name="sca" value="<?php echo $sca ?>">
        <input type="hidden" name="sop" value="and">
        <label for="sfl" class="sound_only">검색대상</label>
        <select name="sfl" id="sfl">
            <option value="wr_subject"<?php echo get_selected($sfl, 'wr_subject', true); ?>>제목</option>
            <option value="wr_content"<?php echo get_selected($sfl, 'wr_content'); ?>>내용</option>
            <option value="wr_subject||wr_content"<?php echo get_selected($sfl, 'wr_subject||wr_content'); ?>>제목+내용</option>
            <option value="mb_id,1"<?php echo get_selected($sfl, 'mb_id,1'); ?>>회원아이디</option>
            <option value="mb_id,0"<?php echo get_selected($sfl, 'mb_id,0'); ?>>회원아이디(코)</option>
            <option value="wr_name,1"<?php echo get_selected($sfl, 'wr_name,1'); ?>>글쓴이</option>
            <option value="wr_name,0"<?php echo get_selected($sfl, 'wr_name,0'); ?>>글쓴이(코)</option>
        </select>
        <label for="stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
        <input type="text" name="stx" value="<?php echo stripslashes($stx) ?>" required id="stx" class="sch_input" size="25" maxlength="20" placeholder="+한눈에 안전보건 검색">
        <input type="submit" value="검색" class="sch_btn">
        </form>
    </fieldset>
    <!-- } 게시판 검색 끝 -->   
</div>

<?php if($is_checkbox) { ?>
<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>
<?php } ?>

<!-- 페이지 -->
<?php echo $write_pages;  ?>
<?php if ($is_checkbox) { ?>
<script>
function all_checked(sw) {
    var f = document.fboardlist;

    for (var i=0; i<f.length; i++) {
        if (f.elements[i].name == "chk_wr_id[]")
            f.elements[i].checked = sw;
    }
}

function fboardlist_submit(f) {
    var chk_count = 0;

    for (var i=0; i<f.length; i++) {
        if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
            chk_count++;
    }

    if (!chk_count) {
        alert(document.pressed + "할 게시물을 하나 이상 선택하세요.");
        return false;
    }

    if(document.pressed == "선택복사") {
        select_copy("copy");
        return;
    }

    if(document.pressed == "선택이동") {
        select_copy("move");
        return;
    }

    if(document.pressed == "선택삭제") {
        if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))
            return false;

        f.removeAttribute("target");
        f.action = "./board_list_update.php";
    }

    return true;
}

// 선택한 게시물 복사 및 이동
function select_copy(sw) {
    var f = document.fboardlist;

    if (sw == 'copy')
        str = "복사";
    else
        str = "이동";

    var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");

    f.sw.value = sw;
    f.target = "move";
    f.action = "./move.php";
    f.submit();
}
</script>
<?php } ?>
<!-- } 게시판 목록 끝 -->


 

 

이 질문에 댓글 쓰기 :

답변 3

카테고리가 많지 않고 생성주기가 자주 발생하지 않는다면

리스트가 반복되는 for 최 상단에

 

if($list[$i]['ca_name'] == '카테고리1'){

$ca_color = '#fff100';

} else if($list[$i]['ca_name'] == '카테고리2'){

$ca_color = '#cc0000';

}

 

이렇게 카테고리별로 컬러 변수 설정 후 해당 변수를 background 에 넣으시면됩니다.

 

 

다음 코드가 도움이 될지 모르겠습니다.


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
 
<style>
:root {
    --color-2: green;
    --color-3: orange;
}

#bo_cate li:nth-child(2) a { 
    border: 1px solid var(--color-2);
    color: var(--color-2);
}
#bo_cate li:nth-child(2) :is(a:hover,a:active) {
    background: var(--color-2);
    color: #fff;
}
#bo_cate li:nth-child(2) #bo_cate_on {
    background: var(--color-2);
    border: 1px solid var(--color-2);
    box-shadow: none;
}

#bo_cate li:nth-child(3) a { 
    border: 1px solid var(--color-3);
    color: var(--color-3);
}
#bo_cate li:nth-child(3) :is(a:hover,a:active) {
    background: var(--color-3);
    color: #fff;
}
#bo_cate li:nth-child(3) #bo_cate_on {
    background: var(--color-3);
    border: 1px solid var(--color-3);
    box-shadow: none;
}
</style>

게시물 바탕색 부분 문의입니다.

.box_k {
        border : 0.1px solid #eaeaea;
        margin: 0.0em;
        padding: 0px;

    요부분을 바꾸니 전체 바탕색이 변합니다  background: #fff;

        font-size: 11px;
        line-height: 1.4em;

카테고리별로 바탕색이 변하게 하는 질문입니다

고맙습니다

다음 코드가 도움이 될지 모르겠습니다.


<style>
.box_k.전체 { background-color: red; }
.box_k.건축 { background-color: green; }
.box_k.기계 { background-color: orange; }
</style>

...
<?php for ($i=0; $i<count($list); $i++) {
<div class="box_k col_k <?php echo $list[$i]['ca_name']; ?>">
...
</div>
<?php } ?>
...

배르만님 감사합니다~~ 아래 처럼해서 잘 적용해 보았습니다~


<style>
    .box_k.<?php echo $categories['0'];?> { background-color: #22a853;width:80px;font-size:0.7rem }
    .box_k.<?php echo $categories['1'];?> { background-color: #469c65;width:80px;font-size:0.7rem; }
    .box_k.<?php echo $categories['2'];?> { background-color: #31ada7;width:80px;font-size:0.7rem; }
    .box_k.<?php echo $categories['3'];?> { background-color: #1c89b0;width:80px;font-size:0.7rem; }
    .box_k.<?php echo $categories['4'];?> { background-color: #6c8cc4;width:80px;font-size:0.7rem; }
    .box_k.<?php echo $categories['5'];?> { background-color: #7a68b0;width:80px;font-size:0.7rem; }
</style>

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 61,301
© SIRSOFT
현재 페이지 제일 처음으로