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

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

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

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

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

Post by Patipat » 31/07/2019 2:41 pm

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

Code: Select all

<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>
โค้ดทดลองใช้งาน

Code: Select all

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

1.
Selection_999(504).png
Selection_999(504).png (8.02 KiB) Viewed 230 times
2.
Selection_999(505).png
Selection_999(505).png (9.6 KiB) Viewed 230 times
โค้ดที่ทำการเปลี่ยน breadcum

Code: Select all

<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 ที่นำมาใช้ครับ

Code: Select all

* {
  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. :)

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

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

Post by 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
Posts: 996
Joined: 10/06/2019 10:12 am

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

Post by Patipat » 31/07/2019 3:13 pm

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

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

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

Post by 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
Posts: 996
Joined: 10/06/2019 10:12 am

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

Post by Patipat » 31/07/2019 4:37 pm

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

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

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

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

Post by 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
Posts: 996
Joined: 10/06/2019 10:12 am

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

Post by Patipat » 31/07/2019 7:28 pm

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

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

Code: Select all

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

Code: Select all

#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;
}  
If you fall, let you stand. :)

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Development”

Who is online

Users browsing this forum: No registered users and 4 guests