안녕하세요!
지난달에 제가 가장 좋아하는 포럼이 Discourse로 전환되었습니다. 대부분 업그레이드였지만, 사람들은 외관과 느낌에 대해 불평했습니다* . 그래서 저는 이를 수정하기로 결정했고, 결국 대규모 스타일 개편을 하게 되었습니다. 이제 이를 제대로 된 테마로 만들어서 업스트림에 병합하는 노력을 할지, 아니면 그것이 비현실적인지 고민하고 있습니다.
다른 포럼의 사용자들도 이를 대안 테마로 좋아할 것 같지만, 병합을 받는 것이 얼마나 어려운지 모르겠습니다. 제가 한 작업은 Discourse의 일반적인 테마 디자인에서 꽤 많이 벗어나는데… 이는 매력이 되는 부분이기도 하지만, 동시에 어려움의 원인이기도 합니다.
아직 진행 중이지만, 몇 가지 스크린샷을 공유합니다:
여러 가지 색상 팔레트를 비교적 쉽게 만들고 전환할 수 있도록 설계되었으며, 현재까지 존재하는 세 가지 팔레트가 있습니다.
주간 모드:
야간 모드:
아늑한 회색:
게시물에는 4가지 스타일이 적용됩니다: 일반(파란 헤더가 있는 회색), 관리자/모더레이터(초록색), 스레드 작성자(시안색), 그리고 현재 로그인된 사용자(보라색 또는 분홍색). 모두 쉽게 변경할 수 있습니다.
에디터의 미리보기와 그립피(grippie)는 “현재 사용자” 스타일을 따릅니다. 또한, 스크롤바도 페이지 테마와 일치합니다. 타임라인도 스크롤바처럼 보이도록 스타일링되었습니다.
토픽 목록은 가능한 한 1줄 행을 사용하며, 타이거 스트라이핑(줄무늬) 효과를 적용했습니다. 히트맵 요소는 불처럼 보이도록 디자인되었습니다.
사용자/알림 메뉴:
임베디드 게시물의 네스팅이 더 명확해졌습니다:
사용자 정보 카드와 링크 미리보기:
현재로서는 큰 스타일시트 오버라이드와 색상을 정의하는 작은 스타일시트로 구성되어 있습니다. 하지만 업스트림에 테마가 승인될 수 있다면, 이를 정식 Discourse 테마로 변환할 수 있습니다.
정말 독특하고 훌륭한 작업이에요!
(참고로 모든 테마 쇼케이스에 챗봇이 포함되어야 해요
아, 음, 아직 진행 중이지만 지금까지 만든 것을 시도해 보고 싶으신 분이 있다면… 가장 쉬운 방법은 브라우저에서 스타일시트 오버라이드를 사용하는 것입니다:
아직 설치하지 않았다면 Stylus를 설치하세요.
Discourse 사이트가 열린 상태에서 Stylus 아이콘을 클릭하세요.
“Write style for” 아래에서 "this-site.tld"를 클릭하세요.
테마 제목을 입력하세요.
아래에 링크된 해당 CSS 파일의 내용을 붙여넣으세요. 다른 파일들이 이 파일에 의존하므로 가능하면 style.css 파일을 먼저 처리하는 것이 좋습니다.
저장하세요.
다른 파일들도 동일한 방식으로 반복하세요. 각 파일마다 하나의 테마를 만드세요.
기본 테마와 다른 테마 중 하나를 켜고, 나머지 테마는 끄세요.
stylesheets for BudgetLightForum
설치 가능한 서버 사이드 테마로 전환할지 아직 고민 중입니다. 이 테마를 만든 포럼에서는 관리자가 Sam’s Simple Theme의 다른 인스턴스를 설치하고 이 파일을 스타일시트 오버라이드로 덮어쓰는 방식을 사용했습니다… 작동은 하지만 이상적인 방식은 아닙니다.
참고로, 기본 테마에 대해 사람들이 불만을 제기했던 내용과, 제가 이를 수정하기 위해 시도한 내용은 다음과 같습니다:
너무 평범함.
여백이 너무 많음.
한 화면에 표시되는 정보가 부족함. 더 높은 정보 밀도를 원했음.
페이지 요소 중 어떤 것이 클릭 가능한지 때로는 명확하지 않음… 예를 들어 타임라인 위젯의 시작/종료 날짜처럼.
페이지 요소들이 서로 어떻게 관련되어 있는지 때로는 명확하지 않음… 예를 들어 게시글, 임베드된 게시글, 인용문처럼. 구조를 나타내는 시각적 단서가 충분하지 않다고 생각한 사람들이 있었음.
페이지 요소들 사이의 시각적 구분이 부족함. 모든 것이 하나의 연속된 문서에 인쇄된 것처럼 보임.
사람들은 특히 1줄짜리 주제 목록 행과 타이거 스트라이핑(줄무늬)을 요구했음.
그래서 저는 더 컴팩트하고, 더 다채로우며, 더 입체적인, 그리고 더 명시적인 시각적 구조를 가진 디자인을 선택했습니다… 단일 연속된 문서가 아닌 카드 스택처럼요. 기본적으로 최근 유행했던 플랫 미니멀리즘 스타일의 반대입니다.
미니멀 테마는 실용적이고 접근성이 좋으며 중립적이므로 좋은 기본값입니다. 하지만 그 대안을 원하는 사람들을 위해 저는 좀 더 … 다른 무언가를 만들었습니다.
아직 진행 중이지만, 채팅 위젯에 대한 지원을 추가하기 시작했습니다…
Falco
3월 15, 2023, 3:42오후
7
멋진 테마네요!
테마 저자 그룹에 여러분을 추가했습니다. 이제 Customization > Theme
감사합니다!
감기로 인해 한동안 자리를 비웠지만, 이제 거의 회복되어 곧 단순한 스타일시트 오버라이드가 아닌 제대로 된 테마를 만드는 작업을 시작할 수 있을 것 같습니다.
이 프로젝트는 어디까지 진행되었나요? 이 훌륭한 작업을 미완성으로 남겨두지 마시고, 널리 공유해 주세요.
ToyKeeper:
너무 평범해요.
참고로, 기본 테마의 취지가 바로 이겁니다. 이걸 기반으로 확장하기 위한 거예요.
ToyKeeper:
빈 공간이 너무 많아요.
클릭/터치 타깃의 크기도 그 이유 중 하나예요. 엄지손가락으로 특정 컨트롤을 정확히 누르려 할 때 여백이 주는 이점을 과소평가하지 마세요!
)
