박스 배경색을 바꿔보자 -3-
- Jovovich
- 880
- 7
- 24
이 부분 색이 이부분이랑 달라요
이 부분 투명하게 바꾸고 싶어요
등등
박스 부분 배경 색 또는 투명도를 바꾸고 싶을 때 어떻게 할까요?
우선 바꾸고 싶은 부분 패널을 열어봅니다.
건조3.0스킨 선수 프로필 화면을 예시로 해볼게요
이 화면의 패널은 panels/player/player overview panel.xml 입니다.
메모장또는 프로그램으로 열어봅니다.
박스의 색깔은 의 색을 지정해 줘서 바꿔 주어야 합니다.
위 스샷에 보면
appearance="boxes/bordered/no margin/paper2"
이것이 보이죠?
이런식으로 appearance="~" 가 있으면 이 박스는 paper2 라는 파일로 배경을 표시하라는 말입니다.
그렇다면 이 appearance가 없는 container는 어떤걸로 표시가 되는 걸까요?
앞에 resource archiver로 기본스킨의 패널과 그래픽 파일들을 넣은 폴더에서
skins/fm-widgets/graphics/boxes 폴더를 보면 container 종류에 따라 적용되는 기본 그래픽 파일들이 있습니다.
appearance="~" 로 지정해 주지 않은 container는 이 기본 그래픽 파일들이 적용되게 됩니다.
따라서 appearance="~"가 없는 container들의 색을 맞추기 위해서는
container 종류를 같게 맞춰주든지 appearance 로 같은 파일로 적용시켜 주면 됩니다.
우선 첫번째로 appearance 없이 색을 바꾸는 방법입니다.
안에 background_colour="색" 을 넣어주는 것입니다.
background_colour="red" 와 background_colour="yellow" 를 넣어봤습니다.
이렇게 빨강과 노랑으로 바뀐것을 볼 수 있습니다.
간단하게 색을 넣을 수 있습니다.
두번째로 appearance="~" 로 좀더 복잡한 색이나 그림을 넣어봅시다.
appearance로 색이나 그림을 넣기 위해서는 그림파일이 필요합니다.
예시를 위해 스킨/graphics/boxes/custom/test 폴더를 하나 만들어서 그림파일을 넣어볼게요
샘플로 대충 3개를 넣었습니다.
50.png 는 빨강 투명도 50%
jy.png는 정연이
rgb.png 는 red, green, blue를.. (255,0,0), (255,255,0), (255,0,255), 등등 나눠 놓은 것입니다.
하나씩 적용해 볼게요
appearance="boxes/custom/test/50" 을 추가해서 확인해보니까..
어? 안되네요ㅠ
이거 어떻게 하나요?....ㅠㅠ
당황하지 마시고.. 이렇게 container class에 따라서 안되는 것들이 있네요 ㅋㅋ
여기서는 꼭 적용하고 싶으면 여기 적용된 다른 파일에다 하면 됩니다.
다시 gunzo/gunzo player profile.xml 파일에서 적용해보도록 합시다.
나오긴 하는데 이거 뭔가 이상하죠?
네 바로 그림파일 사이즈 그대로 나온것입니다.
이 그림파일들을 박스 크기에 맞게 할려면 어떻게 해야할까요?
저 박스 크기가 얼마인지도 모르는데....
그래서 xml 파일이 필요하게 됩니다.
스킨/graphics/boxes/custom 폴더 안에 다른 폴더에서 아무 paper.xml 파일을 복사해서 가져옵니다.
그리고 그림파일과 이름을 똑같이 해줍니다.
이제 이 xml 파일이 어떤 역할을 하는지 볼 차례 입니다.
50.xml 파일을 열어봅니다.
내용은 어떤 파일을 복사해 왔느냐에따라 다르겠지만
모양은 비슷할 거예요
우선 위에
<record id="image_borders" left="0" right="0" top="0" bottom="0"/>
이 것은 적힌 그대로 image의 border를 얼마나 할건지 설정하는 부분입니다.
단위는 픽셀입니다.
설정한 값 만큼 테두리로 설정이 됩니다.
여러가지 값으로 테스트 한 번 해보세요
<record id="image_slices" left="8" right="8" top="8" bottom="8"/>
이 부분은 image를 어디까지 유지시킬건지라고 생각하면 됩니다.
left="8" 은 왼쪽 8 픽셀까지 그대로 두고 9픽셀부터는 늘리거나 줄여준다고 생각하면 됩니다.
즉 left="8" right="8" top="8" bottom="8" 이건 상하좌우 각각 8픽셀씩 원본그대로 두고 나머지 가운데 부분을 늘려라입니다.
아래
<colour id="red_replacement" name="box_background"/>
<colour id="green_replacement" name="box_shadow"/>
<colour id="blue_replacement" name="box_border"/>
FM에서는 rgb로 색을 지정해 줄 수 있습니다.
빨강은 흰색으로, 녹색은 빨강으로, 파랑은 노랑으로 이렇게 바꿔줄 수 있습니다.
<colour id="red_replacement" name="white"/>
<colour id="green_replacement" name="red"/>
<colour id="blue_replacement" name="yellow"/>
이렇게요
그럼 이미지에서 빨강은 흰색, 녹색은 빨강, 파랑은 노랑으로 바꿔서 FM에서 이미지를 보여줍니다.
직접 여러가지 테스트 해보시는게 이해하기 쉬울거예요
이제 각 이미지의 xml 파일을 수정해서 테스트해 봅시다
각각 이렇게 나오네요
직접 해 보면서 여러가지로 이것저것 테스트 해 보면 금방 쉽게 이해가 될겁니다.
다양하게 응용해 보세요