안녕하세요, style.css 작성 관련하여 질문이 있습니다.
플러그인 개발자의 도움을 받아서 function.php 수정하여 검색폼 추가하는 방법을 알게 되었습니다.
스타일을 수정하려고 하는데
기존의 style.css를 수정 또는 간단한 추가만 해봐서
기능이 새로 추가된 것은 어떻게 써야하는지 잘 모르겠습니다.
예를 들어,
.kboard-joobong_default-button-small:visited {
(수정내용)
}
이라면, .kboard-joo~ 부분을 어떻게 써야하는지 모르겠습니다.
검색폼 추가 관련하여는 다음과 같이 내용 작성했습니다.
add_action('woocommerce_after_shop_loop','bottom_search',15); function bottom_search(){ ?> <div id="bottom_form"> <form role="search" method="get" id="searchform"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" placeholder="Search for..." /> <input type="submit" id="searchsubmit" value="Search" /> <input type="hidden" name="post_type" value="product" /> </div> </form> </div> <?php }
<div id="bottom_form">
<form role="search" method="get" id="searchform">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="Search for..." />
<input type="submit" id="searchsubmit" value="Search" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>
</div>
이 태그 그준으로 CSS 를 적용하시려면 아래처럼 하시면 됩니다.
#bottom_form #searchsubmit { background-color: red; }
하지만 .kboard-joo~ 이건 어디를 말씀하시는지 모르겠네요.
소스보기 해서 찾아도 .kboard-joo~ 이 부분은 없습니다.
참고로 크롬 브라우저의 개발자도구(F12키)를 사용하시면 CSS 속성을 쉽게 테스트 하실 수 있습니다.