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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

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

คือ ว่าผมจะเปลี่ยน 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) Viewed 1211 times
พอผมนำไปใส่ในโค้ด แล้ว step แรกขึ้นแบบนี้ครับภาพที่1 แต่พอกด step 2 มันขึ้น css ครับ ดังภาพที่ 2

1.
Selection_999(504).png
Selection_999(504).png (8.02 KiB) Viewed 1211 times
2.
Selection_999(505).png
Selection_999(505).png (9.6 KiB) Viewed 1211 times
โค้ดที่ทำการเปลี่ยน 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;
}
Kor ma di kub. :)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22072
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

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

โครงสร้าง 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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

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

เราสามารถเปลี่ยนได้ไหมครับ จาก table เป็น ul
Kor ma di kub. :)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22072
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

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

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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

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

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

ก็คือแก้แค่ในไฟล์ css ที่ overried มาใช่ไหมครับ เปลี่ยนจาก table เป็น ul
Kor ma di kub. :)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22072
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

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

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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

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

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

ภาพนี้คือ สเต็บแรก ไม่มีปัญหาครับ
Selection_999(513).png
Selection_999(513).png (3.81 KiB) Viewed 1190 times
พอกด next step ก็เกิดแบบนี้ครับ
Selection_999(512).png
Selection_999(512).png (13.42 KiB) Viewed 1190 times
โค้ด

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

<?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-style: none;
  display: inline-block;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #FFF;
  display: block;
  background: #e7325a;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  font-size: 13px;
}
#breadcrumb li:nth-child(even) a {
  background-color: #e7325a;
}
#breadcrumb li:nth-child(even) a:before {
  border-color: #e7325a;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: #e7325a;
}
#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 #e7325a;
  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: #e7325a; 
  
}
#breadcrumb li a:hover {
  background-color: #e65272;
}
#breadcrumb li a:hover:before {
  border-color: #e65272;
  border-left-color: transparent;
}
#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-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #e65272;
}  
Kor ma di kub. :)
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: Bing [Bot] และบุคลทั่วไป 1