크롬이나 파폭이시죠?
??
??????
자 그럼 이제 다른 암드빠를 모집하죠
이 페이지 커스터마이징은 CSS를 이용하여 이미지를 바꿔치는 방법입니다
당연히 영 좋지는 않겠죠
소스는 제 꼬릿말 소스보기를 누르면 나옵니다.
귀찮으면 그냥 이거 갖다가 적절하게 수정해서 붙이면 됩니다
이제 하나하나 설명하겠습니다
아래 내용을 시작하기 전에는＜style＞를 먼저 붙이고 스타일 지정이 끝나면 ＜/style＞ 을 붙여야 합니다
textarea{color:#ffffff; background:url(http://thimg.todayhumor.co.kr/upfile/201306/UxjhlqYXCCu4suoto1L8oQKWbCC31.png); border-width:0; border-color:#000000; border-style:solid;}
이건 댓글창에 나타나는 배경을 설정하는 것입니다
color:#ffffff;
이건 댓글창에 글씨를 쓸 때 나타나는 색상입니다. 배경 이미지랑 같은 색이면 글자가 안 보이니 보색으로 해서 잘 보이게 하는 배려를 합시다.
background:url(http://thimg.todayhumor.co.kr/upfile/201306/UxjhlqYXCCu4suoto1L8oQKWbCC31.png);
핵심입니다. 텍스트 창의 배경이미지. 836*112로 만들면 꽉 차서 잘 나옵니다. 자신만의 배경을 만드는 것도 좋지만 여러분은 암드빠입니다. 그대로 쓰세요.
border-width:0; border-color:#000000; border-style:solid;
이건 댓글 창의 테두리와 관련된 겁니다. 굵기는 0, 테두리 색은 검은색, 스타일은 그냥 직선입니다. 그냥 냅둡시다.
div.whole_box {background-image:url(http://thimg.todayhumor.co.kr/upfile/201306/9wanBLzNnslP2RuiiBPsZefRFxEq.jpg); background-attachment: fixed; background-repeat:no-repeat; background-position:bottom right;}
이건 배경화면입니다. 저같은 경우엔 오른쪽 아래에 AMD 로고가 나오죠. 여러분은 암드빠입니다.
background-image:url(http://thimg.todayhumor.co.kr/upfile/201306/9wanBLzNnslP2RuiiBPsZefRFxEq.jpg);
배경화면 주소입니다. 원하는 이미지를 갖다쓰되, 눈이 아프지 않게 해야합니다. 1920*1200 이미지를 갖다쓰면 화면에 꽉 차게 나옵니다
background-attachment: fixed;
이미지의 위치를 고정시키는 겁니다. scroll로 하면 바로 딸려 내려가기 때문에 우리는 fixed를 씁니다
background-repeat:no-repeat;
배경화면 반복입니다. repeat,no-repeat, repeat-x,repeat-y가 있습니다. 순서대로 반복, 반복안함, X축으로만 반복, Y축으로만 반복입니다.
저는 반복안함을 썼습니다. 패턴을 만들고 싶으시면 repeat를 쓰시면 됩니다.
background-position:bottom right;
이건 배경 이미지의 위치입니다. left,right,center과 top,bottom을 쓸 수 있고, 길이나 퍼센트로 지정할 수도 있습니다. 배경에 꽉 차게 하려면 지우는게 여러모로 낫습니다.
#okNokBookDiv img{content:url("http://thimg.todayhumor.co.kr/upfile/201306/bncCKsNu56KBZst7tbozlcsaCH3.png");}
추천 버튼의 이미지를 설정하는 부분입니다.
content:url("http://thimg.todayhumor.co.kr/upfile/201306/bncCKsNu56KBZst7tbozlcsaCH3.png");
추천 버튼의 이미지 위치입니다. 대충대충 알아서 바꾸시면 됩니다. 114*136에 맞춰서 만드시길 바랍니다.
원래 이렇게 하면 추천과 반대 버튼이 한꺼번에 바뀌기 때문에 뒤에 부분도 함께 써야 합니다.
#okNokBookDiv img:nth-child(2){content:url("http://thimg.todayhumor.co.kr/upfile/201306/u7dkf4TQCflH.png");}
반대 버튼의 이미지를 설정하는 부분입니다.
img:nth-child(2)
추천 반대 항목의 2번째 이미지를 선택하는 겁니다. 놔두세요.
content:url("http://thimg.todayhumor.co.kr/upfile/201306/u7dkf4TQCflH.png");
반대 버튼의 이미지입니다. 역시 114*136에 맞춰서 만드시길 바랍니다.
#okNokBookDiv a img{content:url("http://thimg.todayhumor.co.kr/upfile/201303/1362480260221.gif");}
뒷북 버튼의 이미지를 설정하는 부분입니다.
content:url("http://thimg.todayhumor.co.kr/upfile/201303/1362480260221.gif");
뒷북 버튼의 이미지입니다. 역시 114*136에 맞춰서 만드십시오.
#logo_line1 a img{content:url("http://thimg.todayhumor.co.kr/upfile/201306/t4He6NPePMCF3KNW5TEaEIFDFZn.jpg");}
#logoDiv_white a img{content:url("http://thimg.todayhumor.co.kr/upfile/201306/t4He6NPePMCF3KNW5TEaEIFDFZn.jpg");}
맨 위 오늘의유머 로고입니다. 두개 다 똑같이 바꾸도록 합니다.
content:url("http://thimg.todayhumor.co.kr/upfile/201306/t4He6NPePMCF3KNW5TEaEIFDFZn.jpg");
오늘의유머 로고 이미지입니다. 228*33에 맞춰서 만드시되, 오늘의 부분은 남기고 유머 부분을 바꿉시다.
#login_span span b a:before{content: "★암드빠 "}
로그인 부분에 여러분의 닉네임이 나타나는 부분입니다.
a:before
앞에 쓸지, 뒤에 쓸지 결정하는 부분입니다. 전 앞에다 썼습니다. 당연히 이거 복사해서 after로 바꾼다음 뒤에 덧붙일 수 있습니다.
content: "★암드빠 "
덧붙일 내용입니다. 저 같은 경우에는 ★암드빠를 닉네임 앞에 붙게 했습니다. 여기에 추가적으로 글자체, 글자색, 글자크기, 등을 지정할 수도 있지만 나중에 설명하겠습니다.
#memo_insert_form div b:after{content: "님이 AMD를 매우 좋아합니다. 매우 진지합니다."; font-family: "궁서체"; color: red;}
댓글창에 나오는 ★닉네임 부분입니다.
b:after
댓글창 닉네임 뒤에 붙이도록 지시한 겁니다. 앞에 붙이려면 역시 before로 바꾸시면 되고, 앞뒤로 할려면 복사해서 하나는 before,after로 바꾸시면 됩니다.
content: "님이 AMD를 매우 좋아합니다. 매우 진지합니다.";
댓글창 뒤에 붙일 내용입니다. 원하는 대로 쓰세요.
font-family: "궁서체";
글자체를 설정하는 부분입니다. 원하시는 글자체를 넣으시면 됩니다. 컴퓨터에 글자체가 있어야 제대로 보입니다.
color: red;
글씨색을 설정하는 부분입니다. 원하는 걸 넣으시면 됩니다.
이것 외에 뒷북 이미지 움직이게, 반대 뒷북 지우기 등 여러가지 CSS가 있으니 열심히 응용해 보십시오.
글쓰기