kboard 제품소개 스킨 관련 질문입니다~

kboard 제품소개 스킨 관련 질문입니다~ 현재 기본셋팅만 해놓은 상태인데요 

기본셋팅해놓은 부분에 디자인을 바꾸고싶습니다 

예시로 https://www.ildong.com/kor/product/view.id?prdSeq=1263  이런 느낌입니다 

 

01. 일단 제목부분을 가운데가 아닌 표와 오른쪽으로 위치를 바꾸고 싶습니다 만약 그것이 안된다면 본문에서 제목을 안보이게 하고 싶습니다. 

02. 현재 본문페이지 제품사진에 들어가는 이미지 크기도 800*800 사이즈로 바꾸고 싶습니다

03. 그리고 저렇게 표 간격을 높이를 좀 더 넓게 높힐 수 없을까요??
기본적인 표 테두리선과 색깔도 바꾸고 싶습니다 ㅠㅠ 

04. 글목록 화면에 나오는 카테고리 부분 디자인도 버튼식으로 넓적하게 디자인을 바꿀 수 있나요??

05. 본문페이지 이미지 밑에있는 제품상세정보 글씨와 선도 없애고 싶습니다. 아니면 다른 색으로 바꾸고 싶습니다 ㅠㅠ

 

감사합니다 ~

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    1. KBoard 원더풀 제품소개 스킨 게시글 본문 페이지에서

    제목을 오른쪽 정렬하시려면

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    #kboard-wonderful-product-document .kboard-title h1 { text-align: right; }

    제목을 안 보이게 하시려면 아래의 코드로 교체해보세요.

    #kboard-wonderful-product-document .kboard-title h1 { display: none; }

     

     

    2. 본문 페이지에서 이미지 크기 조절은

    아래 관련 링크를 참고해보세요.

    https://www.cosmosfarm.com/threads/document/27370

     

    3. 입력 필드 쪽 테이블의 각 행 높이를 조절하시려면

    아래의 CSS 코드를 활용해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-option-field .kboard-document-add-option-value-wrap .kboard-document-add-option .option-name { padding: 10px 0; }

    위의 코드에서 픽셀 부분은 적절히 수정해보세요.

     

    테두리 색상과 입력 필드 라벨 쪽 배경 색상은

    아래의 CSS 코드를 활용해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-option-field .kboard-document-add-option-value-wrap { border-top: 2px solid #cccccc; }
    #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-option-field .kboard-document-add-option-value-wrap .kboard-document-add-option { border-bottom: 1px solid black; }
    #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-option-field .kboard-document-add-option-value-wrap .kboard-document-add-option .option-name { background-color: #f7f7f7; }

    색상은 원하시는 색상으로 교체해보세요.

     

    4. 카테고리 부분에 배경을 설정하고 표시하는 영을 늘리면 가능할 듯합니다.

    아래의 CSS 코드를 활용해보시겠어요?

    #kboard-wonderful-product-list .kboard-category .kboard-category-list li { width: 25%; background: gray; text-align: center; }

     

    5. 제품 상세정보를 안 보이게 하시려면

    아래의 CSS 코드를 추가해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-detail-wrap { display: none; }

     

    글자 색상을 변경하는 건 아래의 CSS 코드를 활용해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-detail-wrap .kboard-wonderful-product-detail { color: black; }

    위의 코드에서 색상은 적절히 수정해보세요.

     

    제품 상세정보 문구에 표시되는 선 색상을 교체하시려면

    아래의 CSS 코드를 추가해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-detail-wrap .kboard-wonderful-product-detail-hr { border-bottom: 1px solid black; }

     

    크롬 브라우저 개발자 도구(F12)를 활용하시면

    CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.

    고맙습니다.

  • 정말로 감사합니다 ^^ 작업하는 데 아주 많은 도움이 되었습니다. 
    하지만 현재 ㅠㅠ 알려주신대로 본문페이지에 나와있는 슬라이더 부분 크기를 변경했는데 변하지 않습니다 

    이부분은 jqrey 로 다듬어야 되는 부분인건가요??

     

    01. 그리고 슬라이더 겉에 있는 테두리선을 없애는 방법 있을까요 ?

    02. 카테고리를 말씀주신대로 잘 변경하였습니다 하지만 메인글씨는 회색이고 클릭했을때 글씨는 파랑이어서 조금 바꾸고 싶은데 그것도 가능할까요? 카테고리 글씨 크기도 조금 더 크게하여서 잘 보이게 하고 싶습니다!

  • 안녕하세요.

    슬라이더 이미지 크기 조절은 실제 어떤 코드를 적용하셨는지 알려주시겠어요?

     

    1. 슬라이드 테두리를 안 보이게 하시려면

    아래의 CSS 코드를 추가해보세요.

    #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-image-gallery div, #kboard-wonderful-product-document .kboard-wonderful-product-wrap .kboard-wonderful-product-lightslider .lSPager.lSGallery li { border: 0; }

     

    2. 카테고리 글자 크기 및 색상, 선택된 카테고리 색상을 변경하시려면

    아래의 CSS 코드를 활용해보세요.

    #kboard-wonderful-product-list .kboard-category .kboard-category-list li a { color: black; font-size: 15px; }
    #kboard-wonderful-product-list .kboard-category .kboard-category-list li.kboard-category-selected a { color: red; }

    위의 코드에서 색상과 글자 크기는 적절히 조절해보세요.

    고맙습니다.

  • #kboard-wonderful-product-document .lSSlideOuter .lightSlider,
    #kboard-wonderful-product-document .lSSlideOuter .lightSlider .lslide,
    #kboard-wonderful-product-document .lSSlideOuter .lightSlider .lslide img { height: 400px !important; }
    
    @media screen and (max-width: 500px) {
    	#kboard-wonderful-product-document .lSSlideOuter .lightSlider,
    	#kboard-wonderful-product-document .lSSlideOuter .lightSlider .lslide,
    	#kboard-wonderful-product-document .lSSlideOuter .lightSlider .lslide img { height: 500px !important; }
    }
    

    이렇게 추가 css 에 넣었는데 위에 있는 높이 크기를 높히니 슬라이더 크기 높이가 커지지만 이미지도 같이 늘어납니다 ... 현재 이미지를 크기를 슬라이더 크기에 맞췄음에도 불구하고 이미지가 잘리네요 ㅠㅠ 그래서 슬라이더 높이를 좀 더 높혀서 이미지가 안잘리게끔 하고싶습니다.. 아니면 이미지가 안잘리게 하는 코드가 따로 있을까요 ??

     

    그리고 하나만 더 여쭤보자면 카테고리 알려주셔서 감사합니다 덕분에 잘바꿨습니다 하지만 pc에서는 괜찮은데 모바일은 잘리는 현상이 나와서 혹시 모바일은 따로 수정할 수 있는 코드가 있을까요 ?? 

     

    감사합니다 !!

  • 안녕하세요.

    CSS 코드만 수정하신 건지요?

    비회원으로도 확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.

    모바일에만 별도의 CSS 코드를 적용하시려면

    구글에 미디어 쿼리 관련해서 검색해보시면 참고해보실 만한 자료가 많습니다.

    고맙습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요