묻고답하기
content 위젯.. 이미지 위치 위로 오게 할 수 없나요?
2011.06.25 20:04
content 위젯 기본 스킨 (default)
쓰고 있는데요
아래의 사항 알려주시면 감사하겠습니다.
1. 제목 글자 크기 변경하는 법, Bold 적용하는 법
2. 내용형태: 이미지+제목_내용 선택했을 때 이미지가 왼쪽으로만 배치되던데요....이미지를 위쪽으로 배치하는 법, 오른쪽으로 배치하는 법
css를 수정하면 된다고 하는데....제가 초보자라 드림위버로 default의 widget.css을 열어서 코드를 보니까 어딜 어떻게 수정해야 하는지 모르겠더라고요....
자세히 알려주시면 답변으로 바로 채택해드리겠슴다!!
댓글 6
-
송동우
2011.06.26 03:02
-
아냐저자랴져여
2011.06.26 11:09
다른건 어려워서 포기했구요... 제목 굵게 나오는 것과 제목 크게 나오는 것...이것만이라도 하려고 하는데요...1번에서 말씀하신데로 했는데 제목이 굵게 표시되는데 font-size:~px 해도 전혀 제목 크기가 바뀌지 않습니다. 확인 부탁합니다 -
송동우
2011.06.26 11:53
질문자들이 항상 범하는 실수는
자신이 어떤 옵션을 선택해서 결과를 출력했는지를 말하지 않는다는 것입니다.
그냥 안된다는 결과만 올리기 때문에 답변자들은 수많은 경우의 수를 생각해야 하기 때문에
답변을 할 수가 없고, 하고픈 마음이 있어도 번거로워서 그냥 무시할 겁니다.
어떤 옵션으로 결과를 출력했느냐에 따라 수정을 해야할 소스가 다 틀리는 경우가 대부분입니다.
그래서
제가 답변을 달 때는 항상 어떤 것을 기준으로 했다라고 명시를 합니다.
위에 1번 질문을 보면 어떤 출력형식인지 나와있지 않아서
제가 답을 달때, 제목형식 출력이라고 제일 먼저 올리고 답을 달았습니다.
그리고 답을 달기 전에 항상 테스트를 하고 확인을 합니다.
질문자가 답변자의 답을 보고 따라 했음에도 안되는 이유는
다른 소스를 수정하기 때문입니다.
질문자가 정확한 정보를 제공하지 않는한 답변자의 답은 정확해 질 수가 없습니다.
그냥 css 파일을 수정하세요 라고 밖에 할 수 없지않겠습니까.....
의견란에 확인을 해 달라고 했는데
제가 할 수 있는 확인은 제가 올린 답에 오류가 없는지를 확인하는 것은 가능하지만
질문자의 상황에서 왜 안되는 지는 제가 알 수가 없겠죠....
그냥 다른 소스를 수정한 것 같다..... 다시 한 번 잘 해 보시라는 말 밖에는........
잘 안되시면
다시 한 번 답변이 가능하도록 어떤 출력형태의 옵션을 선택했는지를 올려주시기 바랍니다. -
아냐저자랴져여
2011.06.26 14:34
마지막으로 질문합니다.
content 위젯 version 0.1
content 위젯 기본 스킨 (default)
컬러셋: 흰색바탕용
추출대상:게시물
내용형태: 제목
탭형태: 없음
html출력방식: Table
표시항목및 순서: title
게시판 이름표시:하지않음
나머지는 모두 기본설정입니다.
제가 혹시몰라서 content위젯 모두 삭제하고 다시 설치해서 해봤는데요 역시 안됩니다.
bold는 적용되는데 font-size 는 적용이 안됩니다. 글씨가 커지는게 아니라 글자 상하간격만 불규칙적(?)으로 늘어납니다.
뭐가 문제인지 모르겠네요..
괜찮으시다면 직접 수정하신 widget.css 파일을 보내주시면 감사하겠습니다.
berlinera@naver.com
-
아냐저자랴져여
2011.06.26 14:38
첨부된 이미지 보시면 위에가 font 크기를 24px로 조정했을때고요 아래가 그냥 볼드만 적용했을때입니다.
글자크기는 안변하고 줄간격만 이상하게 변했습니다. -
송동우
2011.06.26 14:50
똑같은 조건으로 테스트를 했습니다.
xe - widgets - content - skins - default - css - widget.css 여기 경로 확인하시고
저는 처음 답글을 단 그대로 하니까 글이 커집니다.
왜 안되는지 모르겠네요.....
일단 제가 수정한 widget.css를 전체 올립니다.
@charset "utf-8";.floatLeft{ float:left;}
.floatRight{ float:right;}
.clearLeft{ clear:left;}
.clearRight{ clear:right;}.widgetContainer .open{ display:block !important;}
.widgetContainer a{ text-decoration:none;}
.widgetContainer a:hover,
.widgetContainer a:active,
.widgetContainer a:focus{ text-decoration:underline;}
.widgetContainer img{ border:0;}
.widgetContainer em{ position:relative; line-height:1; display:inline-block; margin:-5px 0; *padding:0 1px; font-style:normal;}
.widgetContainer form{ margin:0; padding:0;}
.widgetContainer fieldset{ border:0; margin:0; padding:0;}.widgetTabA{ position:relative; margin:0 0 10px 0; padding:0; *zoom:1; border-bottom:2px solid;}
.widgetTabA:after{ content:""; display:block; clear:both;}
.widgetTabA li{ float:left; margin-right:1px; list-style:none; background-repeat:no-repeat; background-position:0 0;}
.widgetTabA li.active{ background-position:0 -30px;}
.widgetTabA li a{ position:relative; left:2px; float:left; height:20px; padding:8px 15px 0 15px; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position:right 0;}
.widgetTabA li.active a{ background-position:right -30px; font-weight:bold; letter-spacing:-1px;}ul.widgetA { margin:0; padding:0; list-style:none; }
ul.widgetA li { margin:0; padding:0; list-style:none; }
.widgetTableA { width:100%; font-size:12px; position:relative; border:0;}
.widgetTableA td{ border:0; line-height:1.5; white-space:nowrap; vertical-align:top; padding:1px 5px 1px 5px; font-weight:bold; font-size:18px;}
.widgetTableA td.title{ width:100%; white-space:normal;}
.widgetTableA td .board{ padding-right:5px;}
.widgetTableA td .notice{ padding-right:5px;}
.widgetTableA td .category{ padding-right:5px; font-weight:normal;}
.widgetTableA td .replyNum a{ font:10px Tahoma;}
.widgetTableA td .trackbackNum a{ font:10px Tahoma;}
.widgetTableA td.summary{ white-space:normal;}
.widgetTableA td.time{ font-size:11px; font-family:Tahoma;}.widgetTabC{ margin:0; padding:0; font-size:12px; border-top:1px solid;}
.widgetTabC li{ list-style:none; border-bottom:1px solid; *zoom:1; margin-bottom:1px;}
.widgetTabC li a{ display:block; padding:7px 0 6px 10px; text-decoration:none; *zoom:1;}dl.widgetDivider{ margin:0;}
dl.widgetDivider dt{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
dl.widgetDivider dd{ display:none; margin:0;}.widgetNavigator{ margin:0; padding:0; text-align:right; clear:both;}
.widgetNavigator li{ list-style:none; display:inline;}
.widgetNavigator li button{ width:16px; height:16px; padding:0; background-color:transparent; background-image:url(../img/white/buttonWidgetNavigation.gif); border:1px solid #999; cursor:pointer;}
.widgetNavigator li button.prev{ background-position:left center; *background-position:-1px center;}
.widgetNavigator li button.next{ background-position:right center; *background-position:13px center;}
.widgetNavigator li button span{ position:absolute; display:block; width:0; height:0; overflow:hidden; visibility:hidden;}.widgetGalleryA{ position:relative; margin:0; padding:0; font-size:12px; line-height:1.5; *zoom:1; _margin-right:-100%;}
.widgetGalleryA:after{ content:""; display:block; clear:both;}
.widgetGalleryA li { float:left; overflow:hidden; width:100px; margin-right:28px; margin-bottom:15px; padding-bottom:0; white-space:nowrap; list-style:none;}
.widgetGalleryA li.clearRight{ margin-right:0;}
.widgetGalleryA li .thumb{ display:block; position:relative; width:100px; height:75px; margin-bottom:10px; overflow:hidden; text-decoration:none;}
.widgetGalleryA li .thumb img{ display:block; position:relative; width:100%;}
.widgetGalleryA li .thumb .imgNone{ display:block; position:relative; width:100%; height:70%; padding-top:30%; background:#eee; text-align:center; cursor:pointer; color:#000;}
.widgetGalleryA li .thumb .board{ display:block; position:absolute; width:100%; top:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6; filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetGalleryA li .thumb .category{ display:block; position:absolute; width:100%; bottom:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6; filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetGalleryA li .author{ display:block;}
.widgetGalleryA li .replyNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetGalleryA li .trackbackNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetGalleryA li .date{ font:11px Tahoma;}
.widgetGalleryA li .hour{ font:11px Tahoma;}/* widgetThumb */
.widgetThumb{ position:relative; margin:0; text-align:center; font-size:12px; line-height:1.5;}
.widgetThumb .thumb{ display:block; margin-bottom:5px; position:relative; *zoom:1; text-decoration:none; _float:left;}
.widgetThumb .thumb img{ display:block; width:100%;}
.widgetThumb .thumb .imgNone{ display:block; position:relative; width:100%; padding-top:30px; padding-bottom:50px; background:#eee; text-align:center; cursor:pointer; color:#000;}
.widgetThumb .thumb .category{ display:block; position:absolute; width:100%; bottom:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6; filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetThumb .title{ display:block;}
.widgetThumb .author{ display:block;}
.widgetThumb .date{ font-size:11px; font-family:Tahoma;}
.widgetThumb .hour{ font-size:11px; font-family:Tahoma;}.widgetZineA{ position:relative; margin:0; padding:0; font-size:12px; line-height:1.5; *zoom:1;}
.widgetZineA:after{ content:""; display:block; clear:both;}
.widgetZineA li { list-style:none; clear:both; margin-bottom:10px; padding-bottom:10px; *zoom:1; overflow:hidden; }
.widgetZineA li p{ margin:0; padding:0;}
.widgetZineA li p.thumbArea{ position:relative; float:left; width:100px; margin-right:-100px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:120px; margin-bottom:4px;}
.widgetZineA li p.titleArea .board{ padding-right:5px;}
.widgetZineA li p.text{ margin-left:120px; margin-bottom:4px;}
.widgetZineA li p.authorArea{ margin-left:120px;}
.widgetZineA li .thumb{ display:block; position:relative; width:100px; height:75px; text-decoration:none; overflow:hidden;}
.widgetZineA li .thumb img{ position:relative; width:100%;}
.widgetZineA li .thumb .imgNone{ display:block; position:relative; width:100%; height:80%; padding-top:20%; background:#eee; text-align:center; cursor:pointer; color:#000;}
.widgetZineA li .thumb .category{ display:block; position:absolute; width:100%; bottom:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6; filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetZineA li .category{ padding-right:5px; font-weight:normal;}
.widgetZineA li .title{ font-weight:bold;}
.widgetZineA li .replyNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetZineA li .trackbackNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetZineA li .author{ margin-right:10px;}
.widgetZineA li .date{ font:11px Tahoma;}
.widgetZineA li .hour{ font:11px Tahoma;}.widgetTabC{ border-color:#e5e5e5;}
.widgetTabC li{ border-color:#e5e5e5; background:#f8f8f8;}
.widgetTabC li a{ color:#333;}
.widgetTabC li a:hover,
.widgetTabC li a:active,
.widgetTabC li a:focus{ background:#eee;}
.widgetTabA{ border-color:#666;}
.widgetTabA li,
.widgetTabA li a{ background-image:url(../img/white/buttonWidgetTab.gif);}
.widgetTabA li a{ color:#333;}.widgetA a.board { color:#333; padding-right:5px; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetA .notice{ color:#ff1a1a; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetA .category{ color:#333; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetA .replyNum a{ color:#ff1a1a;}
.widgetA .trackbackNum a{ color:#66c;}
.widgetA .author { color:#333;}
.widgetA .date{ color:#333;}
.widgetA .hour{ color:#888;}.widgetTableA td.title a{ color:#333;}
.widgetTableA td .board{ color:#333; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetTableA td .notice{ color:#ff1a1a; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetTableA td .category{ color:#333; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetTableA td .replyNum a{ color:#ff1a1a;}
.widgetTableA td .trackbackNum a{ color:#66c;}
.widgetTableA td .author { color:#333;}
.widgetTableA td .date{ color:#333;}
.widgetTableA td .hour{ color:#888;}.widgetGalleryA li .title{ color:#333;}
.widgetGalleryA li .replyNum a{ color:#ff1a1a;}
.widgetGalleryA li .trackbackNum a{ color:#66c;}
.widgetGalleryA li .author{ color:#333;}
.widgetGalleryA li .date{ color:#333;}
.widgetGalleryA li .hour{ color:#888;}.widgetThumb{ color:#333;}
.widgetThumb a{ color:#333;}
.widgetThumb .hour{ color:#888;}.widgetZineA li .board{ color:#333; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetZineA li .title{ color:#666;}
.widgetZineA li .replyNum a{ color:#ff1a1a;}
.widgetZineA li .trackbackNum a{ color:#66c;}
.widgetZineA li .author{ color:#333;}
.widgetZineA li .category{ color:#333; background:url(../img/white/lineTextDiv.gif) no-repeat right center;}
.widgetZineA li .date{ color:#333;}
.widgetZineA li .hour{ color:#888;}
.widgetZineA li .text{ color:#888;}.widgetContainer.black .widgetTabC{ border-color:#7f7f7f;}
.widgetContainer.black .widgetTabC li{ border-color:#7f7f7f; background:#222;}
.widgetContainer.black .widgetTabC li a{ color:#999;}
.widgetContainer.black .widgetTabC li a:hover,
.widgetContainer.black .widgetTabC li a:active,
.widgetContainer.black .widgetTabC li a:focus{ background:#333;}
.widgetContainer.black .widgetTabA{ border-color:#999;}
.widgetContainer.black .widgetTabA li,
.widgetContainer.black .widgetTabA li a{ background-image:url(../img/black/buttonWidgetTab.gif);}
.widgetContainer.black .widgetTabA li a{ color:#999;}.widgetContainer.black .widgetTableA td.title a{ color:#999;}
.widgetContainer.black .widgetTableA td .board{ color:#999; background:url(../img/black/lineTextDiv.gif) no-repeat right center;}
.widgetContainer.black .widgetTableA td .notice{ color:#ff1a1a; background:url(../img/black/lineTextDiv.gif) no-repeat right center;}
.widgetContainer.black .widgetTableA td .category{ color:#999; background:url(../img/black/lineTextDiv.gif) no-repeat right center;}
.widgetContainer.black .widgetTableA td .replyNum{ color:#ff1a1a;}
.widgetContainer.black .widgetTableA td .trackbackNum{ color:#66c;}
.widgetContainer.black .widgetTableA td .author { color:#999;}
.widgetContainer.black .widgetTableA td .date{ color:#999;}
.widgetContainer.black .widgetTableA td .hour{ color:#888;}.widgetContainer.black .widgetGalleryA li .title{ color:#999;}
.widgetContainer.black .widgetGalleryA li .replyNum a{ color:#ff1a1a;}
.widgetContainer.black .widgetGalleryA li .trackbackNum a{ color:#66c;}
.widgetContainer.black .widgetGalleryA li .author{ color:#999;}
.widgetContainer.black .widgetGalleryA li .date{ color:#999;}
.widgetContainer.black .widgetGalleryA li .hour{ color:#888;}.widgetContainer.black .widgetThumb{ color:#999;}
.widgetContainer.black .widgetThumb a{ color:#999;}
.widgetContainer.black .widgetThumb .hour{ color:#888;}.widgetContainer.black .widgetZineA li .board{ color:#999; background:url(../img/black/lineTextDiv.gif) no-repeat right center;}
.widgetContainer.black .widgetZineA li .title{ color:#999;}
.widgetContainer.black .widgetZineA li .replyNum a{ color:#ff1a1a;}
.widgetContainer.black .widgetZineA li .trackbackNum a{ color:#66c;}
.widgetContainer.black .widgetZineA li .author{ color:#999;}
.widgetContainer.black .widgetZineA li .category{ color:#999; background:url(../img/black/lineTextDiv.gif) no-repeat right center;}
.widgetContainer.black .widgetZineA li .date{ color:#999;}
.widgetContainer.black .widgetZineA li .hour{ color:#888;}
.widgetContainer.black .widgetZineA li .text{ color:#888;} -
아냐저자랴져여
2011.06.26 17:02
xe다시 설치하고 해보니까 됩니다~!!
1.
출력을 내용형태가 무엇인지 나와있지 않아서 제목으로 했습니다.
xe - widgets - content - skins - default - css - widget.css 열고
line 28 쯤에
.widgetTableA td{ border:0; line-height:1.5; white-space:nowrap; vertical-align:top; padding:1px 5px 1px 5px; font-weight:bold; font-size:18px;}
붉은색이 추가된 부분
2.
오른쪽 배치
xe - widgets - content - skins - default - image_title_content.html 열고
line 6 쯤에
<p class="thumbArea" style="width:{$widget_info->thumbnail_width}px;margin-right:-{$widget_info->thumbnail_width}px;">
붉은색 부분 삭제
line 23 쯤에
<p class="titleArea" style="margin-left:{$widget_info->thumbnail_width+20}px;">
붉은색 부분 삭제
xe - widgets - content - skins - default - css - widget.css 열고
line 83 쯤에
.widgetZineA li p.thumbArea{ position:relative; float:left; width:100px; margin-right:-100px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:120px; margin-bottom:4px;}
이 부분을
.widgetZineA li p.thumbArea{ position:relative; float:right; width:100px; margin-right:0px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:0px; margin-bottom:4px;}
이렇게 변경
위쪽 배치
xe - widgets - content - skins - default - image_title_content.html 열고
line 23 쯤에
<p class="titleArea" style="margin-left:{$widget_info->thumbnail_width+20}px;">
붉은 부분 삭제
xe - widgets - content - skins - default - css - widget.css 열고
.widgetZineA li p.thumbArea{ position:relative; float:left; width:100px; margin-right:-100px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:120px; margin-bottom:4px;}
이 부분을
.widgetZineA li p.thumbArea{ position:relative; width:100px; margin-right:-100px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:0px; margin-bottom:4px;}
이렇게 변경
기본적인 것만 설명한 겁니다.
세부적인 조정은(불필요한 것 없애고, 필요한 것 추가하는 것) 필요에 따라 하시면 됩니다.
그리고 답해주면 채택해주겠다는 마지막 코멘트는 달지 않는 것이 좋다고 생각합니다.