고수님들 레이아웃 변경할려면 어떻게 수정해야 하나요?
본문
==================================================================
이렇게 넣으면 한줄에 가로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
<div id="fakeloader"></div>
<?php echo eb_slider('1516512257'); ?> 아래 부분인
class="margin-bottom-30" div에 css적용하시면 될것 같습니다.
기본적으로 사용하는 템플릿이 100% 넓이로 쌓여가는 방식인 것 같습니다.
css수정을 통하여 원하시는 스타일링 해보시길 바랍니다.
css 파일은 theme 를 사용하지 않는다면 css파일에 default / 모바일이면 mobile 을 수정하시면 됩니다.
그외 관리자모드로 찍어보고 수정 하는것이 더욱 확실합니다
쉬운건줄 알았더니 어려운 거군요.
제가 알고 있는 명령어가 </br> 밖에 없는 상황이라 쉽게 설명해 주셨는데도 잘 모르겠습니다.
조금더 자세히 알려 주시면 안될까요? ^^
저는 이윰빌더를 사용하고 있습니다.
말씀하신 css 파일이 /theme/eb4_basic/css -> common.css ,style.css 등등 여러 파일들이 있더라구요. 이곳에서 파일을 열어서 수정하는건가요?
혹시 해당 링크를 알려주실수 있을까요 ?
테마 사용 여부등을 몰라 링크를 제가 관리자 모드로 보고 답변 드리는게 좀더 자세히 말씀드릴수 있을 것 같습니다.
네 감사합니다.
http://www.hwsuri.com 입니다.
도움 감사드립니다.
해결 되었어요.^^
테마를 사용중이시네요. 해당 테마 파일 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값은 사용자 편리대로 바꾸어 가면서 이용해보세요
그외에 상세한 작업은 직접 공부하시거나 의뢰를 맡기셔야 할 것 같습니다.
네 알려주신 내용을 토대로 열심히 공부 하겠습니다.
도움 주셔서 너무 감사 드립니다.^^
<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
너무너무 감사합니다.
반반 나누어 잘 나옵니다.
참고로 올려주신 링크도 많은 도움이..... 욜심히 공부하겠습니다.
시원한 답변 감사드려요.^^
마르스컴퍼니님께서 알려 주신데로 수정하니까 원하는데로 레이아웃을 꾸밀수 있었습니다.
저와 같은 초보님들께 많은 도움이 될것 같아 결과물 올려 보아요.
다시한번 감사말씀 올립니다.
<?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>
