라이믹스공개자료실 "스킨"
스킨

스케치북 스타일 "회원" 모듈 스킨

Lv19
윤삼
추천 수 12 댓글 58
Extra Form
자료 소개 스케치북 스킨의 스타일로 회원 메뉴 및 페이지를 꾸며줍니다.
설치 경로 ./modules/member/skins/sketchbook_member
테스트 환경 Rhymix 2.0
라이선스 GPL v2
크게 작게 위로 아래로 댓글로 가기
이름 버전 날짜 다운수
sketchbook_member.0.0.4.zip 0.0.4 2023-01-05 1,130
sketchbook_member.0.0.3.zip 0.0.3 2023-01-01 1,148
sketchbook_member.0.0.2.zip 0.0.2 2022-12-27 1,253
sketchbook_member.0.0.1.zip 0.0.1 2022-12-27 1,240

0.0.4 업데이트 (2023.01.05)

- 스케치북 스타일 "알림센터" 모듈 스킨과 연계

 

0.0.3 업데이트 (2023.01.01)

- 프로필 초기 화면의 구성 요소를 사이트의 회원 메뉴 노출 조건과 연동

- 회원의 레벨과 포인트 표기를 포인트 모듈에만 의존(모듈 비활성화시에는 노출을 방지)

- 프로필의 네트워크 부분을 프로필 위젯이나 구독 모듈과 상관없이 코어의 '친구' 기능과만 연동

- 타인의 프로필에서 쪽지 보내기 및 친구 등록 바로 가능

- 목록 페이지들(스크랩, 작성 글, 작성 댓글, 저장함, 자동로그인관리, 닉네임변경기록)에서 total_page가 2 이상인 경우에만 페이지네이션 노출

- 스케치북 스타일 "커뮤니케이션" 모듈 스킨과 연계

- __header.html의 $ref_mid = 'board_fKje48'; 부분을 $ref_mid = ''; 으로 수정 요망. (개인적인 용도로 사용하다 버전업하고 배포해서 들어가버린 코드에 해당)

 

자료 소개

- 스케치북 게시판 스킨의 스타일로 회원 모듈의 회원메뉴탭과 페이지를 꾸며주는 스킨입니다. (사실 댓글 스크랩 기능을 시도하는 차에 스크랩 쪽 커맨드도 연구해볼 겸 스킨을 만져보다가 그만... 만들게 됐습니다ㅜ)

- 라이믹스 코어 2.0.24, PHP 7.4.30 (64-bit)에서 개발되었습니다. (기타 환경에서는 오류가 있을 수 있습니다.)

- 반응이 좀 있으면 커뮤니케이션 모듈, 알림센터 모듈, 포인트히스토리 모듈, 소셜 로그인 모듈, 추천 글/댓글 모듈, 등등도 스케치북 스타일로 작업을 해볼 수 있을 것 같습니다(오류 모듈도요. 근데 너무 많네요ㅜ).

 

사용법 (조금 특이함 주의)

