อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderator: mindphp, ผู้ดูแลกระดาน

Before Dong
PHP VIP Members
PHP VIP Members
โพสต์: 1569
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โพสต์ที่ยังไม่ได้อ่าน โดย Before Dong »

หน้าเมนู Product พอแบ่งตำแหน่งเป็น span2 กับ span10 มันจะทำให้ตำแหน่งในหน้าอื่นเลื่อน
รูปภาพ




มีวิธีที่ทำให้หน้าอื่นใน span 10 เลื่อนไปชิดซ้ายใน span 2 ไหมครับ
รูปภาพ


Code HTML

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<link rel="stylesheet" href="user.css" />
	<meta name=viewport content="width=device-width, initial-scale=1">
	<jdoc:include type="head" />
</head>
<body id="page_bg">		
		<div class="container" id="con-border-logo">
				<div class="container">
					<div class="col-sm-10" id="center_div_top" > <jdoc:include type="modules" name="top" style="xhtml"/> </div>
				</div>
						
					<img src="http://snap.mindphp.com/index.php?view=2017Jul22_59731b8dd3e2b">
          
					<div class="container" >
					<div class="col-md-12">
						<div  id="center_div">
                                <nav class="navigation" role="navigation">
                        <div class="navbar pull-left">
                            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                        </div>
                        <div class="nav-collapse">
                            <jdoc:include type="modules" name="user3" style="xhtml"/>
                        </div>
                    </nav>
						
						 </div>
						 
					</div>
				</div>	
          				
					<div class="container">
						<div class="span12"></div>
					</div>				
		</div>
		
		<div class="container" id="con-border">

			<div class="container" id="div_bread">
				<div class="span12">  <jdoc:include type="modules" name="breadcrumb" style="xhtml"/> </div>
			</div>
			
          
			<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
              
                 <div class="span10" >
           			<div > 
              			<jdoc:include type="message" />
             			 <jdoc:include type="component" />
         			 </div>
              </div>

 			</div>
          
			<div class="container" id="div_right">
				<div class="span12" ><jdoc:include type="modules" name="right" style="xhtml"/></div>
			</div>
			
			
			
				<div class="container" >
					<div class="col-md-12" id="div_foot">
						<jdoc:include type="modules" name="footer" style="xhtml"/>
					</div>
                    </div>                                                             
				</div>		
		
		</div>
		
		
		
		<div class="footer">
			<jdoc:include type="modules" name="debug" style="xhtml"/>
		</div>
		
</body>
</html>
CODE CSS

โค้ด: เลือกทั้งหมด

#con-border-logo{
margin-top:25px;
height:90px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
border-radius:10px 10px 0px 0px;

border-color: white;
border-width: 5px;
border-style: solid;
}
#con-border{
margin-top:0px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
padding-top: 5px;
border-color: white;
border-width: 5px;
border-style: solid;
border-radius:0px 0px 10px 10px;
margin-bottom:30px;
}
#col-right{
float: center;
}

#center_div {
width:100%;

}



.li-color{
display:block;

}

#center_div_top{


}

#div_foot{

}


#page_bg {
    background: #0C3A6D
}
#div_content{
margin-top:300px;
}
ul.nav.menu.nav-pills {
    border-radius: 5px;
    background-color: white;
    height: 30px;
    margin-top: 0;
    border-radius: 15px;
    line-height: 20px;
    margin-left: 23%;
    float: left;
    background: #fff;
  box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.48);
}



div#maindivider {
    margin-bottom: 10px;
    overflow: hidden;
}

#maincontent{
 border-style: solid;
 border-color: #ebebeb;
 background:white;
  border-width: 1px;
}

#maincontent > .span10{
 margin-left:0px;
}

div.moduletable {

}

.nav {
    margin-left: 0;
    list-style: none;
}

.navigation{

}
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
                 <div class="span10" >
                    <div >
                       <jdoc:include type="message" />
                       <jdoc:include type="component" />
                   </div>
              </div>
          </div>
จากโค้ดจะแบ่งการแสดงเป็น 2 ส่วน ตาม grid ของ bootstrap เป็น span2 กับ span10

ซึ่งในตำแหน่ง left ที่เป็น span2 อาจจะไม่ได้กำหนดให้แสดงทุกหน้า ซึ่งอาจจะทำให้บางหน้าเกิดช่องว่างทางซ้ายได้

เพราะฉะนั้นใน template เราจะต้องใช้เงื่อนไขในการกำหนดขนาด

เช่น ถ้าไม่มีตำแหน่ง left ที่เป็น span2 ให้ตำแหน่ง component ที่เป็น span10 ปรับเป็น span12 แทน เพื่อให้มันแสดงเต็มจอ

ก่อนอื่นกำหนดเงื่อนไขให้กับตำแหน่ง left คือไม่มีการแสดงในตำแหน่ง left ก็จะไม่แสดง span2

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="span10" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

จากนั้นกำหนดเงื่อนไขให้กับตำแหน่ง component คือไม่มีการแสดงในตำแหน่ง left ก็จะแสดง span12 ถ้ามีจะแสดง span10

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="<?php echo ($this->countModules('left')) ? 'span10' : 'span12' ; ?>" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Before Dong
PHP VIP Members
PHP VIP Members
โพสต์: 1569
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

Re: อยากย้าย Component ไปยังตำแหน่งในรูปภาพ ย้ายยังไงครับ

โพสต์ที่ยังไม่ได้อ่าน โดย Before Dong »

tsukasaz เขียน:

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
                <div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
                 <div class="span10" >
                    <div >
                       <jdoc:include type="message" />
                       <jdoc:include type="component" />
                   </div>
              </div>
          </div>
จากโค้ดจะแบ่งการแสดงเป็น 2 ส่วน ตาม grid ของ bootstrap เป็น span2 กับ span10

ซึ่งในตำแหน่ง left ที่เป็น span2 อาจจะไม่ได้กำหนดให้แสดงทุกหน้า ซึ่งอาจจะทำให้บางหน้าเกิดช่องว่างทางซ้ายได้

เพราะฉะนั้นใน template เราจะต้องใช้เงื่อนไขในการกำหนดขนาด

เช่น ถ้าไม่มีตำแหน่ง left ที่เป็น span2 ให้ตำแหน่ง component ที่เป็น span10 ปรับเป็น span12 แทน เพื่อให้มันแสดงเต็มจอ

ก่อนอื่นกำหนดเงื่อนไขให้กับตำแหน่ง left คือไม่มีการแสดงในตำแหน่ง left ก็จะไม่แสดง span2

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="span10" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

จากนั้นกำหนดเงื่อนไขให้กับตำแหน่ง component คือไม่มีการแสดงในตำแหน่ง left ก็จะแสดง span12 ถ้ามีจะแสดง span10

โค้ด: เลือกทั้งหมด

<div class="container" id="maincontent">
		<?php if ($this->countModules('left')) : ?>
			<div class="span2" > <jdoc:include type="modules" name="left" style="xhtml"/></div>
		<?php endif; ?>
		<div class="<?php echo ($this->countModules('left')) ? 'span10' : 'span12' ; ?>" >
			<div >
				<jdoc:include type="message" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>

พอกำหนดเงื่อนไขให้กับ Modules left ก็จะได้ตามรูป
รูปภาพ
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 95