firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

사용자: 게시판스킨 읽기 댓글 보완

Browse Source
This commit is contained in:
whitedot
2013-02-04 18:11:20 +09:00
parent c55efc0d04
commit d87e67bcbf
3 changed files with 120 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/default.css
View File

@ -421,10 +421,10 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
.cnt_cmt {display:inline-block;margin:0 4px;color:#109ff1}
/* 게시판 읽기 */
#bo_v_title {padding:20px 20px 0;text-align:right}
#bo_v_title {padding:0 0 10px;font-weight:bold}
#bo_v {position:relative;margin-bottom:30px}
#bo_v a {color:#000;text-decoration:none}
#bo_v_h1 {padding:0 20px 5px;font-size:1.2em;line-height:1.4em}
#bo_v_h1 {padding:15px 20px 5px;font-size:1.2em;line-height:1.4em}
#bo_v_h1 span {display:inline-block;margin-right:5px;color:#109ff1}
#bo_v_info {padding:0 20px 15px;border-bottom:1px solid #f0f0f0}
#bo_v_info h2 {margin:0;padding:0;height:0;overflow:hidden}
@ -472,6 +472,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
#bo_vc article {margin-bottom:5px;padding:0 0 10px;border-bottom:1px dotted #ccc}
#bo_vc header {position:relative;padding:8px 0}
#bo_vc .sv_wrap {margin-right:15px}
.bo_vc_hdinfo {display:inline-block;margin:0 15px 0 5px}
#bo_vc header .icon_reply {position:absolute;top:8px;left:-20px}
#bo_vc h1 {width:0;height:0;overflow:hidden}
#bo_vc a {color:#000;text-decoration:none}

2
skin/board/neo/view.skin.php
View File

@ -2,8 +2,8 @@
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<p id="bo_v_title"><?=$board['bo_subject']?></p>
<div id="bo_v" class="cbg">
<p id="bo_v_title"><?=$board['bo_subject']?></p>
<h1 id="bo_v_h1">
<? if ($category_name) { // 분류가 지정되었다면 ?><span><?=($category_name ? "{$view['ca_name']} " : "");?></span><? } // 분류 출력 끝 ?>
<?=cut_str(get_text($view['wr_subject']), 70) // 글제목 출력?>

120
test.php
View File

@ -1,12 +1,124 @@
<!doctype html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테스트</title>
<title>Create a Custom Select Box with jQuery - Onextrapixel</title>
<style>
/*So how does this all work?
Firstly I put the search elements into a containing div. This div includes our grey background colour etc.*/
.search-container {
width: 925px;
height: 63px;
background-color: #e1e1e1;
position: relative;
}
/* Next I formatted the select box based on the design provided. This involved setting the width, height etc. Make sure you set the background colour to transparent so that our custom arrow will show later down the track.
We also need to include -webkit-appearance : none; to get it to work properly in Chrome. */
.search-box select {
width: 137px;
height: 50px;
border: 0;
background-color: transparent;
color: #4d4d4d;
font-family: 'oswaldregular', Calibri;
text-transform: uppercase;
font-size: 22px;
padding: 10px 0 5px 6px;
cursor:pointer;
-webkit-appearance: none;
}
/* The select boxes need to be positioned in line with each other, so to do this I added some CSS to our search-box class. */
.search-box {
display: inline-block;
height: 50px;
padding-top: 7px;
padding-left: 7px;
position:relative;
width:128px;
}
/* Because I cannot format the drop down directly using CSS, I want to hide it instead. To do this I put the select box in another containing div and set the width to less than what the width of the actual select bow is set to. I then set the overflow on my containing div to hidden. This will hide the drop down arrow.
Note: Each select box will have its own unique container as they are both different sizes. */
.size-container {
overflow: hidden;
width: 116px;
display: inline-block;
}
.bedrooms-container {
overflow: hidden;
width: 86px;
display: inline-block;
}
/* Since we have hidden the drop down arrow we need to replace it with our own arrow. To do this we need an image of our new arrow. Then add the arrow as a background image to our overflow div, setting position as right and also applying the background colour of what we want the select box to look like. */
.size-container {
overflow: hidden;
width: 116px;
display: inline-block;
background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}
.bedrooms-container {
overflow: hidden;
width: 86px;
display: inline-block;
background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}
/* Finally we need to apply some formatting to our labels. To do this I applied the following CSS. */
.search-container span {
line-height: 69px;
padding-left: 12px;
vertical-align: top;
font-family: 'oswaldregular',Calibri;
text-transform: uppercase;
color: #000000;
font-size: 22px;
}
</style>
</head>
<body>
<a href="#" title="타이틀"><img src="http://www.sir.co.kr/img/ad/rw_designmall.png" alt=""></a>
<div class="search-container">
<span>Size</span>
<div class="search-box">
<div class="size-container">
<select name="size" id="size">
<option value="0">ANY</option>
<option value="100">100-200</option>
<option value="200">200-300</option>
<option value="300">300-400</option>
<option value="400">400-500</option>
<option value="500">500-600</option>
<option value="600">600+</option>
</select>
</div>
</div><span style="padding-left:20px;">Bedrooms</span>
<div class="search-box" style="left:6px; width:98px;">
<div class="bedrooms-container">
<select name="bedrooms" style="width:103px;">
<option value="0">ANY</option>
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
<option value="5">FIVE</option>
<option value="6">SIX</option>
<option value="7">SEVEN+</option>
</select>
</div>
</div>
</div>
</body>
</html>