- 회원 모듈 스킨은 컬러셋 외에 별도의 설정을 할 수 없기 때문에, 이 스킨의 사용법은 살짝 복잡할 수 있습니다.

  1. 설치
    : 정해진 경로에 첨부된 압축파일을 해제하여 설치합니다.
  2. 설정
    : 회원설정 > 디자인(루트/index.php?module=admin&act=dispMemberAdminDesignConfig)으로 들어가서 '스킨'으로 "스케치북 스타일 회원 스킨(sketchbook_member)"를 선택합니다.
    : 스케치북 스타일인 만큼 당연히 반응형입니다. 원하신다면 모바일 스킨에서도 반응형으로 설정을 해보세요.
  3. 컬러셋 지정
    : 스킨을 선택하면 바로 아래에 컬러셋 옵션이 출력됩니다. 여기서 원하는 스킨 컬러셋을 선택합니다.
    1) 그런데 여기서 컬러셋을 선택하지 않거나 '없음'을 선택하면, 무색 기반으로(사실상 검회색) 스킨이 출력될 겁니다.
    2) 단, 회원페이지를 보고 있는 게시판 mid에서 스케치북 스킨으로 설정되어 있다면, 해당 게시판의 스케치북 색상 및 스킨 설정에 따라 회원 스킨의 각종 출력 옵션도 유동적으로 따라가게 됩니다.
  4. 스타일 고정
    : 회원 모듈 스킨의 스타일을 '스케치북 게시판 스킨이 적용된 특정 모듈의 설정에 맞춰' 고정시킬 수도 있습니다.
    : 예컨대 스케치북 스킨이 적용된 모듈의 mid값이 board_fKje48이라고 한다면, __header.html 파일의 8행에 $ref_mid = 'board_fKje48'; 같은 식으로 mid값을 넣어주면 됩니다. (혹시 배포된 파일에 $ref_mid = 'board_fKje48'; 이라고 되어 있다면, $ref_mid = '';이라고 바꿔주세요~ 저 개인적인 용도로 사용 중에 버전업하고 배포를 해서 그렇습니다ㅜ)
    : 암튼 이렇게 하면 사이트 전역의 회원 모듈 스킨은 board_fKje48 게시판의 스타일로 고정됩니다.
  5. 회원메뉴탭 이름 변경
    : __header.html 파일을 보면 '<!--// 헤더 -->'라는 주석 바로 아래에서 회원메뉴 탭의 이름을 바꿔놓은 것을 볼 수 있습니다. 이 부분들을 편집하면 자신이 원하는 제목으로 회원 메뉴 탭의 이름을 사용할 수 있습니다.
    : 특히 '<!--// 기존의 메뉴탭의 이름을 act에 맞춰 변경함 -->' 부분을 삭제하면, 코어에서 제공하는 원래 메뉴 탭으로 바꿀 수 있습니다.

 

주요 스크린 샷 (가로 640px 기준)

- 회원가입

01.png

 

- 로그인

02.png

 

- ID/비밀번호 찾기

00.png

 

- (본인의) 회원정보 보기(상단)

03.png

 

- (본인의) 회원정보 보기(하단)

04.png

 

- (타인의) 회원정보 보기

05.png

 

- 스크랩 보기

06.png

 

- 이 외에도 스압 때문에 예시하지 못하는 저장함 보기, 작성 글 보기, 작성 댓글 보기, 자동 로그인 관리, 닉네임 변경 기록 등의 페이지들, 그리고 기타 회원정보 변경 관련 페이지들이 작업되어 있습니다.

 

 

제작자 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 58
  • ? Lv0
    감사합니다. 뭔가 허전해서 스킨이 있었으면 좋겠다고 생각했는데 초보자지만 윤삼님 자료 등록하면서 많이 배우고 있네요
  • ? Lv0 Lv19

    이 자료는 업데이트가 끝났구요.
    아래 자료로 통합되었으니 살펴보세요~
    https://xetown.com/download/1737418

    저도 사실은 (다른 분들 자료 보면서 시늉만 내보는) 초보자예요. :)

  • Lv19 ? Lv0
    정보 감사합니다~! 다운 받아서 적용했는데 역시 만족스럽습니다!! 굿굿굿
  • Lv12

    회원 가입 체크박스에 required 이게 포함되면 좋을 것 같습니다!

    https://xetown.com/questions/1771696

  • Lv24
    css/style.css 파일 254번째줄

    .bd_wrt input[type="text"]
    속성 뿐만 아니라
    .bd_wrt input[type="email"], .bd_wrt input[type="url"]
    속성에 대한 css디자인이 추가 필요합니다. 속성자만 위 두가지를 더 추가하시면 됩니다. 그 아래 포커스 hover부분도 마찬가지.
  • Lv24 Lv19

    안 그래도 다음 버전에서 업데이트될 부분이었습니다ㄷㄷㄷ

    https://dev.aporia.blog/devlog/49093

     

    .bd_wrt input[type="text"],
