SAGE 쓰는분을 위한 CSS...(수정)

[getmisty]

기본으로 잡혀있는 CSS는 한글이 너무 작게 나와서 이리저리 방황하다가

깨끗한걸 하나 구했습니다...

기본보다 훨씬 산뜻해서 좋네용 ^^

코드 복사하셔서 *.css 저장하시고 세이지 옵션에서 CSS바꾸기 해주시면 됩니다

지금 게시판은 RSS 지원안하는건지 안되네요 +_+

출처 : http://fls.moo.jp/fswiki/?p=RRP+Contents+Area


* 수정2 - 이미지크기 제한 추가했습니다

Code: Select all

html * {
	-moz-box-sizing: border-box;
}

html {
	line-height: 1.3; 
	background-color: #FFF;
}
				
body {
	margin: 0px;
	color: #222;
}

a:link		{ text-decoration: none; color: #DD2B13; }
a:visited	{ text-decoration: none;  color: #955322; }
a:hover		{ text-decoration: underline; }
a:active	{ text-decoration: none; }

p.item-desc a:link { color: #029; }

#rss-header {
	-moz-border-radius: 10px;
	background-color: #EEEAE4;
	border: 1px solid #cccccc;
	padding: 6px 8px;
	margin: 10px 2%;
}

#rss-title {
	font-size: 1.1em;
	line-height: 1;
	margin: 0px;
	padding: 0px;
}

#rss-desc {
	font-size: 0.75em;
	margin: 0px;
	padding: 5px 0px 0px 20px;
}

div.item {
	-moz-border-radius: 10px;
	background-color: #fafafa;
	border: 2px solid #EEEAE4;
	width: 47%;
	min-width: 14em;
	margin: 0px 0px 8px 2%;
	padding: 0px;
	float: left;
}

h2.item-title {
	background-color: #EEEAE4;
	font-size: 0.75em;
	font-weight: normal;
	line-height: 1.1;
	margin: 0px;
	padding: 5px 5px 8px 8px;
}

span.item-ordinal {
	padding-right: 0.2em;
}

div.item-desc {
	min-height: 6em;
	font-size: 0.75em;
	margin: 0px;
	padding: 8px 10px;
}
div.item-pubDate
/* Date which it was released */
{
	/* background-color: #FF0000; */ /* Uncomment to see where it is */
	font-size: x-small;
	margin: 0px;
	padding: 8px 10px;
	width: 80%;
	float: left;
}

div.item-technorati
/* Bottom cell where respond bubble is */
{
	/* background-color: #00FF00; */ /* uncomment to see where it is */
	font-size: x-small;
	margin: 0px;
	padding: 8px 10px;
	width: 20%;
	float: right;
	text-align: right;
}

img { 
max-width: 100%; 
height: auto; 
} 

[getmisty]

예전버젼용 CSS 라서

날짜와 Technorati 부분이 누락된네요

사이트 뒤져서 수정했습니다...

훨씬 보기 편하고 이쁘네요 =ㅁ=;


파이어폭스 쓸수록 매력적인 브라우져 같습니다 +_+

[나루]

img {
max-width: 100%;
height: auto;
}


마지막에 이 코드도 추가하셔야 할 듯. Sage 새 버전의 css에 추가된 코드입니다. 그림이 너무 커지는 걸 막아 주네요. ^^;;;

[getmisty]

잽싸게 수정했습니다..

조언 감사합니다^^

[z]

감사합니다. 정말 모질라 포럼의 계신 분들 때문에 파폭 즐겁게 사용합니다.

[miLRain]

글씨 작아서 불편했는데, 넘 좋군요

[spaceplus]

유용한 정보입니다..굿..

[박병규]

덕분에 sage 유용하게 써오면서 가장 답답했던게 해결 됐네요..

정말 좋은 기능이었는데 글자가 넘 작아서 거의 있으나 마나한 기능밖에 안되었었는데 덕분에 속이 다 후련하네요..

감사합니다~

[초보손님-999]

oliver님의 sage_oliverne.css를 사용해 왔는데 바꿔보니 보기 좋습니다.

