최신글 제목부분의 색상을 바꾸고 싶습니다.

최신글 제목부분의 색상을 바꾸고 싶습니다.

QA

최신글 제목부분의 색상을 바꾸고 싶습니다.

본문

안녕하세요, 초보제작자입니다.

색상변경에 대해서 질문드리고자 글을 적습니다..

 

사용중인 테마

-> http://theme.sir.kr/gnuboard5/index.php?theme=community&device=mobile [커뮤니티 / 모바일버전]

 

위의 주소로 접속했다고 가정하고, 말씀드리겠습니다.

 

d4ba6c4a2d44b474270bd70629b9c4d0_1475341746_02.png

 

해당 테마의 모바일버전에서, 위의 사진에 표시한 빨간부분의 배경색을 변경하고 싶습니다.

크롬브라우저에서 F12 모드로 진입하여, 확인한결과로는

 

초록색으로 표시한 부분까지도 한박스로 묶여있다는 것 입니다.

 

그래서, 배경색을 변경했더니, 빨간색표시된 부분만 변경되는것이 아니라

초록색부분까지도 변경이 되버리더라구요...

 

혹시, 빨간색부분만 변경할 수 있는지가 궁금합니다.
 

이 질문에 댓글 쓰기 :

답변 2

그럴 땐, 빨간색 부분만 다시 별도로 div나 span으로 묶고 별도로 아이디나 클래스 부여 후, 스타일 적용하시면 됩니다.

 

블럭 요소 (=한 줄 차지 요소)는 div로 주로 묶고,

인라인 요소 (=딱 요소 길이만 차지하는 요소)는 span 으로 묶으시면 됩니다.

물론, display 속성을 이용해 테그의 속성을 변경 가능하긴 합니다.

 

개인적으로 권해드리는 건, 스킨을 수정하면서 늘기도 하지만,

HTML CSS를 제계적으로 공부하신 후 스킨 수정을 권합니다.

 

스킨 수정하며 HTML CSS  찾아보며 하는 것보다,

날 잡고 HTML CSS 독파 후, 수정하면 훨씬 작업 속도가 빨라집니다.

(뻥 하나도 안 붙이고, 약 10배는 빨라짐. ㅎㅎ)



제작자의 길로 들어셔셨으니, 특히나 그렇게 하는 것이 맞습니다. ^^

홈짱님, 댓글 감사드립니다 ^^

제가 워낙 무작정 뜯어고치기식이라, 해주신 말씀이 어떤 말씀인지 이해가 가질 않네요...ㅠ
빨간색부분을 별도로 div묶고 아이디 클래스 부여, 스타일적용..

약간, 직설적으로 설명해주실 수 있나요..?..
답변 있으시기전까지 한번 부딪혀보긴하겠습니다!!

<div class="hz_title">자유게시판</div> 처럼 div 태그로 묶고

최신글 css 맨 하단에..별도로

.hz_title {color:blue; font-weight:bold; text-decoration:none; .......} 식으로 정의

정말 죄송한데.. <div 말씀해주신부분을 어디 파일에 넣어야하나요..?..
mobile.css쪽에 color 이런거 넣으시라는건 이해가 갔는데...ㅠㅠ
귀찮게 해드려 죄송합니다..

저 빨간 색 부분의 요소를 찾으셔서 묶으셔야 겠지용 ^^
css는 저 페이지를 정의하는 style.css 파일에 넣으셔도 되고,
별도로 style 파일 만들어 넣으셔도 되고,
아님, 그냥 해당 요소에 직접 스타일 넣으셔도 되고....스타일 넣는 방법은 여러가지에요.

http://www.homzzang.com/b/css-3 참고하세요.

애써 답변 열심히 해주셨는데..

해당요소를 찾아서 묶는게 너무 어렵네요..ㅠㅠ
제 실력으론 무리인가 봅니다...

이것저것 해봤는데, 원하는방향으로 수정이 되질 않네요..
밥상 다 차려놓고 수저까지 올려져 있어야 따라하는 실력이다보니..ㅠㅠ

홈짱님께서 커뮤니티 테마 적용해보시고, 색변경 하신다음에
알려주셔야 가능할정도로 멍청이입니다...

하지만, 그정도로 양심불량은 아니라서..
테마 제작자분글에 댓글 달아봐야겠네요..ㅠㅠ

모바일의 최신게시글을 예로 알려드리겠습니다.

스타일은 각 스킨마다 따로 지정해 주셔야 합니다.


이미지는 클릭해서 보세요

 

 

 

 

html 경로 : community/mobile/index.php

 

 

수정 전 ↓ 

 

8aec8d482fa1d86ef65d50c451e5aedc_1475739399_0924.png



html에서 div를 감싸고 class를 추가하여 css에서 스타일을 적용합니다.

 


수정 후 ↓


8aec8d482fa1d86ef65d50c451e5aedc_1475739399_1165.png
 

 

 

 

 

 

 

css 경로 : community/mobile/skin/latest/new_latest/style.css 

 

 

수정 전 ↓ 

 

8aec8d482fa1d86ef65d50c451e5aedc_1475739629_2158.png


수정 후 ↓ 


8aec8d482fa1d86ef65d50c451e5aedc_1475739629_2441.png 

 

이런 방식으로 해당 스킨의 html과 css를 수정해 주시면 됩니다.

 

 

 

 

8aec8d482fa1d86ef65d50c451e5aedc_1475739948_3639.png

 

메인에 '최신 게시글'은 html로 작성되어 있지만 공지사항, 자유게시판 등 은 php로만 작성되어 있습니다.

 

인덱스에서 표시되는 글은 모두 최신글 이며, 최신글 스킨은 skin/latest에 있습니다. 각 명칭의 스킨 파일은 각 스킨에서 보이는 것과 같이 basic과 gallery에서 수정하면 됩니다.


8aec8d482fa1d86ef65d50c451e5aedc_1475739948_386.png

 

파일 경로는 여기서 수정하면 됩니다.
 

8aec8d482fa1d86ef65d50c451e5aedc_1475740402_9144.png 

 

 

수정 전 ↓ 


8aec8d482fa1d86ef65d50c451e5aedc_1475740402_8738.png

 

수정 후 ↓


8aec8d482fa1d86ef65d50c451e5aedc_1475740402_8951.png

css도 해당 파일에서 추가하여 수정하면 됩니다.

 

8aec8d482fa1d86ef65d50c451e5aedc_1475740928_8908.png
 

 

 

 

 

그래도 잘 모르시겠다면 코딩을 조금 더 공부하신 뒤 수정하시거나 매뉴얼 : http://sir.kr/manual/ 을 참고해보세요!

우와... 만드신 테마 저도 이용하여 사이트 제작중인데
(전 css 등 몰라서 의뢰를 맡기고 부분 부분 어디를 만지면 어디가 고쳐지는건지 스스로 찾아보며 약간 공부 중^^)
이 부분도 궁금했는데 매우 도움되고 공부까지 되네요~
정말 보기에도 알기쉽게 친절한 답변이네요.
대단하십니다~
감사합니다~

답변을 작성하시기 전에 로그인 해주세요.
전체 123,120 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT