[이윰] 아웃로그인 레이아웃 변경하기

페이지 정보

루루아빠 3,217 1 2015.06.19 00:56

평점

  • 평점 : 0점 (0명 참여)

본문

1. 그누보드5/eyoom/theme/설치된 테마/css/style.css 를 열고 .service-block-e .progress { 을 찾는다.

수정 전

.service-block-e .progress {
    margin-bottom: 0px;
}

/*Service Innner*/
.service-block-e .service-in small {
    font-size: 12px;
    text-transform: uppercase;
}

.service-block-e .service-in h4 {
    font-size: 14px;
    line-height: 0.9;
    margin-bottom: 0;
}
수정 후

.service-block-e .progress {        /* 루루아빠 수정 -  아웃로그인 progress bar 아래 간격 // 원래 값 : margin-bottom: 7px; */
    margin-bottom: 0px;
}

/*Service Innner*/
.service-block-e .service-in small {
    font-size: 12px;                            /* 루루아빠 수정 -  아웃로그인 포인트, 경험치 폰트 크기 // 원래 값 : font-size: 14px; */
    text-transform: uppercase;
}

.service-block-e .service-in h4 {
    font-size: 14px;
    line-height: 0.9;                            /* 루루아빠 수정 -  아웃로그인 레벨과 최고관리자 표기 아래 짤림 해결 // 원래 값 : line-height: 0.8; */
    margin-bottom: 0;
}

2. 1. 그누보드5/eyoom/theme/설치된 테마/css/common.css 를 열고 .progress-xxs { 를 찾아 } 아래쪽에 다음 소스를 추가한다.

/* 루루아빠 추가 - 아웃로그인 progress-bar 높이 추가 시작 */
.progress-xxxs {
    height: 5px;
}
/* 루루아빠 추가 - 아웃로그인 progress-bar 높이 추가 끝 */

3. 그누보드5/eyoom/theme/설치된 테마/skin_bs/outlogin/basic/outlogin.skin.2.html 을 열고 다음과 같이 작업한다.
<a href="{C.G5_BBS_URL}/point.php" target="_blank" id="ol_after_pt" class="member-point"> 을 찾아 소스를 교체한다.

수정 전

        <a href="{C.G5_BBS_URL}/point.php" target="_blank" id="ol_after_pt" class="member-point">
            <i class="fa fa-tachometer"></i>
            <span class="service-heading">{levelset.gnu_name}</span>
            <span class="counter">{point}</span>
        </a>

        <div class="clearfix"></div>

        <div class="row member-lv margin-bottom-10">
            <div class="col-xs-6 service-in">
                <small>레벨</small>
                <h4 class="counter">{eyoomer.level}</h4>
            </div>
            <div class="col-xs-6 text-right service-in">
                <small>{levelset.eyoom_name}</small>
                <h4 class="counter">{=number_format(eyoomer.level_point)}</h4>
            </div>
        </div>
        <div class="row statistics">
            <h3 class="heading-xs">Progress Bar <span class="pull-right">{lvinfo.ratio}%</span></h3>
            <div class="progress progress-e progress-xxs">
                <div style="width: {lvinfo.ratio}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="{lvinfo.ratio}" role="progressbar" class="progress-bar progress-bar-light">
                </div>
            </div>
        </div>
수정 후

        <div class="row member-lv margin-bottom-10">
            <div class="col-xs-6 service-in">
                <a href="{C.G5_BBS_URL}/point.php" target="_blank" id="ol_after_pt" class="member-point">
                    <i class="fa fa-tachometer"></i>
                    <small>{levelset.gnu_name}</small>
                    <h4 class="counter">{point}</h4>
                </a>
            </div>
            <div class="col-xs-6 text-right service-in">
                <small>{levelset.eyoom_name}</small>
                <h4 class="counter">{=number_format(eyoomer.level_point)}</h4>
            </div>
        </div>
        <div class="row statistics">
            <h3 class="heading-xs">Progress Bar <span class="pull-right">{lvinfo.ratio}%</span></h3>
            <div class="progress progress-xxxs progress-striped active">
                <div class="progress-bar progress-bar-danger" style="width: {lvinfo.ratio}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="{lvinfo.ratio}" role="progressbar" class="progress-bar progress-bar-light">
                </div>
            </div>
        </div>

4. 그누보드5/eyoom/theme/설치된 테마/skin_bs/outlogin/basic/style.css 을 열고 다음과 같이 작업한다.
.ol-after .service-block-e .service-in h4 { 를 찾아 } 바로 위쪽에 다음 소스를 추가한다.

/*  루루아빠 추가 -  포인트 아래 숫치 정렬 시작 */
/*   text-overflow: ellipsis; */        /*  루루아빠 수정 -  수치를 그대로 표현 // 원래 값 : text-overflow: ellipsis; */        
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  padding-top: 2px;
/*  루루아빠 추가 -  포인트 아래 숫치 정렬 끝 */
.ol-after .member-lv { 를 찾아 다음과 같이 수정한다.

.ol-after .member-lv {
    border-top: 1px solid #eee;
    padding-top: 10px;
}
수정 후

.ol-after .member-lv {
    /* border-top: 1px solid #eee; */        /* 루루아빠 수정 -  경험치 위 라인 주석 처리 */    
    padding-top: 10px;                            /* 루루아빠 수정 -  경험치 위 여백 // 원래 값 : padding-top: 15px;*/
}

현재 루루홈의 아웃로그인 레이아웃이다.
추천인 1
  • shadow2fox
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,295,216
레벨 97
경험치 1,399,190

Progress Bar 9%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 2421013 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 현재 주소를 변수에 미리 담아 에러 메세지 후 현재 주소로 이동시키기 루루아빠 2017.05.24 2,770 0
이윰  🏆 Eyoom Builder 1.3.11 패치 루루아빠 2017.11.21 2,630 0
이윰  🏆 전체검색 리스트 페이지에서 외부 이미지도 썸네일 사용하기 루루아빠 2018.05.06 2,296 0
이윰  🏆 이윰빌더 시즌1 → 시즌4 업그레이드 가이드 shadow2fox 2018.10.05 2,591 0
이윰  🏆 게시판 basic 스킨 목록 보기에서 가운데로 정렬하기 루루아빠 2015.04.10 2,840 0
이윰  🏆 배너 광고 설정법 루루아빠 2015.05.20 3,198 0
이윰  🏆 이윰빌더1.1.2 패치후 사이드바 레이아웃 관련 추가 패치 루루아빠 2015.06.01 3,164 0
이윰  🏆 이윰빌더 1.1.5 패치 루루아빠 2015.06.22 3,454 0
이윰  🏆 new 이미지를 출력하는 시간을 늘리기 루루아빠 2015.07.28 2,920 0
이윰  댓글+1🏆 "부트스트랩" 기반 동영상 반응형 조정하기 루루아빠 2015.09.15 2,786 0
이윰  🏆 Eyoom Builder 1.1.15 패치 루루아빠 2015.11.09 3,052 0
이윰  🏆 부트스트랩(bootstrap)의 반응형 테이블(table-responsive) 사용시 모바일에서 나타나는 border 없애기 루루아빠 2016.03.04 3,588 0
이윰  🏆 태그 더보기시 페이지당 태그 노출 갯수 조정하기 루루아빠 2016.08.25 2,849 0
이윰  🏆 Eyoom Builder 1.3.12 패치 루루아빠 2017.11.21 2,850 0
이윰  🏆 Eyoom Builder 3.0.2 패치 루루아빠 2018.05.14 2,042 0
이윰  🏆 Eyoom Builder 3.0.7 패치 shadow2fox 2018.10.15 2,280 0
이윰  댓글+2🏆 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3,308 0
이윰  🏆 1.1.0 패치 후 카테고리 사용하면 분류 선택시 미등록페이지로 나오는 문제 루루아빠 2015.05.21 2,931 0
이윰  🏆 커뮤니티 테마 사용시 회원 가입시 오류 문제 루루아빠 2015.06.01 2,811 0
이윰  🏆 이윰빌더 1.1.6 패치 루루아빠 2015.06.23 3,409 0