Change Your Css/자신만의CSS만들기

노스모크에서 default.css의 예는 다음과 같은 형태라고 하자.

현재 기본으로 지정된 CSS 화일은 http://no-smok.net/ns/default.css 에서 다운받을 수 있다.

body {
    background-color: #FFFFFF;
    color: #000000;
    font-family: Times New;
}
td.headline {
    font-family: Helvetica;
    font-size: 20pt;
}
h1,h2,h3,h4,h5 {
    font-family: Helvetica;
    background-color: #EECC99;
    padding-left:3pt;
    margin-top:2pt;
    margin-bottom:8pt;
    border-style:none;
    border-width:thin;
    width:100%;
}
h1 {
    font-size: 18pt;
    background-color: #DCA452;
}
h2 {
    font-size: 16pt;
    padding-left:6pt;
    background-color: #F6AF6D;
}
h3 {
    font-size: 13pt;
    padding-left:10pt;
    background-color: #FFD6B7;
}
h4 {
    font-size: 11pt;
    padding-left:14pt;
    background-color: #EEDBD6;
}
h5 {
    font-size: 9pt;
    padding-left:18pt;
    background-color: #EEEBF6;
}
a:link {
    color: #993306;
}
a:visited {
    color: #BB7733;
}
a.nonexistent {
    font-weight: bold;
    background-color: #F8F8F8;
    color: #FF2222;
}
a.nonexistent:visited {
    background-color: #F8F8F8;
    color: #FF2222;
}
a.external {
    color: #AA6600;
}
dl,ul,ol {
    margin-top: 1pt;
}
tt,pre {
    font-family: Courier New,Courier,monotype;
    font-size: 10pt;
}
pre.code {
    margin-top: 8pt;
    margin-bottom: 8pt;
    background-color: #E0E0E0;
    white-space:pre;
    border-style:none;
    border-width:thin;
    width:100%;
}
div.diffold {
    background-color: #FFFF80;
    border-style:none;
    border-width:thin;
    width:100%;
}
div.diffnew {
    background-color: #80FF80;
    border-style:none;
    border-width:thin;
    width:100%;
}
strong.highlight {
    background-color: #FFBBBB;
/* as usual, NetScape fucks up with innocent CSS
    border-color: #FFAAAA;
    border-style: solid;
    border-width: 1pt;
*/
}

table.wiki {
    background-color: #E0F4FF;
        border-color:silver;
}
table.closure, tr.closure, td.closure {
    background-color: #EEF2CB;
    text-align:left;
    padding: 5px;
    margin: 0px 10px;
}
span.closure {
    background-color: #FFFF99;
}
table.recentchanges {
    font-size: x-small;
}

예컨대, 가장 큰 제목(h1)의 색깔을 노란색으로 바꾸고 싶다면 위 부분을 따로 복사한 뒤에, h1 의 background-color 를 yellow로 지정해 준다.

해당 부분만 보면 다음과 같다.

h1 {
    font-size: 18pt;
    background-color: yellow;
}

그 다음 이 바뀐 파일을 자신의 컴퓨터에서 UploadFile을 통해 업로드 한다. 그리고, UserPreferences에서 자신의 css 설정을 /uploads/xxx.css로 바꾸어준다.

궁금한게 있는데요 제 모니터가 18인치 lcd이고 1280 1024 해상도인데 그래서 그런지 글씨가 지나치게 작게 나오거든요 다른것은 다 상관 없지만 EditText눌렀을때 편집기의 크기를 바꿀수는 없나요? 이것은 윈도우의 문제인가요? 궁금하네요. 제가 적용하려는 사이트는 http://keom.khu.ac.kr/keomwiki/ 이고요 저의 css는 default.css 입니다. 사이트명은 그다지 상관없을 것 같기도 한데..

아래의 코드를 쓰시는 css에 추가하시면 텍스트 편집창의 스타일을 바꿀수 있어요.:) --졸린눈

textarea {
 font-size: 16px;
 color: #666666;
 font-family: Tahoma,Gulim,sans-serif;
 line-height: 150%; 
}

[edit]

Color Picker로 편안한 색 고르기 ¶

http://www.yoyodesign.org/outils/ncolor/ncolor.html.en
http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en

현재 제가 쓰고 있는 css의 테이블 격자가 너무 흐려서 구분이 잘 가지 않습니다. 테이블의 모양을 변경하려면 어느 파트를 어떻게 고쳐야 하나요? --z3moon2005-12-09 11:41:17

table.wiki {

background-color: #E0F4FF;

border-color:silver;

} 이 부분의 border-color 을 실버가 아닌 다른 색상으로 하시면 될 듯 합니다. 예를들어 black ? --Magicboy -- 210.94.41.89 2005-12-13