다만 Item이라고 해야하나요...? 박스 폭이 너무 좁아 좌,우로 나뉘어 정렬이
좀 어수선 한 면이 있어 수정을 해보았습니다. 취향 문제이겠지만요...^^

Code: Select all

div.item {
   -moz-border-radius: 10px;
   background-color: #fafafa;
   border: 2px solid #EEEAE4;
/* 본래의 박스 폭   width: 47%; */
   width: 96%;
/* 픽셀 단위로 조정  width: 770px; */
   min-width: 14em;
/* 헤더의 마진을 수정하면 아이템의 마진도 같이 수정 */
   margin: 0px 0px 8px 2%;
   padding: 0px;
   float: left;
}

주석 처리 한 부분(47%)이 본래의 값입니다.
픽셀단위로도 조정이 가능하지만, 해상도에 관계없이 고정되는 문제가 있기 때문에
%값이 좋을 듯 합니다.

96%로 한것은 헤더의 마진이 2%(좌우합은 4%)이기 때문입니다.
헤더 마진을 1%로 변경하면 98%가 되겠죠. 헤더의 마진을 수정하면
div.item의 마진도 같이 수정 해줘야합니다.

Code: Select all

#rss-header {
   -moz-border-radius: 10px;
   background-color: #EEEAE4;
   border: 1px solid #cccccc;
   padding: 6px 8px;
/* 좌,우 합계= 4%, 헤더의 마진을 수정하면 아이템의 마진도 같이 수정 */ 
   margin: 10px 2%;
}

[톱아보다]

CSS 공유 시장이 있습니다.

다양하고 이쁜 CSS 들 많습니다.

저는 SynergySage2를 사용합니다.

http://sage.wikicities.com/wiki/Feed_Style_Sheets

[초보손님-999]

Code: Select all

width: 770px;

폭을 강제 지정해야 하는 이유가 있나요?
그냥 놔두면 알아서 맞추던데요...^^
저렇게 고정해두면 해상도가 바뀔 경우, 수정해줘야 할것 같은데요.

SynergySage2도 좋네요. 방문한 URL 색깔 안바뀌는 것과
width, padding, background color(전 색온도가 따뜻한 쪽이 좋거든요)
정도 수정해서 사용해야겠습니다. css에 대해 전혀 모르니 삽질 끝에
어느 정도 맘에 들게 맞췄습니다.

[초보손님-999]

http://sage.wikicities.com/wiki/Feed_St ... nergySage2

똥색 좋아하시는 분을 위해서...^^

Code: Select all

/*
 * simple-and-clean.css - CSS2 style sheet
 */

body {
/* font에 Gulim 추가 */
    font: 75% Tahoma, Arial, sans-serif, Gulim;
    background: White;
	background-image:url(http://www.synergymx.com/pub/sage_synergy2_back.gif);
	background-repeat:repeat-x;
    color: Black;
/* 상하,좌우 마진을 줄임
    padding: 1em; */
    padding: 2px;
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: Black;
    clear: left;
/* font에 Gulim 추가 */
    font: 100% Tahoma, Arial, sans-serif, Gulim;
    margin: 0;
    padding-left: 0.5em;
}

h1 {
    font-size: 150%;
    border-bottom: none;
    text-align: right;
}

h2 {
    font-size: 130%;
}

h3 {
    font-size: 120%;
    padding-left: 1.0em;
}

h4 {
    font-size: 110%;
    padding-left: 1.5em;
}

p {
    text-align: justify;
    line-height: 1.5em;
}

a {
    text-decoration: underline;
/* 방문했던 URL을 다른색으로 표시 못함
	color:#3366CC; */
}

code,
blockquote,
pre {
    font-size: 120%;
    padding: 1em;
    border: 1px solid Black;
    color: Black;
    background-color: #dedede;
}

#gallerycomment {
    text-align: center;
}

#rss-desc {
    text-align: left;
	padding:0 0 6px 0;
    font-size: 12px;
}
#rss-title {
    text-align: left;
	padding:0px;
