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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: Q - เปลี่ยน Breadcum order step แล้ว css เพี้ยนครับ

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) Viewed 1188 times
พอกด next step ก็เกิดแบบนี้ครับ
Selection_999(512).png
Selection_999(512).png (13.42 KiB) Viewed 1188 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;
}  

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

โดย tsukasaz » 31/07/2019 6:32 pm

table กับ ul มันเป็นโค้ด html ครับ

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

โดย Patipat » 31/07/2019 4:37 pm

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

ก็คือแก้แค่ในไฟล์ css ที่ overried มาใช่ไหมครับ เปลี่ยนจาก table เป็น ul

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

โดย tsukasaz » 31/07/2019 3:22 pm

override มาแก้ได้ครับ

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

โดย Patipat » 31/07/2019 3:13 pm

เราสามารถเปลี่ยนได้ไหมครับ จาก table เป็น ul

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

โดย tsukasaz » 31/07/2019 2:55 pm

โครงสร้าง html มันไม่เหมือนกันครับ มันเป็น tag table กับ ul

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

1.
Selection_999(504).png
Selection_999(504).png (8.02 KiB) Viewed 1209 times
2.
Selection_999(505).png
Selection_999(505).png (9.6 KiB) Viewed 1209 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;
}

ข้างบน