สอบถามหน่อยครับ
คืออยากจะทำหน้า Page ใน Static Blocks แล้วให้ Page เรียก Static Blocks มาใช้ แต่ติดปัญหาตรงที่ไม่รู้จะเขียนหรือทำอย่างไรให้ Static Blocks ดึง CSS และ js ที่ทำไวมาใช้ได้ และไม่ทราบว่าจะต้องเก็บ File CSS , Js ไว้ที่ไหนครับ
ขอรบกวนผู้รู้ตอบแบบระเอียดหน่อยครับ มือใหม่หัดเล่น
โห มือใหม่ แต่ดูคุณเก่งมากเลยนะครับ
ถ้าพูดถึง Page ยกตัวอย่าง Home Page แล้วกันง่ายดี >> ในนี้ ก็มี Static blocks ได้นั่นเอง
ส่วนถ้าอยากเรียก CSS มา ปกติ Page มันก็เรียก CSS อยู่แล้ว >> ดังนั้น ถ้าที่ถามมา Static block มันไม่เรียก CSS มา ก็ไม่ต้องไปใส่มันสิครับ ออกแบบ Page อย่างเดียว ก็พอแล้วมั้ง
งง มากครับ เค้าออกแบบ Static block เพื่อ?
ขอถามเพิ่มเติมครับ
ถ้าผมเขียน CODE HTML ใส่ใน Static block ส่วน CSS ใส่ใน \skin\frontend\default\yourtheme\css และ js ใส่ใน skin\frontend\default\yourtheme\js ผมขอถามต่อว่าผมจะเรียก File Css และ js มาใช้ได้อย่างไร และจะเขียน Code อย่างไร
*** หมายเหตุ ผมใช้ Page เรียก Static block หลายๆ Static block มาแสดงผลในหน้าแรกของเวปครับ เพื่อที่จะได้แยกส่วนกัน เวลาแก้ไขได้แก้่ไขได้ง่ายๆครับ
ไม่ทราบว่าผมทำถูกหรือไม่ หรือมีวิธีการที่ดีกว่านี้ครับ
1. ถ้าผมเขียน CODE HTML ใส่ใน Static block ส่วน CSS ใส่ใน =======
อย่างที่คุณข้างบนบอกคะ ปกติมันก็เรียก CSS อยู่แล้ว แต่คุณใส่ผิดที่คะ สลับกันควรจะ \skin\frontend\yourtheme\default\css และ \skin\frontend\yourtheme\default\js
2. ผมใช้ Page เรียก Static block หลายๆ Static block มาแสดงผลในหน้าแรกของเวปครับ =====
แบบนี้ก็ได้คะ ง่ายต่อการแก้ไขเป็นสัดเป็นส่วนคะ
คือ กำลังงง กับตัวนี้นะครับ เลยขอคำแนะนำคับ
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
โดย Block Title : five-img-slide
Identifier: five-img-slide
status : enable
<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-->
แล้วผมจะใส่รูป และเพิ่ม code ที่ไหนเพิ่มเติมบ้าง แนะนำด้วย
โปรดแนะนำด้วย ขอบคุณ