내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 183

Equeer 레이아웃 1.4.5 (반응형 지원)

최초 등록일: 2017.07.16 조회수 : 2295

100P

4.9점 / 총 47명 참여
  • 구매자 93
  • 소개  
  • 설치경로 /layouts/equeer_layout /widget/point_status/skins/equeer_point 
  • 지원환경  
  • 라이선스 XPM License (재배포 금지) 
  • 분류 레이아웃
  • 제작자 Booth
  • 다운로드
    equeer V1.0.zip 56.12KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.1.1.zip 56.58KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.1.2.zip 56.65KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.2.2.zip 60.05KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.2.3.zip 60.26KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.3.4.zip 60.86KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.4.4.zip 65.54KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.4.5.zip 65.59KB (잔여일 : -, 잔여횟수 : -)
  • URL Booth님의 웹사이트

equeer_layout_scr.png

제작자의 말

 

UI/UX 전공이지만 편집 프로그램만 다룰 줄 알았고, 직접 코드로 무언가를 만들어 본 적이 없었습니다. 작은 커뮤니티를 운영하게 되면서 만들게 된 자작 레이아웃을 기반으로 제 첫 작품을 공개합니다. 생활코딩으로 가볍게 배운 실력인지라 가독성을 높이고, 재사용성을 극대화하는 코딩에 대해 이해도가 부족합니다. 이점 양해해주세요.

 

레이아웃 소개

equeer layout ver.1.4.5 Updated!

 

미리보기 레이아웃 설치하기

 

 

커뮤니티 레이아웃을 기반으로 만들어졌기에 회원 가입을 받는 사이트에 적합합니다. 레이아웃 본연의 기능에 충실하고 필수 불가결한 요소들만을 남겨 여기에 적절한 색 조정과 애니메이션으로 멋을 냈습니다.

 

자바 스크립트를 최대한 지양하고 CSS3를 활용하여 사용자의 행동에 최대한 반응하는 UX를 구현했습니다. 마우스를 가져다대고, 누르는 과정에서 빛과 그림자, 모양이 동적으로 변합니다. 플랫한 디자인의 요소에 동적인 애니메이션을 활용하여 무게감, 입체감을 만들고 디자인에 생동감을 부여합니다.

 

btn.gif search.gif gnb.gif usermenu.gif

 

 

업데이트 내역

V.1.4.5 (2017-07-22)

  • 로고를 텍스트로 사용할 경우 로그인 팝업 내 로고도 텍스트로 변경됩니다.

 

V.1.4.4 (2017-07-21)

  • 본문의 가로폭을 넓히고 서브 메뉴의 가로폭을 줄였습니다.
  • 서브 메뉴 - 위젯 타이틀 URL을 입력해야만 타이틀에 MORE가 뜨도록 수정되었습니다.
  • 모바일에서 일부 패딩값이 개선되었습니다. (가로폭 100%)
  • 서브 메뉴에서 배너를 수정하지 않을 시 나타나는 배너 이미지가 변경되었습니다. 또한 서브 메뉴 배너의 기본 URL이 http://calvinsnax.xyz로 연결되도록 변경되었습니다.
  • layout.html 파일 내 쓸떼없는 태그를 제거했습니다. (DOCTYPE, html, head, body 등)

 

V.1.3.4 (2017-07-20)

  • 서브 메뉴 위젯 타이틀의 디자인이 개선되었습니다.
    subnav_widget.png
  • 모바일에서 상하 패딩값이 개선되었습니다.
  • 모바일에서 헤더 부분이 지원할 수 있는 가로폭이 소폭 늘어났습니다.
  • 모바일에서 네비게이션 드로어(서브 메뉴)와 유저 메뉴가 분리되었습니다. 이제 헤더 부분의 프로필 이미지를 누르면 유저 메뉴가 '팝오버'됩니다.
  • 모바일에서 네비게이션 드로어의 패딩값이 개선되었습니다.
  • 모바일에서 로그인 화면 내 "로그인 상태 표시 / 비밀번호를 잊어버리셨나요?" 문구가 가로폭이 너무 작을 시 겹치는 문제에 대해 문구를 두 줄로 변경하면서 해결되었습니다.
  • 모바일에서 로그인화면 내 회원가입 텍스트가 보이지 않는 문제 해결.
  • Samsung Pass 사용 시 로그인 후에도 Samsung Pass 인증이 뜨는 오류 해결.

 

V.1.2.3 (2017-07-20)

  • 사용자 메뉴에서 레이아웃 수정 메뉴 추가 (유경수님 의견 감사합니다.)
  • 모바일 화면에서 로고가 텍스트일 경우 밑으로 내려가는 문제 해결

 

