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

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

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

Before Dong
PHP VIP Members
PHP VIP Members
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong » 24/07/2017 10:50 am

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




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


Code HTML

Code: Select all

<!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

Code: Select all

#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{

}

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10571
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 24/07/2017 11:43 am

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong » 24/07/2017 12:07 pm

tsukasaz wrote:

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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 ก็จะได้ตามรูป
Image

Post Reply

Return to “Joomla Development”

Users browsing this forum: No registered users and 1 guest