วิธีแต่ง astore ให้สวยกว่า AOM ไปเลย

[D.N.P.]

ขอบคุณครับ...

[soonthron]

จะลองดู

[qaasimar]

แต่ง astore แบบรูปข้างบนนี้ผมใข้เวลา 4 นาที!!!

จริงๆแล้วมันก็ไม่ได้มีอะไรยากนะครับ






ขั้นที่ 1 แค่จัดหน้าโดยแก้ css

โค้ด เลือก ขยาย


/* PAGE STYLE */
body {
      margin:auto;
      padding:0px;
      background:#FFFFFF;
      color:#000000;
      min-width:auto;
      font-family:'Verdana', sans-serif;
      font-size:9pt;
      font-weight:500;
      line-height:12pt;
      text-decoration: none;
margin-top:190px;
text-align:center;
background-image:
url('http://i129.photobucket.com/albums/p209/arnon001/tem2-1.jpg');
background-position: 50% 0%;
background-repeat: repeat-x

}

/* MAIN PAGE AREA */
#mainwrap {
      float:right;
}
#wrap {
       margin:0 auto;
       text-align:left;
}
#main {margin-top:90px;
      width:530px;
     
      overflow:hidden;
border-style: solid;
border-left-width: thin;
border-top-width: thin;
border-bottom-width: thin;
border-right-width: thin;
border-color: #00FFFF;

}
div#header {
      background:#206BA2;
      padding:6px 24px 4px;
      margin:0;
      vertical-align:middle;
}
a#mainheadertitle {
      padding:0px;
      font-family: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:left;
      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:0px;
}
ul#widget div {
      background:#FFFFFF;
}
ul#widget h3 {
      font-family:'Verdana', sans-serif;
      font-size: 10pt;
      font-weight: bold;
      color:#FFFFFF;
      margin:0px;
      padding:4px 15px 4px;
      text-align:left;
background-image:
url('http://i537.photobucket.com/albums/ff332/qecera/tab.jpg');

}






code css ด้านบนนี้ใส่ตรง Global ครับ



ขั้นที่ 2 ก็เอารูปภาพไปใส่เป็น Background ครับ
ทีนี้จะแต่งยังไงก็อยู่ที่จินตนาการครับ ลองดูภาพประกอบ



จากภาพแสดงให้เห็นว่าจริงๆแล้วก็เป็นเพียงการจัดหน้าเวบธรรมดา
แล้วเอา Background มาซ้อนครับ

วิธีการใส่ Background ก็คือ เอา url รูป background ไปใส่ตรงบรรทัดที่ 16 ใน css ครับ
ส่วนตรงหัวข้อ Search ที่เป็นสีดำๆ ก็เอา url รูปไปใส่ตรงบรรทัดรองสุดท้ายของ css ครับ




แค่นี้เองครับ การทำไม่ยากหรอกครับ มันยากตรงที่ทำยังไงให้มันออกมาดูลงตัว ให้ดูดี


ทุกคนทำได้อยู่แล้วครับ...




รูปตัวอย่าง Background ของผมครับ

ขอบคุณครับ

[kankantk]

ขอบคุณ ค่ะ

[warn_cm]

สวยมาก ว่าแต่แล้ว astore ดันยากป่าวครับ

[amaya]

ผมมือใหม่ครับไม่รู้ว่าจะเิ่ริ่มตรงไหน แต่ global อยู่ตรงไหนยังไม่รู้เลยครับ ช่วยด้วยครับ

[khatha0808]

ทำไม astore อินเดก ยากมากๆ

[veronika]

ดันไม่ขึ้นแล้วครับ

[testsoft]

ขอบคุณครับ 

[jastplays]

+1