필수 : Custom Css 모듈

그 외 사용 모듈 : Chat Portrait


CSS 수정하는 방법 

1. 우선 자기 월드에 들어간 후, F12를 눌러서 개발자용 창을 열자.

2. '소스' 탭에 들어간 후, css-> style.css 를 눌러보면 FVTT 코어 소프트웨어의 css 파일을 열수 있다. 

3. 원하는 부분의 내용을 찾아서 custom css 모듈로 수정. 

코어 소프트웨어의 css가 아닌 모듈의 css를 수정할 경우, 각 모듈의 css 파일을 들춰보면 된다.


- 색깔 : #(여섯자리숫자) 로 되어있는건 hex color 라고 구글에 쳐보면 원하는 색깔 골라서 코드 얻을 수 있음.

- 웹 폰트 : 눈누 ( https://noonnu.cc/ )
사이트 내에서 원하는 폰트 골라서, '웹 폰트로 사용' 부분에 있는 텍스트를 그대로 복붙하자.

원하는 것 취사 선택하라고 용도별로 분리시켜서 적어둠.


+ 2022-01-29 : Custom CSS 모듈에 복붙할 필요 없이 모듈을 활성화시키면 한방에 적용되도록 모듈을 만들었습니다. 혹시 필요하신 분은 가져가세요!

https://github.com/jbblily/fvtt-ui-theme


폰트 및 채팅 카드 수정

폰트 임포트 시 제 추천은 '고딕'체 하나, '세리프' 체 하나를 추천합니다.

여기서 나눔 스퀘어 라운드로 변경, 채팅 카드를 다음과 같은 모양으로 바꿉니다. 

/* Custom CSS */

/* 폰트 가져오기 */
@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 전체 폰트 */

body {
    font-family: 'NanumSquareRound', Signika, sans-serif !important;
}


/* 채팅 형식 꾸미기*/

.chat-message .message-header .message-sender {
    border-bottom: 2px solid #757575;
    text-align: left;
    margin-bottom: 7px;
    padding-top: 7px;
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    flex: 2;

}

h2.cell__title {
    font-weight: bold;
}

.chat-message .message-header {
    border: none;
    border-bottom: 2px solid #c9c9c9;
    margin-bottom: 10px;
}


매크로창 UI 오류 수정

매크로창 UI가 뭔가 이상해서 자꾸 아래쪽이 잘려서 보임. 그거 수정해주자.

비포애프터
.macro-editor {
  height: calc(100% - 24px) !important;
}


모듈별 수정

Narrator Tools


/* 나레이터 챗 */
#chat-log .chat-message.message.flexcol.narrator-chat .message-content{
    font-family: 'Song Myung',Signika, san-serif;
}

#chat-log .chat-message.message.flexcol.narrator-chat .message-sender {
    background-color: transparent;
    background: none;
    padding-top: 0px;
    padding-left: 0px;
    border-bottom: none;
    box-shadow: none;
    margin-left: 0px;
    margin-bottom: 0px;
}

#chat-log .chat-message.message.flexcol.narrator-chat .message-header {
    border: none;
    margin-bottom: 0px;
}


DF Chat Enhancements


채팅창의 롤 속성 버튼이 너무 커서 크기를 줄이고 오른쪽 정렬

/* DF 롤 버튼 */
#dfcp-rt-buttons{
    justify-content: flex-end;
    margin: 0 !important;
}
#dfcp-rt-buttons button{
    font-size: 0.875rem;
    margin: 0;
    margin-inline-end: 0.125rem;
    min-height: 0;
    max-height: 100%;
}
#dfcp-rt-buttons button i {
    font-size: 0.875rem;
    height: auto;
    line-height: 1;
    margin: 0;
    width: auto; }


기타

/* 이미지 테두리 삭제 */
img {
    border: none;
}

/* 카미가카리 탤런트 사용, 대미지 적용 버튼 커스텀*/
button.use-talent, button.calc-damage, button.apply-damage {
    background: #1f1f1f;
    color: #efefef;
    font-weight: 600;
}

button.use-talent {
    background: #3b3b3b;
}

button.calc-damage {
    background: #59afff;
}


button.apply-damage {
    background: #ff5959;
}





대충 사는 중

크로넬님의 창작활동을 응원하고 싶으세요?