Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

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

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

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 965
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย Patipat » 31/07/2019 2:41 pm

คือ ว่าผมจะเปลี่ยน breadcum ผมนำ css มาใช้งานแต่ว่า ตอนทดลองใช้แล้วขึ้นครับ พอนำไปใส่กับ โค้ดผมเอง มันเพี้ยนอยู่ครับ
โค้ด Breadcum ที่ยังไม่ได้เปลี่ยนครับ

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

<table class = "jshop" id = "jshop_menu_order">
  <tr>
    <?php foreach($this->steps as $k=>$step){?>
      <td class = "jshop_order_step <?php print $this->cssclass[$k]?>">
        <?php print $step;?>
      </td>
    <?php }?>
  </tr>
</table>


โค้ดทดลองใช้งาน

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

<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
</
ul

หน้านี้ทดลองใช้งานครับ ในกรอบสีเขียวก็ขึ้นปกติ
Selection_999(503).png
Selection_999(503).png (8.2 KiB) เปิดดู 150 ครั้ง


พอผมนำไปใส่ในโค้ด แล้ว step แรกขึ้นแบบนี้ครับภาพที่1 แต่พอกด step 2 มันขึ้น css ครับ ดังภาพที่ 2

1.
Selection_999(504).png
Selection_999(504).png (8.02 KiB) เปิดดู 150 ครั้ง


2.
Selection_999(505).png
Selection_999(505).png (9.6 KiB) เปิดดู 150 ครั้ง


โค้ดที่ทำการเปลี่ยน breadcum

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

<ul id="breadcrumb">
<?php foreach($this->steps as $k=>$step){?> 
  <li>
      <span class="icon icon-double-angle-right"></span>  
       <?php print $step;?>
      </li>
      <?php }?>
</ul>


**พอจะมีวิธีการใส่ ไหมครับ

ส่วนนี้คือ css ที่นำมาใช้ครับ

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

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

body {
  text-align: center;
  background-color: #34495e;
}

h1 {
  font-weight: 100;
  font-size: 32px;
  padding: 40px;
  color: #fff;
}

#breadcrumb {
  list-style: none;
  display: inline-block;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #FFF;
  display: block;
  background: #3498db;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
}
#breadcrumb li:nth-child(even) a {
  background-color: #2980b9;
}
#breadcrumb li:nth-child(even) a:before {
  border-color: #2980b9;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: #2980b9;
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #3498db;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}
#breadcrumb li a:hover {
  background-color: #1abc9c;
}
#breadcrumb li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #1abc9c;
}
#breadcrumb li a:active {
  background-color: #16a085;
}
#breadcrumb li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #16a085;
}
If you fall, let you stand. :)

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

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย tsukasaz » 31/07/2019 2:55 pm

โครงสร้าง html มันไม่เหมือนกันครับ มันเป็น tag table กับ ul
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 965
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย Patipat » 31/07/2019 3:13 pm

เราสามารถเปลี่ยนได้ไหมครับ จาก table เป็น ul
If you fall, let you stand. :)

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

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย tsukasaz » 31/07/2019 3:22 pm

override มาแก้ได้ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 965
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย Patipat » 31/07/2019 4:37 pm

ในตัวทดลองผมแค่ใส่ใน css นะครับ แต่ว่าถ้าจะเปลี่ยนจาก tag table ให้เป็น ul

ก็คือแก้แค่ในไฟล์ css ที่ overried มาใช่ไหมครับ เปลี่ยนจาก table เป็น ul
If you fall, let you stand. :)

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

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย tsukasaz » 31/07/2019 6:32 pm

table กับ ul มันเป็นโค้ด html ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 965
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

Re: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

โพสต์โดย Patipat » 31/07/2019 7:28 pm

ได้แล้วครับ ทำการเปลี่ยน id ให้ตรงกันแล้วก็ เปลี่ยนจาก tag table เป็น ul ให้ตรงกันครับ แต่ว่า พอกด step ที่ 2 ดันไปอยุ่ข้างล่างครับ ก็เลยยังไม่แน่ใจว่า เป็นบัคที่ตรงไหนครับ

ภาพนี้คือ สเต็บแรก ไม่มีปัญหาครับ
Selection_999(513).png
Selection_999(513).png (3.81 KiB) เปิดดู 129 ครั้ง


พอกด next step ก็เกิดแบบนี้ครับ
Selection_999(512).png
Selection_999(512).png (13.42 KiB) เปิดดู 129 ครั้ง


โค้ด

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

<?php 
$document 
JFactory::getDocument();
$document->addStyleSheet('/helix3/templates/shaper_helix3/css/mooziicart.css');

?>

<ul id = "breadcrumb">
    <?php foreach($this->steps as $k=>$step){?>
      <li> <a class = "jshop_order_step">
      <?php print $step;?> </a></li>
    <?php }?>
  
</ul>


โค้ด css

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

#breadcrumb {
  
list-stylenone;
  
displayinline-block;
}
#breadcrumb .icon {
  
font-size14px;
}
#breadcrumb li {
  
floatleft;
}
#breadcrumb li a {
  
color#FFF;
  
displayblock;
  
background#e7325a;
  
text-decorationnone;
  
positionrelative;
  
height40px;
  
line-height40px;
  
padding0 10px 0 5px;
  
text-aligncenter;
  
margin-right23px;
  
font-size13px;
}
#breadcrumb li:nth-child(even) a {
  
background-color#e7325a;
}
#breadcrumb li:nth-child(even) a:before {
  
border-color#e7325a;
  
border-left-colortransparent;
}
#breadcrumb li:nth-child(even) a:after {
  
border-left-color#e7325a;
}
#breadcrumb li:first-child a {
  
padding-left15px;
  -
moz-border-radius4px 0 0 4px;
  -
webkit-border-radius4px;
  
border-radius4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  
bordernone;
}
#breadcrumb li:last-child a {
  
padding-right15px;
  -
moz-border-radius0 4px 4px 0;
  -
webkit-border-radius0;
  
border-radius0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  
bordernone;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  
content"";
  
positionabsolute;
  
top0;
  
border0 solid #e7325a;
  
border-width20px 10px;
  
width0;
  
height0;
}
#breadcrumb li a:before {
  
left: -20px;
  
border-left-colortransparent;
}
#breadcrumb li a:after {
  
left100%;
  
border-colortransparent;
  
border-left-color#e7325a; 
  
}
#breadcrumb li a:hover {
  
background-color#e65272;
}
#breadcrumb li a:hover:before {
  
border-color#e65272;
  
border-left-colortransparent;
}
#breadcrumb li a:hover:after {
  
border-left-color#e65272;
}
#breadcrumb li a:active {
  
background-color#e65272;
}
#breadcrumb li a:active:before {
  
border-color#e65272;
  
border-left-colortransparent;
}
#breadcrumb li a:active:after {
  
border-left-color#e65272;
}  
If you fall, let you stand. :)


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 8 และ บุคคลทั่วไป 0 ท่าน