테스트 사이트 - 개발 중인 베타 버전입니다

본문 링크에 자동 css 버튼 적용 채택완료

firsttiemuser 9년 전 조회 5,167

http://www.w3schools.com/css/css3_buttons.asp">http://www.w3schools.com/css/css3_buttons.asp 

 

위 사이트 페이지에서 hoverable button이라는 디자인 괜찮은 걸 발견했습니다.

 

일일이 지정하기가 번거로워 본문에 링크가 걸리면 자동으로 버튼이 적용되게하고 싶은데

 

</p><p>.button {</p><p>    background-color: #4CAF50; /* Green */</p><p>    border: none;</p><p>    color: white;</p><p>    padding: 16px 32px;</p><p>    text-align: center;</p><p>    text-decoration: none;</p><p>    display: inline-block;</p><p>    font-size: 16px;</p><p>    margin: 4px 2px;</p><p>    -webkit-transition-duration: 0.4s; /* Safari */</p><p>    transition-duration: 0.4s;</p><p>    cursor: pointer;</p><p>}</p><p> </p><p>.button1 {</p><p>    background-color: white;</p><p>    color: black;</p><p>    border: 2px solid #4CAF50;</p><p>}</p><p> </p><p>.button1:hover {</p><p>    background-color: #4CAF50;</p><p>    color: white;</p><p>}</p><p>

 

basic 스킨의 bo_v_atc 부분에 어떻게 적용하면 될까요...?

-webkit-transition-duration, transition-duration 이런부분도 포함시켜야하나요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

lib/common.lib.php 파일 본문링크 관련쪽 코드에서 class="button" 을 넣어주되

 

link_button 으로 클래스명을 바꿔주는게 가장 좋을듯하네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

f
firsttiemuser
9년 전
skin>board>basic>style.css에서 #bo_v_atc a {} 이런식으로 css만 추가해주는건 안되나요?
돼지코구뇽
9년 전
방법은 많은데 편법경우 그렇게 해도됩니다. 다만 내용에 링크가 있는것들은 모두 동일하게 css가 먹히게 됩니다. 즉 이미지도 <a 링크가 붙기 때문에 동일하게 적용될겁니다
f
firsttiemuser
9년 전
아.. 그생각까진 못했네요ㅠㅠ

혹시본문에 삽입된 이미지에는 image, 링크에는 anchor 이런식으로 자동으로 class나 id를 주도록 설정할수도 있나요??

댓글을 작성하려면 로그인이 필요합니다.

그누보드 게시판 스킨에서 버튼을 수정하신다면 참조하셔야할 부분은

 

btn_b01, btn_b02 class 부분 입니다.

관리자 부분은 btn_admin

</p><p><!-- 게시물 상단 버튼 시작 { -->
    <div id="bo_v_top">
        <?php
        ob_start();
         ?>
        <?php if ($prev_href || $next_href) { ?>
        <ul class="bo_v_nb">
            <?php if ($prev_href) { ?><li><a href="<?php echo $prev_href ?>" class="btn_b01">이전글</a></li><?php } ?>
            <?php if ($next_href) { ?><li><a href="<?php echo $next_href ?>" class="btn_b01">다음글</a></li><?php } ?>
        </ul>
        <?php } ?></p><p>        <ul class="bo_v_com">
            <?php if ($update_href) { ?><li><a href="<?php echo $update_href ?>" class="btn_b01">수정</a></li><?php } ?>
            <?php if ($delete_href) { ?><li><a href="<?php echo $delete_href ?>" class="btn_b01" onclick="del(this.href); return false;">삭제</a></li><?php } ?>
            <?php if ($copy_href) { ?><li><a href="<?php echo $copy_href ?>" class="btn_admin" onclick="board_move(this.href); return false;">복사</a></li><?php } ?>
            <?php if ($move_href) { ?><li><a href="<?php echo $move_href ?>" class="btn_admin" onclick="board_move(this.href); return false;">이동</a></li><?php } ?>
            <?php if ($search_href) { ?><li><a href="<?php echo $search_href ?>" class="btn_b01">검색</a></li><?php } ?>
            <li><a href="<?php echo $list_href ?>" class="btn_b01">목록</a></li>
            <?php if ($reply_href) { ?><li><a href="<?php echo $reply_href ?>" class="btn_b01">답변</a></li><?php } ?>
            <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02">글쓰기</a></li><?php } ?>
        </ul>
        <?php
        $link_buttons = ob_get_contents();
        ob_end_flush();
         ?>
    </div>
    <!-- } 게시물 상단 버튼 끝 --></p><p>
 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

f
firsttiemuser
9년 전
기존 게시판 스킨 버튼을 수정하기 보단 basic게시판 css에서 본문에 해당하는 부분 링크에만 버튼이 적용되게 하고싶은데 힘든가요 그건?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인