테스트 사이트 - 개발 중인 베타 버전입니다

고수님들 레이아웃 변경할려면 어떻게 수정해야 하나요? 채택완료

완전땡초보 4년 전 조회 2,584

==================================================================

이렇게 넣으면 한줄에 가로2개로 나누어 나올줄 알았는데 그래도 한줄씩 아래로 출력 되는군요. ㅠ ㅜ

<div class="margin-bottom-30">
    <?php echo eb_latest('1517122147'); ?> <?php echo eb_latest('1517122147'); ?>
< /div>

==================================================================

 

index 레이아웃을 사진처럼 나누어 보고 싶어요. 고수님들

소스좀 수정하고 싶은데 도움 부탁 드립니다.

아래는 수정하지 않은 index.html.php 소스입니다.

 

<?php
/**
 * theme file : /theme/THEME_NAME/index.html.php
 */
if (!defined('_EYOOM_')) exit;
?>

<div id="fakeloader"></div>

<?php echo eb_slider('1516512257'); ?>

<div class="margin-bottom-30">
    <?php echo eb_latest('1518393947'); ?>
</div>

<div class="margin-bottom-30">
    <?php echo eb_latest('1517122147'); ?>
</div>

<div class="margin-bottom-30">
<?php echo eb_latest('1614265194'); ?>
</div>

<div class="margin-bottom-30">
<?php echo eb_latest('1614176230'); ?>
</div>


<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/fakeLoader/fakeLoader.min.js"></script>
<script>
$('#fakeloader').fakeLoader({
    timeToHide:3000,
    zIndex:"11",
    spinner:"spinner6",
    bgColor:"#f4f4f4",
});

$(window).load(function(){
    $('#fakeloader').fadeOut(300);
});
</script>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
j
4년 전

<div id="fakeloader"></div>

<?php echo eb_slider('1516512257'); ?> 아래 부분인 

 

 

 class="margin-bottom-30" div에 css적용하시면 될것 같습니다.

기본적으로 사용하는 템플릿이 100% 넓이로 쌓여가는 방식인 것 같습니다.

css수정을 통하여 원하시는 스타일링 해보시길 바랍니다.

 

css 파일은 theme 를 사용하지 않는다면 css파일에 default / 모바일이면 mobile 을 수정하시면 됩니다.

 

그외 관리자모드로 찍어보고 수정 하는것이 더욱 확실합니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 7개

완전땡초보
4년 전
쉬운건줄 알았더니 어려운 거군요.
제가 알고 있는 명령어가 </br> 밖에 없는 상황이라 쉽게 설명해 주셨는데도 잘 모르겠습니다.
조금더 자세히 알려 주시면 안될까요? ^^
완전땡초보
4년 전
저는 이윰빌더를 사용하고 있습니다.
말씀하신 css 파일이 /theme/eb4_basic/css -> common.css ,style.css 등등 여러 파일들이 있더라구요. 이곳에서 파일을 열어서 수정하는건가요?
j
jayz
4년 전
혹시 해당 링크를 알려주실수 있을까요 ?
테마 사용 여부등을 몰라 링크를 제가 관리자 모드로 보고 답변 드리는게 좀더 자세히 말씀드릴수 있을 것 같습니다.
완전땡초보
4년 전
네 감사합니다.
http://www.hwsuri.com 입니다.
완전땡초보
4년 전
도움 감사드립니다.
해결 되었어요.^^
j
jayz
4년 전
테마를 사용중이시네요. 해당 테마 파일 css 에 common.css 을 파일을 수정하시면 될 것 같고

.margin-bottom-30 부분 수정해주시면 될 것 같습니다. .margin-bottom-30은 다른페이지 에도 공용으로 사용하는 클래스명이라 style="margin-bottom-30 styleself" 로 별도의 클래스명 을 하나 더 부여한 뒤에 스타일을 하시면 좀 더 편리 하실거에요.

style="margin-bottom-30 styleself1"
style="margin-bottom-30 styleself2"
style="margin-bottom-30 styleself3"
style="margin-bottom-30 styleself4"
로 부여 했다고 가정하에

.margin-bottom-30.styleself1{width:50%;float:left}
.margin-bottom-30.styleself2{width:50%;float:left}
.margin-bottom-30.styleself3{width:50%;float:left}
.margin-bottom-30.styleself4{width:50%;float:left}

그대로 긁어 사용하셔도 무방하며, width값은 사용자 편리대로 바꾸어 가면서 이용해보세요
그외에 상세한 작업은 직접 공부하시거나 의뢰를 맡기셔야 할 것 같습니다.
완전땡초보
4년 전
네 알려주신 내용을 토대로 열심히 공부 하겠습니다.
도움 주셔서 너무 감사 드립니다.^^

댓글을 작성하려면 로그인이 필요합니다.

4년 전

<div class="row margin-bottom-30">
    <div class="col-md-6">        
        <?php echo eb_latest('1517122147'); ?>
    </div>
    <div class="col-md-6">    
        <?php echo eb_latest('1517122147'); ?>        
    </div>
</div>

 

※ https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

완전땡초보
4년 전
너무너무 감사합니다.
반반 나누어 잘 나옵니다.
참고로 올려주신 링크도 많은 도움이..... 욜심히 공부하겠습니다.
시원한 답변 감사드려요.^^
완전땡초보
4년 전
마르스컴퍼니님께서 알려 주신데로 수정하니까 원하는데로 레이아웃을 꾸밀수 있었습니다.
저와 같은 초보님들께 많은 도움이 될것 같아 결과물 올려 보아요.
다시한번 감사말씀 올립니다.

<?php
/**
* theme file : /theme/THEME_NAME/index.html.php
*/
if (!defined('_EYOOM_')) exit;
?>

<div id="fakeloader"></div>

<?php echo eb_slider('1516512257'); ?>

<div class="margin-bottom-30">
<?php echo eb_latest('1518393947'); ?>
</div>

<div class="margin-bottom-30">
<?php echo eb_latest('1517122147'); ?>
</div>

<div class="margin-bottom-30">
<?php echo eb_latest('1614265194'); ?>
</div>

<div class="margin-bottom-30">
<?php echo eb_latest('1614176230'); ?>
</div>

======= 한줄에 레이아웃 비균형 2개로 나오게 하기 =======
<div class="row margin-bottom-30">
<div class="col-md-4">
<?php echo eb_latest('1517122147'); ?>
</div>
<div class="col-md-8">
<?php echo eb_latest('1517122147'); ?>
</div>
</div>
===========================================
======== 한줄에 레이아웃 균일하게 2개로 나오게 하기 =======
<div class="row margin-bottom-30">
<div class="col-md-6">
<?php echo eb_latest('1517122147'); ?>
</div>
<div class="col-md-6">
<?php echo eb_latest('1517122147'); ?>
</div>
</div>

===========================================

참고로 3개 불균형하게 나오기

<div class="row margin-bottom-30">
<div class="col-md-3">
<?php echo eb_latest('1517122147'); ?>
</div>
<div class="col-md-6">
<?php echo eb_latest('1517122147'); ?>
</div>
<div class="col-md-3">
<?php echo eb_latest('1517122147'); ?>
</div>

</div>

=========================================

<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/fakeLoader/fakeLoader.min.js"></script>
<script>
$('#fakeloader').fakeLoader({
timeToHide:3000,
zIndex:"11",
spinner:"spinner6",
bgColor:"#f4f4f4",
});

$(window).load(function(){
$('#fakeloader').fadeOut(300);
});
</script>

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인