/* 해상도에 맞게 폭을 자동으로 조정
	width:700px; */
	text-decoration:none;
	border-bottom:1px #CCC solid;
	font-size:24px;
}
#rss-link {
	text-decoration:none;
	}
.item-pubDate {
    text-align: right;
    padding: 1px;
    font-size: smaller;
}

.item-technorati {
    display: none;
}

li {
    margin-bottom: 1em;
}

div.item-desc {
/* item과의 하단 마진을 줄임 */
    margin-bottom: 1em;
    margin-bottom: 1px;
	border:1px solid #CCCCCC;
	background-color:#f2f2f2;
	padding:10px;
	text-align: left;
/* radius를 .item과 같게 3에서 10으로 수정 */
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
}

.item {
    margin-bottom: 1em;
	border:1px solid #CCCCCC;
/* item 배경색을 따듯한 색으로 바꿈
	background-color:#fff; */
	background-color: #EEEAE4;
	padding:2px;
/* 해상도에 맞게 폭을 자동으로 조정
	width:700px; */
	text-align: left;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
}

.item-title {
	padding:6px;
	color:#3366CC;
	font-size:14px;
	text-align: left;
}

[종스비]

위의 코드에 올리버님의 css의 장점을 따서 추가 수정했습니다.

추가된 코드
1.acronym, abbr, blockquote, cite, code 태그를 강조합니다.
2.PHP BB의 인용문(quote)을 강조합니다.
3.태터툴스 등에서 쓰이는 more/less 기능으로 가려진 본문을 강제로 보이게 합니다.
4.태터툴스가 쓰는 잘못된 태그로 첨부 이미지가 작아지거나 사라지는 현상을 강제로 수정합니다.
5.embed 태그를 가려서 무분별한(?) 동영상, 음악 재생을 막습니다.
6.Technonari (우측의 돋보기 아이콘)을 안보이게 했습니다.

모질라포럼을 Sage로 RSS 구독하면 인용문이나 들여쓰기같은 태그처리가
돼있음을 확인하실수 있습니다.

html * {
-moz-box-sizing: border-box;
}

html {
line-height: 1.3;
background-color: #FFF;
}

body {
margin: 0px;
color: #222;
}

a:link { text-decoration: none; color: #DD2B13; }
a:visited { text-decoration: none; color: #955322; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }

p.item-desc a:link { color: #029; }

#rss-header {
-moz-border-radius: 10px;
background-color: #EEEAE4;
border: 1px solid #cccccc;
padding: 6px 8px;
margin: 10px 2%;
}

#rss-title {
font-size: 1.1em;
line-height: 1;
margin: 0px;
padding: 0px;
}

#rss-desc {
font-size: 0.75em;
margin: 0px;
padding: 5px 0px 0px 20px;
}

div.item {
-moz-border-radius: 10px;
background-color: #fafafa;
border: 2px solid #EEEAE4;
width: 47%;
min-width: 14em;
margin: 0px 0px 8px 2%;
padding: 0px;
float: left;
}

h2.item-title {
background-color: #EEEAE4;
font-size: 0.75em;
font-weight: normal;
line-height: 1.1;
margin: 0px;
padding: 5px 5px 8px 8px;
}

span.item-ordinal {
padding-right: 0.2em;
}

div.item-desc {
min-height: 6em;
font-size: 0.75em;
margin: 0px;
padding: 8px 10px;
}
div.item-pubDate
/* Date which it was released */
{
/* background-color: #FF0000; */ /* Uncomment to see where it is */
font-size: x-small;
margin: 0px;
padding: 8px 10px;
width: 80%;
float: left;
}

div.item-technorati
/* Bottom cell where respond bubble is */
{
display : none;
}

img {
max-width: 100%;
height: auto;
}

acronym, abbr {
color: #EF7314;
font-weight: bold;
border-bottom: 1px dotted #EF7314;
cursor: help;
}


blockquote {
background-color: #f5f5f5;
border-left: 3px solid #ccc;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 14px 20px;
padding: 5px;
}

cite {
font-style: italic;
}

code {
color: #AA5533;
}

