พอดีคุณ manoogalum สอบถามเข้ามาเกี่ยวกับการปรับแต่งหน้า aStore ที่ผมกำลังศึกษาอยู่ว่าปรับแต่งยังไง วันนี้เลยถือโอกาสเอาความรู้อันน้อยนิดที่เก็บเกี่ยวมาจากเว็บบอร์ด มาบอกกันครับ รวมถึงถือโอกาสเปิดเป็น Categories ใหม่ขึ้นมาอีกอันนึงเลย เผื่อว่าจะมีโอกาสได้เขียนเรื่องนี้ไปเรื่อยๆ (จับฉ่าย จริงๆ บล๊อกผม ^^)

ก่อนอื่นต้องขอขอบคุณเว็บบอร์ดดังต่อไปนี้ก่อนนะครับ ที่ให้ความรู้เรื่องเกี่ยวกับ aStore รวมถึงความรู้ในการหาเงินทาง Internet ทุกๆ อย่างครับ

• http://forums.sem.or.th
• http://www.thaiseoboard.com
• http://forums.thaisem.com

มาเข้าเรื่องกันต่อนะครับ ผมลองเอาร้านที่ลองทำไว้มายกตัวอย่างแล้วกันครับ Car Accessories Online Shop ร้านนี้ผมไม่ได้ทำอะไรมากมายครับ แค่ลองปรับสีสัน ขยายหน้าจอ แล้วก็จัดให้อยู่ตรงกลางครับ

ก่อนอื่นต้องเข้าไปที่หน้าของ Amazon Associates ของเพื่อนๆ กันก่อนนะครับ Login เข้าไป แล้วไปที่หน้าแก้ไข CSS ในส่วน Color & Designของ aStore ก่อนครับ ผมแนะนำให้ Copy Files ทางด้านขวามาให้หมดแล้วมาใส่ไว้ในโปรแกรมพวก Edit Plus หรือ Note pad นะครับ จะได้ไล่บรรทัดง่ายๆ หน่อย

Code ทั้งหมดจะยาวประมาณนี้ครับ ผมเพิ่มบรรทัดที่ เป็นสี เข้าไปนะครับ

ส่วนที่เพิ่มตรงนี้จะเป็น การทำให้ aStore จัดอยู่ตรงกลางครับ
text-align:center; ———- ประมาณบรรทัด 14 ครับ
margin:0 auto; } ——- ประมาณบรรทัด 39-40 ครับ
text-align:left; }

/* PAGE STYLE */
body {
      margin:24px;
      padding:0px;
      background:#E7E4D0;
      color:#000000;
      min-width:748px;
      font-family:'Verdana', sans-serif;
      font-size:9pt;
      font-weight:500;
      line-height:12pt;
      text-decoration: none;
      text-align:center; ---------- ประมาณบรรทัด 14 ครับ
}
table {
      font-family:'Verdana', sans-serif;
      font-size:9pt;
}
form {
      margin:0px;
}
a {
      color: #206BA2;
      text-decoration: underline;
}
a img{ border:none;}
hr {
      border:0;
      width:100%;
      color:#206BA2;
      background-color:#206BA2;
      height:1px;
      width:100%;
      margin:6px 0px 12px 0px;
}
#wrap {
      width:880 px; --------- ปรับขนาดตรงนี้ตามใจชอบครับ
      margin:0 auto;      }    ------- ประมาณบรรทัด 39-40 ครับ
      text-align:left;      }

}
#rule {
      height:1px;
      background-color:#000000;
      width:100%;
      margin:6px 0px 12px 0px;
}
h2 {
      font-size:16px;
      font-weight:bold;
      margin:0px;
      padding:0px;
}
h3 {
      font-size:14px;
      font-weight:bold;
      margin:0px;
      padding:0px;
}

/* MAIN PAGE AREA */
#mainwrap {
      float:left;
}
#main {
      width:530px;
      margin-bottom:19px;
      overflow:hidden;
}
div#header {
      background:#206BA2;
      padding:6px 24px 4px;
      margin:0;
      vertical-align:middle;
}
a#mainheadertitle {
      padding:0px;
      font-family:'Verdana', sans-serif;
      font-size:15pt;
      font-weight:normal;
      line-height:1.5em;
      color:#FFFFFF;
      margin:0px;
      text-align:left;
      vertical-align:middle;
      text-decoration:none;
}
a#mainheadertitle:hover {
      text-decoration:underline;
}
td#mainheaderlogo {
      padding:5px;
}
img#mainlogo {
      padding-right:5px;
}
div#mainsubheader {
      background:#F2F2F2;
      padding:10px 24px;
      vertical-align:middle;
}
div#contentsubheader {
      width:482px;
      overflow:hidden;
}
div#subheaderlinks {
      float:right;
      text-align:right;
}
div#subheadertitle {
      font-size:12pt;
      font-weight:bold;
}
div#contenterror {
      background:#FFFFFF;
      padding:14px 24px;
}
span.currentpage {
      font-weight:bold;
}

span.error {
      font-weight:bold;
}

/* SIDEBAR */
#sidebar {
      float:right;
      width:200px;
      overflow:hidden;
}
#sidebar ul {
      margin-bottom:0;
}
#sidebar h3, #sidebar p {
      padding:0 10px;
}