.bd_wrt input[type="tel"],
.bd_wrt input[type="email"],
.bd_wrt input[type="password"],
.bd_wrt input[type="date"],
.bd_wrt input[type="url"] {
    display: inline-block; margin: 0; height: 28px; padding: 3px 6px;
    background: #FAFAFA; border-radius: 3px; border: 1px solid; border-color: #BBB #DDD #DDD #BBB; outline: none;
    box-sizing: border-box; transition: border .4s,background .4s; cursor: default;
}
.bd_wrt input[type="text"]:hover, .bd_wrt input[type="text"]:focus,
.bd_wrt input[type="tel"]:hover, .bd_wrt input[type="tel"]:focus,
.bd_wrt input[type="email"]:hover, .bd_wrt input[type="email"]:focus,
.bd_wrt input[type="password"]:hover, .bd_wrt input[type="password"]:focus,
.bd_wrt input[type="date"]:hover, .bd_wrt input[type="date"]:focus,
.bd_wrt input[type="url"]:hover, .bd_wrt input[type="url"]:focus {
    background-color: #FFF; border-color: #AAA;
}

     

    조만간 패치해서 올리도록 할게요!

  • Lv19 Lv24
    화이팅!
  • Lv5
    삼님 스킨 적용하고나서 로그인 실패시 에러 문구가 출력 되지 않고
    그냥 단순히 새로고침만 되는데 저희 사이트가 문제 일까요?
  • Lv5 Lv19
    오류 표시 모듈 스킨도 설치하셨던 건가요?
    암튼 저도 전반적으로 다시 테스트해보고 조만간 패치된 버전으로 올리도록 하겠습니다.
    참고로 앞으로는 테마 패키지 자료로 업데이트가 되니 그쪽 자료로 이용해주세요.
    https://xetown.com/download/1737418
  • Lv19 Lv5
    아이고 너무 늦게 답변 드립니다.
    테마자료 모두 복붙해서 넣었는데 안나오더라고요.
    저도 다시 에러로그가 나오는게 있는지 살펴보겠습니다!

  • Screenshot_20230109_175935_Samsung Internet.jpg안녕하세요 윤삼님 모바일로 볼때 저렇게 영역이 부족하면 회원 정보 수정이 잘리는 현상이 있어서 댓글남겨봐요!

  • Lv19
    레이어 팝업 요소("회원 정보 수정" 박스)의 z-index값을 레이아웃 하단 요소가 가진 z-index값보다 높게 설정해야 할 것 같은데요.
  • Lv19
    답변 감사합니다.
    제 레이아웃 스킨에 z-index 값이 2 로 설정되어 있어서 auto로 변경해서 지금은 잘 작동합니다!
  • Lv12

    mp4 동영상에서 썸네일이 생성된 경우
    https://xetown.com/download/1733182#comment_1733552
    이렇게 뜨는 증상이 있습니다.

  • Lv12 Lv19
    혹시 동영상 썸네일을 생성해주는 다른 애드온 같은 게 있었을까요?
  • Lv19 Lv12

    따로 설치된 애드온은 없으나 이걸 보고 급히 기본 라이믹스에선 테스트해보니 잘 작동하는걸로 봐선
    뭔가 또 다른 설정값이 문제일 수 있겠네요. 찾으면 댓글 달겠습니다! 감사합니다. 

  • Lv19 Lv12
    썸네일 생성대상 - 모든이미지
    캐시 사용 - 사용하지 않음 상태이고

    과거에 쓴글이 그러네요 새로 글을 작성하면 잘 뜹니다.
    과거일은 그냥 묻어 둬야겠습니다 ㅎㅎ
  • Lv12 Lv19
    ㅎㅎㅎ 그나저나 이거 확인 좀 해주실 수 있을까요오..
    https://xetown.com/download/1734721#comment_1735003
  • Lv19 Lv12
    첨부받으려고하면 대상을 찾을 수 없습니다라고 나옵니다 ㅠㅠ
  • ? Lv8
    멋진 스킨 감사합니다. 늘 표준이 될만한 것들을 만드시네요.
    회원스킨 관련해서 혹시...회원가입 하다 필수 항목 누락하거나 조건에 맞지 않는 형태로 가입 진행하면 안내 메시지가 나오고 다시 진행을 해야 하는데 그때 이미 기록했던 정보들이 초기화 되어 버리는데 이부분을 유지 시킬수 있는 방법은 모르실까요?
    회원가입창이 간단한 곳은 괜찮은데 입력항목이 몇개 있는 곳들은 다시 기입을 해야 하다보니...
  • ? Lv8 Lv19
    엇, 입력값 유효성 검증 뒤에 페이지 새로고침이 있나요?
    이쪽 스킨에서만 그런가요? 아니면 다른 스킨에서도 그런가요?
  • Lv19 ? Lv8
    기본 스킨에도 원래 동일한 문제가 있습니다.
    확장변수로 입력항목 추가를 했을때 유효성 검증하고 새로고침되어 기존 입력값들이 모두 사라집니다.
  • ? Lv8 Lv19

    아무래도 코어단에서 개선이 있어야 할 것 같은데 저도 한번 살펴보겠습니다~

  • ? Lv8 Lv19

    form 태그의 클래스 명으로 rx_ajax를 추가해주면, 검증 결과의 에러 메시지가 페이지 새로고침 없이 alert로 나오게 되는데요.
    이런 방법도 괜찮나요?

     

    덧. 당분간은 좀 더 기다려야겠네요.

    https://github.com/rhymix/rhymix/issues/2055

  • Lv19 ? Lv8
    아이쿠야. 직접 github에 제안까지 해주시고...감사합니다. 요즘은 회원가입을 간소화하는 추세이긴 한데 아무튼 기능적으로 아쉬운 부분이라 말씀드려 보았네요.
    새해 복 많이 받으시고 소망하시는 일 모두 이루어지시길 바라겠습니다.
  • Lv6

    감사합니다. 적용해보니 넘 예쁘네요. 사이트 운영하면서 아쉬웠던 부분이었는데 이 자료로 해결이 되었습니다. 항상 좋은 자료 감사드립니다.^^

     

  • 최고 입니다 감사합니다 윤삼님
  • Lv12

    <div class="rt_area is_tmb">

    <div class="tmb_wrp">
    <img class="tmb" src="" alt="">
    </div>

     

     

    noimg.PNG



    작성한 글 모음, 댓글모음 에서
    과거에 작성한 이미지 src가 위와 같이 공백인 게시물이 상당히 많습니다. 특정사이트에서만 발생하네요.

    해당 게시물에는 이미지 첨부가 되어 있습니다.

     

    이것 저것 테스트 해보니 스크랩을 한 게시물의 이미지는 잘뜨나 스크랩하지 않은 이미지는 뜨지 않는것 같네요.

  • Lv12 Lv19
    왜 그럴까요... 섬네일 생성이 꼬인 걸까요?
    혹시 캐시파일 재생성하고 다시 해보셨을까요?
  • Lv19 Lv12
    이상하네요 ㅠ 캐시파일 재생성 세션 정리 해보아도 동일합니다.
  • Lv12 Lv19
    getThumbnail() 메소드 안에 들어가는 파라미터가 어떻게 되는지 디버깅해보실 수 있을까요?
  • Lv19 Lv12

    {$document->getThumbnail($mi->zine_thumb_width,$mi->zine_thumb_height,$mi->zine_thumb_type)}

    를 

    {$document->getThumbnail()} 로 하니 이미지 주소는 잘가지고 오네요.

     

    80*80 픽셀로 잘 고정되어서 가지고 옵니다.

  • Lv19 Lv12
    {$document->getThumbnail($mi->zine_thumb_width,$mi->zine_thumb_height,$mi->zine_thumb_type)}

    같은 소스라도 스크랩에서는 80x45.fill.jpg 로 잘가져오는데
    글 모음 댓글 모음에서는 공백이네요.

    {$document->getThumbnail()} 로하면 가로 세로 80 80 기본 값으로 잘 불러와지구요.

    제가 스케치북 게시판은 모바일에서만 쓰는데 그것 때문인 건가 싶기도 하네요.
  • Lv12 Lv19
    재연이 잘 되지 않아 저도 이유를 잘 모르겠네요.
    한번 고심해보도록 하겠습니다;;;;;;
  • Lv19 Lv12
    시스템 설정 - 고급설정 - 썸네일 생성 대상
    모든 이미지 (외부 이미지 포함) 첨부된 이미지 썸네일 생성하지 않음
    로 하면 해당 증상이 재현됩니다!
  • Lv12

    기능 잘작동하고 아주 좋네요

    근데 관리자는

    NETWORK
    RECENT DOCUMENTS
    RECENT COMMENTS

    이런것들이 뜨는것 같은데 일반회원은 안뜨는것 같아요.
    아마 팔로우 받는 인원이 없으면 안뜨는것 처럼 느껴집니다.

     

    그리고 NETWORK 를 사용하지 않는(구독 모듈 구입하지 않은 사이트에서도 뜨지 않습니다. 관리자 포함)

  • Lv12 Lv19

    NETWORK는 프로필 위젯이 설치되어 있어야 하는데 제가 그걸 명기하지 않았네요ㅎ
    https://xetown.com/download/1412177

    다음 버전에서는 위젯 설치와 상관 없이 작동할 수 있도록 준비 중입니다.

    RECENT DOCUMENTS와 RECENT COMMENTS는 ... 아 조건문이 잘못 되어 있네요.
    member_info.html 파일 96행을 아래와 같이 바꿔보세요.
    <!--@if(($has_profile_widget && ($member_follow_sum + $member_follower_sum > 0)) || ($document_count || $comment_count))-->

  • Lv19 Lv12
    잘작동하네요 감사합니다!!
  • Lv12

    저도 회원정보보기에 들어가니 Error #0 "Using $this when not in object context" in modules/experience/experience.model.php on line 77

    동일하게 뜨네요.

     

    77번 라인은

     

                if(!$from_db && $this->experienceList[$member_srl]) return $this->experienceList[$member_srl];

    입니다.

  • Lv12 Lv19
    경험치 모듈과 안 맞는 부분이 있는가봅니다.
    _profile.html 파일의 13~17행을 삭제해보세요.
  • Lv19 Lv12
    9~13행 삭제하니 잘작동 하네요 감사합니다.
  • ? Lv7

    예쁜 스킨이네요.

    감사합니다.

     

    저도 님과 같은 "라이믹스 코어 2.0.24, PHP 7.4.30 (64-bit)" 인데

    스킨을 적용하면 다른 탭은 정상적으로 작동을 하는데 "프로필"과 "임시저장함"을 클릭하면 아래 오류가 출력됩니다.

    2022-12-28 194440.jpg

  • ? Lv7 Lv19
    _profile.html 파일의 9~13행을 삭제해보시겠어요?
  • Lv19 ? Lv7
    삭제하니 잘 작동합니다.
  • ? Lv7 Lv19
    저도 회원가입해서 구경해보겠습니다!
  • Lv12
    디자인 해야지 해야지 방치하고있었는데
    윤삼님이 해주시니 ㅠㅠ 그냥 적용만 해도 예쁘겠네요.
    감사합니다.
  • ? Lv3
    잘쓰겠습니다 ㅎㅎ
  • Lv2
    기존의 스케치북5 스킨을 사용해 왔는데,
    윤삼님의 스킨은 이를 더 깔끔하게 표현해 주셔서 고맙습니다.
  • Lv2 Lv19
    반응이 좋은 것으로 알고ㅎㅎ
    커뮤니케이션 모듈(쪽지함, 친구)도 작업을 해보겠습니다 :D
  • Lv19 Lv2
    기대됩니다.
    좋은 스킨 제작해 주셔서 고맙습니다. ^^
  • Lv19 Lv12
    최고 입니다!!
  • Lv6
    스케치북 풀 패키지 버전이 2023년에 나오겠군요.
    저도 들어가는대로 적용해보겠습니다.
    <대박 예감>
    윤삼님 화이팅~
  • Lv6 Lv19
    패키지급까지 생각하면 부담될 수 있으니까, 여력 있을 때 주욱 내놓는 시리즈물로 할게요ㅎㅎㅎ
  • Lv19 Lv6
    네 ^^* 천천히 하세요.
  • Lv6
    방금 적용 했는데 너무 좋습니다!!ㅎㅎ

    염치 없지만 문의 남깁니다.
    임시저장함, 친구, 알림설정은 사용안함으로 했는데 표시되는 문제가 있습니다.
    쪽지함, 알림목록도 스킨 업데이트 예정이 있을까요?
  • Lv6 Lv19
    그렇겠네요. 회원메뉴 리스트를 강제로 불러오는 구조여서... 그 부분 수정을 해야 하겠습니다.
    다른 모듈 스킨도 작업을 하고는 싶은데, 1월 들어가면 일이 좀 몰릴 예정이어서 상황을 좀 봐야 할 것 같아요.
  • Lv6 Lv19
    피드백 주셨던 부분 패치해서 방금 올렸습니다.
    확인해보세요~
  • Lv19 Lv6
    앗!! ㅎㅎ 역시 윤삼님 빠른 피드백 너무 감사합니다ㅎㅎ
목록