V.1.2.2 (2017-07-20)

  • 반응형 모바일 지원
    (모바일 뷰 사용 안함 체크 또는 m.layouts에 넣어 사용. XE의 경우 모바일 레이아웃 설정에서 'PC와 동일한 반응형 레이아웃 사용'으로 변경)

    mobile.gif

  • 이제 서브 메뉴 최상단 및 최하단에 원하는 HTML 태그를 삽입할 수 있습니다.
  • 서브 메뉴에서 위젯 사용 여부를 설정할 수 있습니다. 또한 위젯 타이틀 링크를 수정할 수 있습니다.

 

V.1.1.2 (2017-07-19)

  • 서브 메뉴에서 배너 사용 여부 설정에서 사용안함을 체크해도 배너가 표시되던 문제 해결

 

V.1.1.1 (2017-07-19)

  • 새로운 버전명 규칙 적용 (대규모 업데이트 > 기능 추가 > 버그픽스 순서)
  • 메인 비주얼 표시 여부 설정 기능 추가
  • 메인 비주얼 배경 컬러 직접 설정 및 그라데이션/단색 설정 기능 추가
  • 메인 비주얼 이미지 등록 설명에 "(배경이 투명한 png 파일 추천)" 문구 추가
  • 메인 비주얼 이미지 사이즈 맞춤 선택 기능 추가 (원본크기, 맞춤, 채우기)
  • 서브 메뉴에서 배너 사용 여부 설정 가능 (사용함 기본값)
  • 포인트 위젯 표시안함 체크 시에도 포인트 위젯이 표시되는 버그 수정

 

V.1.0 (2017-07-16)

  • equeer layout 1.0 첫 배포

 

설치 방법

  1. 첨부 파일의 압축을 풀어주세요.
  2. equeer_layout 폴더를 ./layouts/equeer_layout 이 경로로 넣어주세요.
  3. 레이아웃 설정에서 공지사항 srl 및 서브 메뉴 위젯을 설정하여 본인의 입맛대로 커스터마이징하세요.
    ※ 공지사항 srl은 게시판 모듈의 고유번호를 뜻합니다. [관리자 > 게시판] 페이지에서 아래 이미지와 같은 곳에 마우스를 가져다대면 하이퍼링크에 module_srl 을 알 수 있습니다.

    srl.png

    srl_2.png