/* GENERAL SIDEBAR WIDGET STYLES */
ul#widget,ul.widget li.widget {
      margin:0;
      padding:0;
      list-style:none;
}
li.widget {
      float:left;
      width:200px;
      margin-bottom:19px;
}
ul#widget div {
      background:#FFFFFF;
}
ul#widget h3 {
      font-family:'Verdana', sans-serif;
      font-size: 10pt;
      font-weight: bold;
      color:#FFFFFF;
      margin:0px;
      padding:6px 15px 4px;
      text-align:left;
      background:#206BA2;
}
ul#widget p {
      font-family:'Verdana', sans-serif;
      font-size: 9pt;
      font-weight: normal;
      color:#000000;
      margin:0px;
      padding: 10px 15px 20px;
}

/* SEARCHBROWSE WIDGET */
div#searchbrowse {
      padding:14px;
}
div#searchbrowse div.indent {
      padding: 5px 0px 5px 15px;
}
select.searchwidget {
      width:173px;
      margin-bottom:6px;
}
input#searchwidgetkeywords {
      width:134px;
}
span#SearchAtAmazon {
      font-size: 8pt;
}
div#browsetitle {
      font-weight:bold;
      padding-bottom:7px;
}
span.selectedcategory {
      font-weight:bold;
}

/* LISTMANIA WIDGET */
div.listwidget {
      padding-bottom:16px;
}
ul.listmania {
      margin:0px;
      padding:0px;
      list-style:none;
}
ul.listmania li {
      margin:0px;
      padding:5px;
      padding-left:10px;
      list-style:none;
      text-align:center;
}
ul.listmania li.clsOdd,li.listimages {
      background-color:#FFFFFF;
}
ul.listmania li.clsEven {
      background-color:#FFFFFF;
}

img.listimage {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* PRODUCTS WIDGETS */
div.productwidget {
      padding:0px;
      padding-bottom:16px;
}
div.productwidget .price {
      font-weight:bold;
}
table.sidebarproducts {
      font-family:'Verdana', sans-serif;
      font-size:9pt;
      width:200px;
}
table.sidebarproducts td {
      padding:5px;
}
table.sidebarproducts td.image {
      vertical-align:top;
      width:75px;
}
table.sidebarproducts td.text {
      vertical-align:middle;
      width:115px;
}
table.sidebarproducts span.listtitle {
      font-weight:bold;
}
div.privacylink {
      padding: 2px 5px;
      font-size:7pt;
      text-align:center;
}

/* FOOTER */
div#footer {
      width:530px;
      margin-bottom:28px;
      color:#206BA2;
      border-top:1px solid #206BA2;
}
div#footer p {
      padding:5px;
      margin:0;
}
div#leftfoot {
      float:left;
      width:430px;
}
div#rightfoot {
      float:right;
      width:100px;
      text-align:right;
}

/* WISHLIST WIDGET */
div#wishlist_page_link
{
    padding:7px 5px 5px;
}

คร่าวๆ ก็มีแค่นี้ครับ สำหรับการปรับหน้า aStore ให้อยู่ตรงกลาง ที่มีเพิ่มเติมเข้ามาอีกหน่อยก็คือการปรับความกว้างของร้าน ที่ผมทำสี ไว้นะครับ
ในส่วนของการปรับความกว้างของร้านต้องเข้าไปเพิ่มขนาดตรงส่วนของ Category Page อีกนิดนึงนะครับ ลองมองหาตรงบรรทัดนี้แล้วลองปรับดูครับ

table.products {
width:650px;
font-family:’Verdana’, sans-serif;
font-size:9pt;
}

ในส่วนของสีของ Header หรือ Menu ต่างๆ ก็ลองเปลี่ยนสีเล่นดูนะครับ ลองหาในส่วนที่เป็น Code สี แล้วก็ลองเปลี่ยนๆ ดูครับ ว่าตรงไหนสีอะไรบ้าง

ผมเข้าใจว่าเราสามารถปรับแต่งได้อีกหลายๆ อย่าง แต่ด้วยเหตุที่ว่ายังไม่มีเวลา(บวกอารมณ์) เท่าไหร่ครับ เลยยังไม่มีเวลานั่งแกะเล่น เพราะอย่างที่บอกไว้ตอนต้นแล้วว่า ผมก็กำลังศึกษาอยู่เหมือนกันครับ ^^

ขอย้ำอีกครั้ง ขอบคุณสำหรับบอร์ดทั้ง 3 บอร์ด ขอบคุณเจ้าของกระทู้ทุกกระทู้ที่เกี่ยวข้องกับเรื่องนี้ครับ

ฝากถึงคุณ manoogalum ตรงนี้นิดนึงครับ ไม่รู้ว่าเป็นคนเดียวกับที่ add MSN มารึเปล่า แต่ที่แน่ๆ ยังไม่มีโอกาสได้คุยกันเลย สงสัยว่าเราจะออนเวลาไม่ตรงกันครับ
ก็หวังว่าที่เอามาเขียนลงไว้ จะมีประโยชน์กับคนที่อยากจะลองปรับเล่นบ้างนะครับ