/* DO NOT show EMBED tag */
embed {
display: none;
}

/* For PHPBB quote*/
td.quote {
background-color: #f5f5f5;
padding: 5px;
border: 1px solid #ddd;
}


/* SHOW ALL hidden(more/less) layers */
div.item-desc div {
display: block !important;
}

/* Tattertools is Korean Blog Tool. */
/* RESIZE undefined Tattertools' TABLE WIDTH to view attached images with correct size */
div.item-desc td.cap1 {
/* !HERE! */
width: 500px;
}
/* End : Tattertools */

위의 코드를 복사해서 css파일로 만들어서 사용하세요~~

[종스비]

getmisty님의 코드와 oliverne님의 코드의 장점을 합친 코드입니다.
무단 도용해서 죄송

[솔개]

종스비님이 올리신 코드를 바탕으로
제 기호에 맞게 조금 더 수정했습니다.
색상은 갈색계열입니다.

Code: Select all

html * {
-moz-box-sizing: border-box;
}

html {
line-height: 1.3;
background-color: #FFF;
}

body {
margin: 0px;
color: #2D2C29;
}


p.item-desc a:link { color: #029; }

#rss-header {
-moz-border-radius: 10px;
background-color: #ECE9D8;
border: 1px solid #cccccc;
padding: 11px 8px;
margin: 10px 2%;
width: 590px;
}

#rss-header a {text-decoration: none; color: #825326; font-weight: bold;background-color: #fafafa; padding: 3px 2px 2px 2px;}
#rss-header a:visited {color: #8B7C8C;}
#rss-header a:hover {color: #DC1A34;text-decoration: underline;}

#rss-title {
font-size: 1.1em;
line-height: 1;
margin: 0px;
padding: 0px;
}

#rss-desc {
font-size: 10pt;
margin: 0px;
padding: 7px 0px 0px 0px;
}

div.item {
-moz-border-radius: 10px;
background-color: #fafafa;
border: 2px solid #ECE9D8;
width: 590px;
min-width: 14em;
margin: 0px 0px 8px 2%;
padding: 0px;
}

h2.item-title {
background-color: #ECE9D8;
font-size: 10pt;
font-weight: normal;
line-height: 1.1;
margin: 0px;
padding: 8px 5px 8px 8px;
}
h2.item-title a {text-decoration: none; color: #825326; font-weight: bold; background-color: #fafafa; padding: 3px 2px 2px 2px;}
h2.item-title a:visited {color: #8B7C8C;}
h2.item-title a:hover {color: #DC1A34;text-decoration: underline;}

span.item-ordinal {
padding-right: 0.2em;
}

div.item-desc {
min-height: 0em;
font-size: 0.75em;
margin: 0px;
padding: 11px 10px 8px 10px;
}
div.item-pubDate
/* Date which it was released */
{
/* background-color: #FF0000; */ /* Uncomment to see where it is */
font-size: 0.70em;
color: #A59292;
margin: 0px;
padding: 3px 17px 8px 17px;
text-align: right;
}

div.item-technorati
/* Bottom cell where respond bubble is */
{
display : none;
}

img {
max-width: 100%;
height: auto;
}

acronym, abbr {
color: #EF7314;
font-weight: bold;
border-bottom: 1px dotted #EF7314;
cursor: help;
}


blockquote {
background-color: #f5f5f5;
border-left: 3px solid #ccc;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 14px 20px;
padding: 5px;
}

cite {
font-style: italic;
}

code {
color: #AA5533;
}

/* DO NOT show EMBED tag */
embed {
display: none;
}

/* For PHPBB quote*/
td.quote {
background-color: #f5f5f5;
padding: 5px;
border: 1px solid #ddd;
}


/* SHOW ALL hidden(more/less) layers */
div.item-desc div {
display: block !important;
}

/* Tattertools is Korean Blog Tool. */
/* RESIZE undefined Tattertools' TABLE WIDTH to view attached images with correct size */
div.item-desc td.cap1 {
/* !HERE! */
width: 500px;
}
/* End : Tattertools */

[dakkanv]

-삭제-