사용자 팝업 메뉴에서 포인트 위젯을 사용하기 위해서는 다음 과정 진행하세요.

  1. XE 자료실에서 포인트 현황 위젯을 다운받아 설치해주세요. (https://www.xpressengine.com/index.php?mid=download&package_id=18324347)
  2. equeer_point 폴더를 ./widget/point_status/skins/equeer_point 이 경로로 넣어주세요.

 

SVG 사용 방법

레이아웃 설정 내 이미지 등록은 png, jpg, gif 등의 이미지 파일만 업로드 가능하기 때문에 svg 파일을 사용하시는 경우 /img/logo.svg 파일을 변경하시고, 레이아웃 설정에서 로고 이미지가 등록된 경우 삭제해주시면 정상적으로 svg 사용이 가능합니다.

 

기술지원

아직 기술지원을 하지 않고 있습니다. 꾸준히 자기개발하여 추후에 기술지원도 가능하게끔 실력을 키워보겠습니다.

 

라이센스

레이아웃에 동봉된 이미지는 자체 브랜드 및 작가 Calvin Snax의 Artworks로 레이아웃 자체의 라이센스와 무관하게 Calvin Snax가 디자인 소유권을 가지고 있으며, 무단 사용 적발시 법적 책임을 물을 수 있습니다. 사이트 적용 시 꼭 수정하셔서 사용하시기 바랍니다.

(이미지를 마음대로 수정해서 쓰시라는 말이 아닙니다. 이미지 사용하지 마시라는 뜻입니다.)

profile 안녕하세요! Digital Product Designer, Calvin Snax입니다.
제 작업물을 확인해보시거나 작업을 의뢰하고 싶으신 분들은 제 사이트를 방문해주세요.
http://calvinsnax.xyz

XE & Rhymix 제작 자료
equeer 레이아웃: https://winx.kr/4EftI
XE 알림센터 모듈 스킨 C!rculator Lite: https://winx.kr/Ea5QVRoF

댓글 '129'

프로필 사진 profile
Booth 2017.08.01 23:24 댓글 별점
로고 이미지 가로폭이 너무 커서 버튼이 밀린 겁니다. 권장 크기로 수정해주세요.
프로필 사진 profile
일단놓고말해 2017.08.02 00:04 댓글 별점
우왕ㅋ굳ㅋ
너무 이뻐요!!!!
잘 사용하겠습니다! 감사합니다!!!! >.<
프로필 사진 profile
일단놓고말해 2017.08.02 08:49 댓글 별점
최근 게시물에서 특정 몇개를 없애고 싶은데 방법을 몰라 헤매고 있습니다.
게시판의 글이 아니고
내용 직접올리기를 통해 올려서 그런지
대표이미지가 적용이 안되고 이미지 내용이 빈 최근 게시물이 생성이 돼어 최근 4개를 빼거나 이미지 적용을 하고 싶어요.
어떻게 하면 좋을까요? 몇시간째 헤매고 있어요.
도움 부탁드리겠습니다;;;;;
프로필 사진 profile
Booth 2017.08.03 01:04 댓글 별점
해당 이슈는 콘텐츠 위젯 개발자 분께 문의드리거나, XE 타운 물어보기 메뉴를 통해 질문 부탁드립니다. 최근 게시물 위젯 내용이 없을 경우 데모 위젯이 출력됩니다. 이 위젯은 사이트 내에 식별되는 모든 게시물 리스트를 출력하도록 되어 있습니다.

레이아웃 폴더 내 subnav.html 파일 안 위젯 코드에 module_srls="출력을 원하는 모듈의 srl" 속성을 추가하시는 방법을 사용할 수도 있습니다만, 직접 위젯을 추가하는 방법을 제일 권장합니다.
프로필 사진 profile
마시마로 2017.08.04 08:53 댓글 별점
이렇게 훌륭한 레이아웃을 무료로 배포해주셔서 너무 감사드립니다.
더불어 문의를 드리고 싶은게 있습니다.
쇼셜XE 적용하였는데 카카오와 네이버만 로그인 버튼이 나오는데요.
저는 5개 소셜사이트를 모두 적용하고 있습니다.
어떻게 해야 쇼셜로그인 버튼이 나오는 것인지요?
제가 따로 적용해야할 설정을 놓친게 있는지 아니면 제작자님이 수정을 해주셔야 하는 문제인지 궁금합니다.
프로필 사진 profile
Booth 2017.08.04 23:01 댓글 별점
본래 운영하던 사이트에서 사용하던 레이아웃이었는데 거기에 XE의 함수로 커스터마이징이 가능하도록 구현한 것이거든요. 기능을 적용하면서 디자인을 제작한 것이 아니기 때문에 레이아웃 설정 상에서 커스텀할 수가 없는 부분도 몇가지 존재합니다ㅠㅠ 소셜 로그인 부분처럼요.
추후에는 좀 더 커스터마이징을 강화한 버전을 배포할 예정입니다. 어쩌면 해당 버전은 유료로 배포될 수도 있습니다.

따라서 현재로는 해당 부분의 html과 css를 직접 수정해주어야 합니다. 간단한 html/css 수정이 가능하시다면,
login.html 파일과 equeer.css를 수정해주세요.

HTML 문서에서는 아래 코드를
<a class="kk" href="{$oSocialxeModel->snsAuthUrl('kakao', 'login')}">Kakao</a>
<a class="nb" href="{$oSocialxeModel->snsAuthUrl('naver', 'login')}">Naver</a>

CSS 문서에서는 아래 코드를
#loginForm .kk {background:#fedc00; margin-right: 2%}
#loginForm .nb {background:#1ec800; margin-right:0}
#loginForm .kk:hover {background: #e4c600}
#loginForm .nb:hover {background: #1bb100}

수정해 주시면 됩니다.
클래스 명 변경해서 쓰셔도 문제없습니다.

HTML에서는
대소문자 구분하셔서 snsAuthUrl 안에 kakao, naver, facebook, google 등 원하는 SNS를 쓰시되, 대소문자 구분하셔야 합니다.

kk와 nb는 각각 카카오와 네이버 로그인 버튼의 색상이며,
그 아래 kk:hover와 nb:hover는 버튼 위에 마우스를 올렸을 때 변경될 색상입니다.
프로필 사진 profile
마시마로 2017.08.06 02:42 댓글 별점
감사합니다. 참고해서 적용하겠습니다. ^^
프로필 사진 profile
마시마로 2017.08.07 02:32 댓글 별점
equeer.css 수정

#loginForm .tw {background:#0099ff; margin-right: 2%}
#loginForm .fb {background:#3300cc; margin-right:0}
#loginForm .gg {background:#ff0033; margin-right: 2%}
#loginForm .kk {background:#fedc00; margin-right: 0}
#loginForm .nb {background:#1ec800; margin-right: 2%}
#loginForm .tw:hover {background: #0066ff}
#loginForm .fb:hover {background: #330099}
#loginForm .gg:hover {background: #ff0000}
#loginForm .kk:hover {background: #e4c600}
#loginForm .nb:hover {background: #1bb100}


login.html 수정

<a class="tw" href="{$oSocialxeModel->snsAuthUrl('twitter', 'login')}">Twitter</a>
<a class="fb" href="{$oSocialxeModel->snsAuthUrl('facebook', 'login')}">Facebook</a>
<a class="gg" href="{$oSocialxeModel->snsAuthUrl('google', 'login')}">Google</a>
<a class="kk" href="{$oSocialxeModel->snsAuthUrl('kakao', 'login')}">Kakao</a>
<a class="nb" href="{$oSocialxeModel->snsAuthUrl('naver', 'login')}">Naver</a>
프로필 사진 profile
charmingcolor 2017.08.05 19:22 댓글 별점
만드시느라 고생 많으셨습니다!
프로필 사진 profile
호잇 2017.08.06 04:58 댓글 별점
너무 깔끔하고 좋아요!
프로필 사진 profile
로보 2017.08.06 12:20 댓글 별점
감사합니다
프로필 사진 profile
레오 2017.08.06 14:27 댓글 별점
잘쓰겠습니당!
프로필 사진 profile
착한악마 2017.08.08 17:13 댓글 별점
감사합니다.
프로필 사진 profile
포카리 2017.08.12 12:11 댓글 별점
감사합니다
프로필 사진 profile
palstn 2017.08.19 19:14 댓글 별점
왓... 이건 XE스킨이 아니라 워드프레스 스킨이예요!
XE스킨 중엔 싸고 맘에 드는 스킨이 없었는데,
워드프레스는 기능이 없고.
진짜 좋은 스킨입니다!
프로필 사진 profile
moonsooter 2017.08.24 00:08 댓글 별점
멋진 레이아웃 감사합니다.
프로필 사진 profile
TEMPA 2017.08.25 02:28 댓글 별점
너무 이쁘네요 감사합니다!
프로필 사진 profile
윤설 2017.08.31 12:40 댓글 별점
잘 사용 하겠습니다.
프로필 사진 profile
칼럼 2017.09.07 23:51 댓글 별점
감사합니다.
프로필 사진 profile
pjk 2017.09.08 13:10 댓글 별점
감사합니다 ^^
프로필 사진 profile
도리 2017.09.08 17:06 댓글 별점
안녕하세요! 처음으로 포인트마켓에서 구매해봅니다.
깨끗하고 좋은 레이아웃이네요. 잘쓸께요
프로필 사진 profile
사르나트 2017.09.08 17:38 댓글 별점
정말감사합니다. 잘쓰겠습니다.
프로필 사진 profile
비누 2017.09.17 15:22 댓글 별점
아니 이런 고퀄이 무료라니 ㅠㅠ
프로필 사진 profile
다이제 2017.09.18 16:45 댓글 별점
진짜이쁘네요
프로필 사진 profile
구미호 2017.09.19 08:11 댓글 별점
안녕하세요 저는 equeer layout ver.1.4.5" 이것으로 설치 하였지만 서브 메뉴가 안나오네요 ㅠㅠ
프로필 사진 profile
Booth 2017.09.20 01:07 댓글 별점
equeer 레이아웃은 메인 페이지를 자동으로 인식해서 메인 비주얼과 서브 메뉴를 표시할지를 결정합니다. 서브 메뉴가 표시되지 않는 페이지가 메인페이지인지 확인해주시고, 메인페이지일 경우 레이아웃 설정에서 [메인에서 서브 메뉴 표시] 항목을 선택해주세요.
레이아웃 설치와 설정이 정상적으로 되었는데도 해당 문제가 지속되신다면 사이트 링크와 사용 중인 CMS 버전(예: Rhymix 1.8.45)과 함께 문의해주셔야 원활한 답변이 가능합니다. 그리고 현재 이퀴어 레이아웃은 새로운 버전을 준비 중입니다. 대부분의 문제는 구버전의 XE에서 발생하는 문제이니 참고 바랍니다.
프로필 사진 profile
구미호 2017.09.25 00:17 댓글 별점
혹시 이 레이아웃이 "Rhymix" 전용인가요 ...?
프로필 사진 profile
Booth 2017.09.25 01:10 댓글 별점
css를 사용했기에 굳이 라이믹스 전용은 아닙니다. 오래된 XE 코어에서 지원되지 않는 기능을 레이아웃이 가지고 있을 수도 있기 때문에 가급적 최신 버전의 XE 또는 라이믹스를 권장하는 것입니다.
프로필 사진 profile
Sh 2017.09.23 11:16 댓글 별점
멋저요~
서버에 요청 중입니다. 잠시만 기다려 주십시오...