코스모스팜 스레드
퓨어 갤러리 최근글 이미지 크기만 변경 가능한가요
퓨어 갤러리를 사용하고 싶은데
최근글 리스트에 나오는 이미지 크기가
원래 리스트 이미지와 같은 크기로 설정이 되네요..
최근글 리스트에 나오는 이미지는 1줄에 4개
본 리스트 이미지는 1페이지에 3개 나오게 하고 싶은데요.
본 리스트 이미지를 3개로 나오게 하는 방법은 게시판 검색을 통해서 알게 되었습니다.
1. 최근글 리스트에 나오는 이미지만 1줄에 4개 설정할 수 있나요?
2. 이미지 사이의 간격이 좀 좁아서 답답해 보이는데요 각 이미지 사이에 간격을 늘릴 수 있을까요?
-
스레드봇 (31096 Point)ㆍ2020.07.15 17:39
안녕하세요~^^
KBoard 퓨어 갤러리 스킨은 게시글 목록 페이지와
최신글 레이아웃에 동일한 CSS 코드가 적용되어 있습니다.
또, 화면의 너비에 따라 이미지의 크기가 다르게 표시되며
한 줄에 표시되는 게시글의 수도 다릅니다.
최신글 숏코드는 어느 부분에 추가하셨는지요?
비회원으로도 확인 가능한 페이지 주소 알려주시면
CSS 코드로 해결이 가능할지 살펴보겠습니다.
고맙습니다.
-
동글 (56 Point)ㆍ2020.07.16 09:56
이 페이지에는 최신글 숏코드를 적용했어요
http://cutecla.cafe24.com/?page_id=4273
지역소식이 퓨어갤러리 최신글이 적용되어 있습니다.
검색을 통해서 퓨어갤러리 리스트 3개 1줄로 변경하는 CSS를 다음과 같이 적용하였더니
최신글에서도 크기가 커졌습니다...
#kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width:32.3333333333%;; }
그리고 본 페이지는
http://cutecla.cafe24.com/?page_id=5966
입니다.
깔끔하고 좋은데 여백이 너무 없어서 답답한 느낌이 들어서요.. 이미지간 간격을 좀 둘 수 있을까요???
-
스레드봇 (31096 Point)ㆍ2020.07.16 15:34
올려주신 페이지에서 최신글 쪽을 한 줄에 4개씩 표시하게 하시려면
기존 추가하신 코드 밑에
아래의 CSS 코드도 추가해보시겠어요?
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width:24%; }이미지간 여백 조절은 margin: 0 1% 0 0 쪽에서 1%의 수치를 적절히 변경해보세요.
margin 수치가 늘어나는 만큼 width 수치를 줄여주셔야 합니다.
만약, margin: 0 5% 0 0으로 설정하신다면 width:19% 이런 식으로 적용해보세요.
고맙습니다.
-
동글 (56 Point)ㆍ2020.07.17 09:57
고맙습니다. ㅎㅎ 덕분에 원하는대로 되었네요
그런데 이미지 4개 (혹은 3개)가 가운데 정렬이 되어있지 않고 왼쪽으로 붙어있는데요.
이미지가 가운데 정렬이 될 수는 없나요??
그리고. 이미지 모서리를 둥글게 처리하고 싶습니다.
으흑 초보자라서..ㅜㅜ
border-radius를 어떻게 적용해야할지 잘 모르겠습니다.
-
스레드봇 (31096 Point)ㆍ2020.07.17 10:56
안녕하세요.
올려주신 페이지 주소로 확인해보니
아래의 CSS 코드가 추가되어 있는 듯합니다.
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 7% 0 0; width: 18%; border-radius: 30px; }게시글을 가운데 정렬하시려면
margin 속성을 margin: 0 3.5% 0 3.5% 이런 식으로 적용해보시겠어요?
0 3.5% 0 3.5%는 상단, 오른쪽, 하단, 왼쪽 순서의 여백입니다.
썸네일 이미지에 border-radius 속성을 추가하는 건
아래의 코드를 추가해보세요.
.post-entry-4273 #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-thumbnail { border-radius: 3px; }크롬 브라우저 개발자 도구(F12)를 활용하시면
CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.
고맙습니다.
-
동글 (56 Point)ㆍ2020.07.17 12:40
이미지 테두리를 둥글게 하는 방법을 적용하였더니 아주 잘 되었습니다. 고맙습니다.
그런데 가운데 정렬은
말씀해주신대로
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 3% 3% 0 0; width: 19%; }
로 변경하였는데 그래도 화면은 좌측으로 쏠려있습니다. ㅜㅜ
마진이 오른쪽만 적용되는 것 같습니다. ;;;
http://cutecla.cafe24.com/?page_id=4273
아마도 테마의 문제인가봅니다..
어떻게 방법은 없는 걸까요???
-
스레드봇 (31096 Point)ㆍ2020.07.17 13:22
margin 속성은 이전 댓글에 안내해드린 것처럼
상단, 오른쪽, 하단, 왼쪽 순서의 여백입니다.
좌우 여백을 3%로 적용하시려면
margin: 3% 3% 0 0 부분을 margin: 0 3% 0 3%로 적용해보시겠어요?
또는 margin: 0 3% 이런 식으로 적용하셔도 됩니다.
margin 속성에 대한 자세한 내용은
아래의 링크를 참고해보세요.
https://www.w3schools.com/css/css_margin.asp
고맙습니다.
-
동글 (56 Point)ㆍ2020.07.17 15:28
ㅜㅜ 제가 잘못 읽었군요..ㅜㅜ 이런 것에도 차근차근 대답해주셔서 너무 감사합니다.
퓨어게시판을 원하는 용도로 충분히 사용할 수 있게 되었습니다. 고맙습니다.
마지막으로
첫화면에 퓨어 게시판 최신글 사진을 걸어놓았는데요
여기는 제목이 안나오게 하고 싶거든요.
#kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display:none; }
이렇게 했더니
모든 화면의 타이틀이 안나옵니다.. ㅜㅜ
이 화면입니다.
첫화면만 안나오게 하는 방법이 있겠지요..?
가르쳐주세요...ㅜㅜ
-
스레드봇 (31096 Point)ㆍ2020.07.17 16:40
워드프레스 사이트에서 특정 페이지만 CSS를 적용하시려면
<body> 태그 내에 추가되어 있는 페이지 id를 적용해주시면 됩니다.
올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?
.page-id-734 #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display:none; }워드프레스에서 페이지(포스트) ID를 찾는 방법도 참고해보세요.
고맙습니다.
