คือ กำลังงง กับตัวนี้นะครับ เลยขอคำแนะนำคับ
1. I begin by navigating to styles.css at skin > frontend > default > abn > css in the Magento hierarchy. I head to about line 115 and add the following description.
/*Content Slider & Hero Images */
#content-slider img {border: #fff solid 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px;}
2. This bit of CSS adds a five-pixel-wide border around all of the images added to this section of the page. It also rounds the corners.
3. Next, I added some width and height constraints to the unordered list and gave it a relative position. At the same time, I changed the display style for the list items and gave them an absolute position.
#content-slider .five-img-slide {list-style: none; margin: 0 0 0 -8px; position: relative; width: 960px; height:470px;}
#content-slider .five-img-slide li {display: inline; position: absolute;}
4. By setting the unordered list's position to relative and the list item's position to absolute, I create a box of sorts, where I will position the list items that contain the images.
#content-slider .five-img-slide .slide5-2 {left: 370px;}
#content-slider .five-img-slide .slide5-3 {left: 370px; top: 280px;}
#content-slider .five-img-slide .slide5-4 {left: 570px; top: 280px;}
#content-slider .five-img-slide .slide5-5 {left: 720px;}
ซึ่งจาก ข้อ 1-4 ซึ่งเข้าใจว่าต้องเข้าไปแก้ที่ Style.css ของ Modern Theme ทีทำอยู่ ที่เป็น Default แต่ไม่ทราบว่าจะลงบรรทัดไหนครับ เพราะ บรรทัดที่ 115 ของผมเป็นดังนี้
{ background:#fff; border:1px solid #bbb; border-top:0; border-bottom-color:#666; padding:16px 16px 50px; min-height:1448px; }
-->
.main{padding:16px 16px 50px; min-height:350px; color: #fff; }
/* Base Columns */
.col-left { float:left; width:220px; padding:0 0 1px; }
.col-main { float:left; width:686px; padding:0 0 1px; }
.col-right { float:right; width:220px; padding:0 0 1px; }
/* 1 Column Layout */
.col1-layout .main { padding:16px 30px 40px; }
.col1-layout .col-main { float:none; width:auto; }
/* 2 Columns Layout */
.col2-left-layout .col-main { float:right; }
.col2-right-layout .col-main {}
/* 3 Columns Layout */
.col3-layout .col-main { width:452px; }
.col3-layout .col-wrapper { float:left; width:689px; }
.col3-layout .col-wrapper .col-main { float:right; }
/* Content Columns */
.col2-set .col-1 { float:left; width:48.5%; }
.col2-set .col-2 { float:right; width:48.5%; }
.col2-set .col-narrow { width:32%; }
.col2-set .col-wide { width:65%; }
.col3-set .col-1 { float:left; width:32%; }
.col3-set .col-2 { float:left; width:32%; margin-left:2%; }
.col3-set .col-3 { float:right; width:32%; }
.col4-set .col-1 { float:left; width:23.5%; }
.col4-set .col-2 { float:left; width:23.5%; margin:0 2%; }
.col4-set .col-3 { float:left; width:23.5%; }
.col4-set .col-4 { float:right; width:23.5%; }
แล้วผมจะเพิ่มที่บรรทัดไหนเนี่ย โปรดแนะนำด้วย ขอบคุณ
ปล. และส่วนของ code HTML นี้ใส่ตรงไหนครับ ถ้าผมจะใส่ใน static block ต้องไปแก้ที่ไหนเพิ่มเติม
<div id="content-slider">
<ul class="five-img-slide">
<li class="slide5-1"><a href="#"><img src="
<?php echo $this->getSkinUrl(images) ?>/hero-1-of-5.jpg" alt="hero one of five"/></a></li>
<li class="slide5-2"><a href="#"><img src="
<?php echo $this->getSkinUrl(images) ?>/hero-2-of-5.jpg" alt="some copy"/></a></li>
<li class="slide5-3"><a href="#"><img src="
<?php echo $this->getSkinUrl(images) ?>/hero-3-of-5.jpg" alt="some copy"/></a></li>
<li class="slide5-4"><a href="#"><img src="
<?php echo $this->getSkinUrl(images) ?>/hero-4-of-5.jpg" alt="some copy"/></a></li>
<li class="slide5-5"><a href="#"><img src="
<?php echo $this->getSkinUrl(images) ?>/hero-5-of-5.jpg" alt="some copy"/></a></li>
</ul>
</div><!--end content-slider-->
โปรดแนะนำด้วย ขอบคุณ
จากที่ผมได้ลองผิดลองถูกดูแล้ว ในการปรับแก้ CSS บรรทัดไหนไม่มี เราก็เพิ่มมันซะใน Css ของ Theme เรา ส่วน ใน Static Block ก็ใส่ Code HTML ได้เลยครับ แต่การเรียก Class CSS มาใช้ ต้องมีใน Css ที่เราเพิ่มเติมเข้าไปนะครับ
พัฒนาเว็บไซต์
