스타일(style)이 뭔가? 짧게 설명하면,스타일은 테마의 블랙박스적 표현이다. 스타일은 컬러, gradients, 폰트, 창의 모양, 그리고 데스크탑의 외형을 꾸며준다.
BB.Themes.Org에서 얻을 수 있는 타르볼 형태의 스타일의 설치는 매우 쉽다.
먼저 적절한 스타일 디렉토리를 만든다.
~/.blackbox/로 만들면 될것이다. 이 밑으로 Styles과
Backgrounds 디렉토리를 만든다.
다음과 같이 하면 될것이다.
cd ~
mkdir .blackbox
mkdir .blackbox/Styles
mkdir .blackbox/Backgrounds
스타일을 다운받았고 그것을 사용하고 싶다면, 다음과 같이 한다.
cd ~/.blackbox
tar zxvf /path/to/style/tarball
위의 작업이 끝났으면 메뉴파일에 [style]을 추가시켜준다.
블랙박스를 사용하게 되었다면, 이제 화면에 나오는 컬러나 폰트등을 바꾸고 싶어질 것이다. 블랙박스는 이러한 설정정보들을 "스타일(style)"에서 읽어들인다. 블랙박스의 X resources를 구성하는 스타일은 하나의 파일에 놓인다. 메뉴 파일과 비슷하게, 스타일 화일은 화일시스템의 어느곳에나 놓일 수 있다. 당신이 읽을 수 있는 파일이기만 하면, 블랙박스가 사용할 수 있을것이다.
처음으로 할 일은, 우리의 스타일 파일이 놓일 곳을 정하고, 그 이름을 결정한는 것이리라. 자, 우리의 스타일 화일의 이름을 results 라고 정하자.
이 파일은 ~/.blackbox/Styles 안에 놓기로 한다.
이제 메뉴 파일을 편집할때와 같이 자기가 좋아하는 문서 편집기로 새로운 스타일을 만들어 보자.
X resources 는 키와 그 값으로 이루어진다.
키는 점 (.) 으로 구분되는 몇개의 작은 키로 구성된다.
키는 와일드카드로 일컬어지는 에스테리크 (*) 문자를 포함할 수 있으며,
이는 그 문자가 쓰인 부분이 여러개의 키와 매치될 수 있음을 나타낸다.
이것은 하나 또는 두개의 색만을 쓰는 스타일을 만들때 유용하게 쓰인다.
이러한 예는 이 절의 끝에서 보이겠다.
블랙박스는 세계의 주요 구성요소 - 툴바, 메뉴, 창 장식 - 을 사용자가 구성할 수 있게 한다. 처음에는 툴바를 꾸미는 스타일을 만들어보자.
먼저 툴바와 그것을 구성하는 부속물들에 쓰이는 "텍스쳐(texture)"라는 것을 정의해야 한다. 텍스쳐는 블랙박스가 우리가 원하는 색으로 모양과 형태를 가지도록 해준다.
택스쳐는 다음과 같은 원소로 구성된다.
Raised / Sunken / Flat이것은 구성요소에 양각(raised), 음각(sunken) 또는 평면(flat)의 모양을 띄게한다.
Solid / Gradient이것은 단색으로 채워질(solid) 것인지 점점 변화하는 색(gradient)을 쓸것인가를 정의 해준다. gradient는 한가지 색에서 다른 색으로 색이 변해가는 것을 말한다..
Horizontal / Vertical / Diagonal / Crossdiagonal / Rectangle /
Pyramid / Pipecross이것은 부가적인 설정으로 gradient를 적용했을때 색변화가 어떠한 형태로 이루어지게 할것인가를 설정한다. (gradient를 사용할때만 사용된다.)
Interlaced이것은 gradient 시 interlace 효과를 준다. (gradient 에서만 쓰인다.)
Bevel1 / Bevel2블랙박스가 어떤 bevel 형태를 사용할것인지 결정한다. Bevel1은 기본 bevel로서 이미지의 가장자리에 그늘을 준다. Bevel2는 이미지의 가장자리중에서 한 픽셀을 더한 부분까지 그늘을 준다. (역자 : 이미지가 각지게 튀어나와 보이게 됩니다.)
자 이제 툴바의 텍스쳐에 대해 알아보자. 툴바는 메인프레임과 버튼, 두개의 라벨, 그리고 시계를 가지고 있다. 버튼은 두개의 상태를 가지므로, 보통의 모습과 눌려졌을때, 두 가지에 대해 텍스쳐를 설정을 해주어야 한다.
...
toolbar: Raised Diagonal Gradient Bevel1
toolbar.button: Raised Diagonal Gradient Bevel1
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
toolbar.clock: Flat Interlaced Gradient
toolbar.label: Flat Interlaced Gradient
...
주의 : 이전 버전에서 사용되던 Texture 스트링은 이제 사용되지 않는다. 하지만 bbtools와 같은 예전의 메쏘드를 사용하는 어프리케이션때문에 쓸수는 있다.
다음으로 텍스쳐의 색을 정의한다. 색은 RGB 데이타베이스에 정의된 가능한
X 컬러나, man 1 X와 같이 명세된 색을 사용할 수 있다.
자 색을 설정한 후의 모습이다.
...
toolbar: Raised Diagonal Gradient Bevel1
toolbar.button: Raised Diagonal Gradient Bevel1
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
toolbar.clock: Flat Interlaced Gradient
toolbar.label: Flat Interlaced Gradient
toolbar.color: rgb:8/8/7
toolbar.colorTo: grey20
toolbar.button.color: grey
toolbar.button.colorTo: grey20
toolbar.button.pressed.color: rgb:4/4/38
toolbar.button.pressed.colorTo: rgb:f/f/d
toolbar.clock.color: grey20
toolbar.clock.colorTo: rgb:8/8/7
toolbar.label.color: grey20
toolbar.label.colorTo: rgb:8/8/7
toolbar.textColor: grey85
...
이제 와일드카드에 대해 설명할때가 된것 같다.
위의 예에서보면, 색상값을 주기위한 여러 줄을 볼 수 있을것이다.
각 줄에선 color 또는 colorTo 에 대한 설정을 하고있다.
두개의 자원에서 매치되는 부분이 있으면 (예를 들면 toolbar.clock.color 와
toolbar.label.color 은 같은 색을 사용하고 있다.) 다음과 같은 방법으로
설정을 줄일 수 있다.
toolbar.*.color
* 문자는 와일드카드라 불리며, 그 자리에 올 수 있는 어떠한 키와도
대응될 수 있다.
잘 보면 텍스쳐는 color 와 colorTo 키를 가짐을 알수있다.
이 키는 gradient에서 사용된다.
solids에서는 단지 color 만이 사용된다.
위의 예에서 와일드카드의 사용으로 toolbar.button.color 의 설정이 무시되지 않을까 생각할지도
모르겠다. 하지만 그런 일을 일어나지 않는데, 이유는 특정한 리소스의 설정 (toolbar.button.color) 을 먼저 읽어들이고, 그다음으로 일반적인 설정(toolbar.*.color)이 읽혀지기 때문이다.
위의 예에서는 툴바의 텍스트에도 색을 설정한것을 볼 수 있을것이다.
모든 택스쳐가 택스트 색상을 가지고 있는것이 아니라 기본 택스쳐만 택스트 색상을 갖는다.
이제 메뉴의 설정으로 옮겨보자.
블랙박스는 C++로 쓰였으므로, 모든 메뉴는 일반적인 기본 클래스에서 파생된 클래스를 사용한다. 블랙박스는 기본 클래스의 스타일 설정을 읽어들여, 블랙박스에서 쓰이는 모든 메뉴에 적용시킨다.
메뉴는 제목과 프레임, 두 부분으로 나뉜다. 이 이외에 다른것은 없으므로, 이 두가지에 대한 설정만 하면 된다. 메뉴프레임과 메뉴제목은 둘 다 텍스트 색상설정을 가지고 있으며, 메뉴 프레임은 highlight색과 highlight 되었을때의 글자색 설정을 갖는다. 이제 메뉴에 택스쳐와 색상을 설정한 후의 스타일 파일을 보자.
...
toolbar: Raised Diagonal Gradient Bevel1
toolbar.button: Raised Diagonal Gradient Bevel1
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
toolbar.clock: Flat Interlaced Gradient
toolbar.label: Flat Interlaced Gradient
toolbar.color: rgb:8/8/7
toolbar.colorTo: grey20
toolbar.button.color: grey
toolbar.button.colorTo: grey20
toolbar.button.pressed.color: rgb:4/4/38
toolbar.button.pressed.colorTo: rgb:f/f/d
toolbar.clock.color: grey20
toolbar.clock.colorTo: rgb:8/8/7
toolbar.label.color: grey20
toolbar.label.colorTo: rgb:8/8/7
toolbar.textColor: grey85
menu.title: Raised Diagonal Interlaced Gradient Bevel1
menu.frame: Raised Diagonal Gradient Bevel1
menu.title.color: grey20
menu.title.colorTo: rgb:8/8/7
menu.title.textColor: grey85
menu.frame.color: rgb:8/8/7
menu.frame.colorTo: grey10
menu.frame.textColor: white
menu.frame.highlightColor: grey85
menu.frame.hiTextColor: grey20
...
이제는 창의 모습을 설정해보자. 창은 버튼과 비슷하게 두개의 상태를 갖는다. 초점을 있을때와 없을때의 두가지 상태인데, 두가지에 대해 텍스쳐를 설정해주어야 한다. 타이틀바의 버튼들은 초점에 종속적이므로 설정하기가 쉬울 것이다. 버튼은 "눌려진" 상태를 가지므로, 이에 대한 설정만 해주면 된다. ('초점을 가졌을때의 눌려짐' 과 '초점이 없을때의 눌려짐' 으로 나뉘지 않는다.) 윈도우 프레임(window frame) 은 창을 둘러싸고 있는 얇은 테두리이다.
윈도우에 대한 설정까지 추가한 스타일 파일이다.
...
toolbar: Raised Diagonal Gradient Bevel1
toolbar.button: Raised Diagonal Gradient Bevel1
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
toolbar.clock: Flat Interlaced Gradient
toolbar.label: Flat Interlaced Gradient
toolbar.color: rgb:8/8/7
toolbar.colorTo: grey20
toolbar.button.color: grey
toolbar.button.colorTo: grey20
toolbar.button.pressed.color: rgb:4/4/38
toolbar.button.pressed.colorTo: rgb:f/f/d
toolbar.clock.color: grey20
toolbar.clock.colorTo: rgb:8/8/7
toolbar.label.color: grey20
toolbar.label.colorTo: rgb:8/8/7
toolbar.textColor: grey85
menu.title: Raised Diagonal Interlaced Gradient Bevel1
menu.frame: Raised Diagonal Gradient Bevel1
menu.title.color: grey20
menu.title.colorTo: rgb:8/8/7
menu.title.textColor: grey85
menu.frame.color: rgb:8/8/7
menu.frame.colorTo: grey10
menu.frame.textColor: white
menu.frame.highlightColor: grey85
menu.frame.hiTextColor: grey20
window.focus: Raised Diagonal Interlaced Gradient Bevel1
window.focus.button: Raised Diagonal Gradient Bevel1
window.unfocus: Raised Diagonal Gradient Bevel1
window.unfocus.button: Sunken Diagonal Gradient Bevel1
window.button.pressed: Flat Diagonal Interlaced Gradient
window.frame: Raised Solid Bevel1
window.focus.color: grey
window.focus.colorTo: grey20
window.focus.textColor: grey85
window.focus.button.color: grey
window.focus.button.colorTo: grey20
window.unfocus.color: rgb:8/8/7
window.unfocus.colorTo: grey20
window.unfocus.textColor: grey
window.unfocus.button.color: grey20
window.unfocus.button.colorTo: grey
window.button.pressed.color: rgb:4/4/38
window.button.pressed.colorTo: rgb:f/f/d
window.frame.color: grey85
...
이제 몇가지의 옵션만 더 보고 설정을 마치도록 하자.
여기에는 제목과 메뉴에서의 폰트, 정렬(justification), 경계색, bevel 과 handle 의 두께, 윈도우를 움직일때의 형태, 그리고 root command 가 있다.
폰트는 X11에서 사용되는 폰트나 유용한 font alias 된 폰트를 사용할 수 있다.
xfontsel 등의 유틸리티로 폰트를 확인할 수 있을것이다.
또한 xlsfonts 를 사용하여 X server 에서 사용가능한 폰트들을 확인할 수 있을것이다.
정렬은 LeftJustify, CenterJustify, RightJustify 의 세가지 옵션을 갖는다. (역자 : 메뉴와 타이틀에서의 글자가 나타나는 장소를 정할때 사용합니다.)
경계색은 매뉴 프레임과 제목줄, 윈도우의 제목줄, 버튼, 핸들 등에 1 픽셀 크기의 경계색을 줄 수 있다. 이 색의 설정은 스타일에 과감한 영향을 미치므로, 단지 검은색으로 설정을 하는것은 바람직하지 못하다.
bevel 과 handle 의 두께는 블랙박스의 장식 사이즈와 공간을 조정한다.
큰 수를 사용하면, 블랙박스의 창크기는 더욱 많은 공간을 차지할 것이다.
윈도우를 움직일때의 형태는 마우스로 창을 움직일때 움직이는 창의 모양을 설정하는 것으로, Opaque 와 Wire 중 하나를 선택한다.
블랙박스 버전 0.51 부터 메뉴의 bullet (역자: 서브메뉴가 있음을 나타내는 모양) 과
위치, 선택시의 변화(highlight)에 대한 설정이 추가되었다.
menu.bulletStyle은 Round, Empty, Triangle, Square, Diamond 옵션을 가질 수 있다.
Round를 사용하면 메뉴 선택시 가장자리가 둥근 하이라이트가 이루어지고,
아니면 각진 하이라이트가 생길 것이다.
menu.bulletPosition 은 left 와 right 중 고르면 되는데,
root 메뉴에서 bullet 을 어느쪽에 나타나게 할것인가에 따라 결정하면 된다.
root command 는 스타일이 불려질때마다 (블랙박스가 시작될때와 재설정/스타일이 바뀔때도 실행된다.) 실행되는 명령이다.
여기서는 xv, Esetroot, wmsetbg 등의 프로그램을
구동시킬 수 있다.
이렇게 하여 바탕화면에 이미지나 색상, 패턴등을 입힐 수 있다.
(역자: 바탕화면에 그림을 넣고 싶으면
'rootCommand: xv -root -max -quit 이미지경로/이미지이름' 을 주면 됩니다.)
! 로 시작하는 줄은 주석으로 처리된다.
자! 세부사항의 설정까지 모두 마친 스타일 파일이다.
...
! Results - theme for Blackbox 0.51.x
! by Brad Hughes bhughes@tcac.net (modified by Chuck Nusbaum)
! define the toolbars textures... note that the interlaced option is new
! in 0.50.5
toolbar: Raised Diagonal Gradient Bevel1
toolbar.button: Raised Diagonal Gradient Bevel1
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
toolbar.clock: Flat Interlaced Gradient
toolbar.label: Flat Interlaced Gradient
! toolbar colors
toolbar.color: rgb:8/8/7
toolbar.colorTo: grey20
toolbar.button.color: grey
toolbar.button.colorTo: grey20
toolbar.button.pressed.color: rgb:4/4/38
toolbar.button.pressed.colorTo: rgb:f/f/d
toolbar.clock.color: grey20
toolbar.clock.colorTo: rgb:8/8/7
toolbar.label.color: grey20
toolbar.label.colorTo: rgb:8/8/7
toolbar.textColor: grey85
! menu textures
menu.title: Raised Diagonal Interlaced Gradient Bevel1
menu.frame: Raised Diagonal Gradient Bevel1
! menu colors
menu.title.color: grey20
menu.title.colorTo: rgb:8/8/7
menu.title.textColor: grey85
menu.frame.color: rgb:8/8/7
menu.frame.colorTo: grey10
menu.frame.textColor: white
menu.frame.highlightColor: grey85
menu.frame.hiTextColor: grey20
! window textures
window.focus: Raised Diagonal Interlaced Gradient Bevel1
window.focus.button: Raised Diagonal Gradient Bevel1
window.unfocus: Raised Diagonal Gradient Bevel1
window.unfocus.button: Sunken Diagonal Gradient Bevel1
window.button.pressed: Flat Diagonal Interlaced Gradient
window.frame: Raised Solid Bevel1
! window colors
window.focus.color: grey
window.focus.colorTo: grey20
window.focus.textColor: grey85
window.focus.button.color: grey
window.focus.button.colorTo: grey20
window.unfocus.color: rgb:8/8/7
window.unfocus.colorTo: grey20
window.unfocus.textColor: grey
window.unfocus.button.color: grey20
window.unfocus.button.colorTo: grey
window.button.pressed.color: rgb:4/4/38
window.button.pressed.colorTo: rgb:f/f/d
window.frame.color: grey85
! misc...
borderColor: rgb:2/2/1c
moveStyle: Opaque
menuJustify: CenterJustify
titleJustify: CenterJustify
bevelWidth: 2
handleWidth: 4
menu.bulletStyle: Triangle
menu.bulletPosition: Right
menuFont: lucidasans-10
titleFont: lucidasans-bold-10
rootCommand: bsetroot -mod 4 4 -fg rgb:6/6/5c -bg grey20
...
자 이제 새로운 스타일이 완성되었다! 새로운 스타일이 어떻게 보이는지 확인해 보자. 먼저 메뉴파일을 편집하여 이 새로운 스타일을 블랙박스에게 알려준다.
[style] (Results) {~/.blackbox/Styles/results}
0.50.5 이상의 블랙박스에서는 단지 루트 메뉴를 닫고 다시 불러내는것으로 새로운 스타일이 메뉴에 나타날것이다. 이것을 선택하면 블랙박스는 새로운 스타일로 바뀔것이다.
자신만의 스타일을 만들었다면, 이제 다른 블랙박스 사용자들과 그것을 공유하기
위해 BB.Themes.Org에 등록을 하여보자.
테마의 인스톨을 쉽게하기 위하여 BB.Themes.Org에서는
일정한 양식을 요구하고 있다.
스타일을 등록시킬때에는 아래의 설명을 참조하여 주기 바란다.
이것은 블랙박스의 스타일들을 정돈하기 위한 이유뿐이지만,
BB.Themes.Org에 등록을 하려면 반드시 지켜져야 한다.
BB.Themes.Org에 스타일을 등록하려면 다음의 세가지가 필요하다.
스타일의 스크린샷, lsm 파일, 그리고 스타일 화일과 lsm 화일, 배경이미지를
묶어놓은 타르볼 파일이 그것이다.
스타일을 만드는 방법은 5.1절을 참고하기 바란다.
lsm 파일은 스타일에 대한 설명을 하는 텍스트 화일이다. 스타일의 이름과, 제작자, 스타일에 대한 적당한 설명, 자랑등을 적어주면 된다. 예를 들면 아래와 같다.
Title: Results
Author: Brad Hughes <bhughes@tcac.net>
Version: 0.50.x
Credits: I did this!
스타일과 배경이미지, lsm 파일을 만들었다면 ~/.blackbox/ 안의 적당한
곳에 그것들을 옮겨놓는다. lsm파일은 ~/.blackbox/에, 스타일은
~/.blackbox/Styles/, 배경이미지는 ~/.blackbox/Backgrounds/에
놓으면 된다. 타르볼을 만들기 위해 다음과 같이 한다. (MyStyle에 자기가 만든
스타일의 이름을 적으면 된다.)
cd ~/.blackbox
tar zcvf MyStyle.tar.gz MyStyle.lsm Styles/MyStyle Backgrounds/MyStyle.jpg
다음으로, gimp나 import등 자기가 좋아하는 툴로
스크린샷을 만든다.
이제 BB.Themes.Org의 Style Upload 페이지에 압축파일과 스크린샷을 올리면
모든것이 끝난다.