THEME

แจก Exteen theme: Sweet Flowers

posted on 18 May 2012 09:03 by jaelsoul in THEME directory Knowledge, Idea
Conditions
  • ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ 
  • เรื่องเครดิต เราไม่บังคับว่าต้องลง
  • แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
  • สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร) 
 
Previews
 
...​ หน้าตาโดยรวม ...​
ธีมนี้มี sidebar ที่ยาวเท่าความสูงของตัว browser ค่ะ (ซึ่งเลื่อนลงไม่ได้
เพราะฉะนั้นเหมาะใช้กับพวกลิ้งค์ที่มีจำนวนน้อยหรือไม่ยาว -- พอที่จะเห็นโดยไม่ต้องเลื่อน)
 
หน้าตาส่วน sidebar (#1) เริ่มด้วยชื่อบล็อกค่ะ (Apricot Can) 
อีกครั้ง เราก็แนะนำว่าให้ใช้ชื่อที่สั้น ถ้าชื่อมันยาวมากก็ให้ลองลดขนาดตัวอักษรส่วนนี้ดู
ส่วนลิ้งค์พวก Home, About Me, etc. มาจากเจ้า widget Pages ค่ะ
ส่วนเจ้ารูปเล็กๆ เป็นโค้ดดึงรูปมาจาก instagram (ใช้ SnapWidget)
 
ส่วน leg นั้นต่างจากธีมก่อนๆ เน้นเรียบง่ายค่ะ เผื่อจะเบื่อแบบกล่องกัน
ถ้าต้องการแบบเก่า ให้ดูโค้ดจาก [Exteen CSS] วิธีแต่งส่วน leg ของบล็อกแบบสามกล่อง
หรือถ้าอยากได้คำอธิบายเพิ่มเติมเกี่ยวกับส่วนนี้ ให้ดูที่ เอนทรี่นี้ ได้ค่ะ 
 

มาถึงส่วนคอมเม้นต์กับเขาบ้าง - เน้นคอมเม้นต์ขนาดโตๆ หน่อย
และบางคอมเม้นต์ที่สั้น อาจจะรู้สึกเหมือนกรอบมันล้นเกินไป
จริงๆ แล้วเราตั้งใจให้เป็นแบบนั้นค่ะ มันจะช่วยให้ระยะห่างระหว่างคอมเม้นต์ ดูสมดุลหน่อย
 
 
วิธีวาง widgets (กดดูขนาดเต็มได้)

  • ในส่วน bottom menu นั้น เรามี Previous, Recommmend, Archives และ Catogories
  • ส่วน Pages นั่นจะถูกนำมาอยู่ที่ Sidebar#1 (#sidebar) และคิดว่าเหมาะสำหรับหน้าที่ชื่อไตเติ้ลสั้นๆ
  • widgets ในส่วน Top menu และ sidebar#2 จะไม่แสดงบนหน้าบล็อก เหมาะสำหรับคนที่ต้องการใช้ custom code ที่ไม่จำเป็นต้องโชว์ข้อความ เอามาใส่ไว้ในส่วนนี้ก็ได้ค่ะ
  • ส่วน widgets ใน sidebar#1 จะโชว์ในแถบสีชมพูด้านซ้ายค่ะ
  • ไม่จำเป็นต้องจัดให้เหมือนกับในรูป ลองทดลองดูว่าแบบไหนถูกใจกว่ากัน
 
Code
  • ไปที่ Theme > CSS Editor
  • กด ctrl + C ตัวโค้ดและ Paste โค้ดลงไปเลย ( กด ctrl + V )
  • ไปโหลดไฟล์ที่ [mediafire] หรือสามารถดูจาก​ [เว็บนี้] (ไม่ต้องดาวน์โหลด)
 
Notes
  • ภาพบีจีด้านหลังให้เซฟจากหน้า invierno แล้วอัพโหลดใส่โฮสของคุณ ใส่ url ของรูปภาพใน body ตรง background  --> url(url ของรูปภาพ)
  • เปลี่ยนขนาดสำหรับชื่อบล็อคตรง #header h1 a ค่ะ
  • สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 120px หากไม่ชอบค่านี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน 
        #profile img{
            max-width:120px; <-- ค่าความกว้าง
            ...
      }
  • ไม่แนะนำให้ใช้ภาพเฮดเดอร์ค่ะ เพราะเราก็ไม่ได้กะเอาไว้ว่าใส่แล้วเป็นยังไง (ธีมอาจจะพังได้ ^^")
  • ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS (jaelsoul) หรือไม่ก็ปุ่ม "ask me"
  • ทางที่ดีก็ลองเช็คหน้า formspring (กดปุ่ม ask me) ก่อนส่งคำถาม เผื่อมีที่เราเคยตอบไปแล้วค่ะ
  • ถ้าอยากเห็นธีมอื่นๆ ที่เคยแจกไว้ สามารถไปดูได้ที่ FREE THEME INDEX ด้านบน

แจก Exteen theme: Sunny and Dark

posted on 20 Jan 2012 12:12 by jaelsoul in THEME directory Lifestyle, Idea
Conditions
  • ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ
  • เรื่องเครดิต เราไม่บังคับว่าต้องลง
  • แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
  • สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร)
 
Previews
 

...​ หน้าตาโดยรวม ...​
หน้าตาเรียบง่ายสไตล์ถนัดของจขบ.ค่ะ เป็นแบบ minimal มากๆ
ธีมนี้เราเน้นให้ดูสะอาด กว้างขวางค่ะ จะไม่โชว์ส่วน sidebar (พูดง่ายๆว่าไม่ได้ใช้เลย)
 
ถ้าใส่ภาพเฮดเดอร์ก็จะเป็นแบบในรูปด้านบนค่ะ
ส่วน neck ก็จะเป็นกล่องสำหรับแต่ละลิงค์ ซึ่งจะดูดีสำหรับพวก Page widget
ส่วนเจ้ากล่องสีฟ้าคือเวลาเอาเม้าส์วางทับลิงค์ใน neck
 
 

ส่วน leg นั้นต่างจากธีมก่อนๆ เน้นเรียบง่ายค่ะ เผื่อจะเบื่อแบบกล่องกัน (ส่วนแถบสีเข้มคือเวลาเอาเม้าส์วางทับ)
[ ถ้าต้องการแบบเก่า ให้ดูโค้ดจาก [Exteen CSS] วิธีแต่งส่วน leg ของบล็อกแบบสามกล่อง ]
 
 

มาถึงส่วนคอมเม้นต์กับเขาบ้าง หน้าตาแปลกไปจากธีมก่อนๆ
 
 
วิธีวาง widgets (กดดูขนาดเต็มได้)

  • ในส่วน bottom menu นั้น เรามี Previous, Recommmend, Archives และ Catogories
  • ส่วน Pages นั่นจะถูกนำมาอยู่ที่ Top menu (#neck) และคิดว่าเหมาะสำหรับหน้าที่ชื่อไตเติ้ลสั้นๆ
  • widgets ในส่วน sidebar#1 และ sidebar#2 จะไม่แสดงบนหน้าบล็อก เหมาะสำหรับคนที่ต้องการใช้ custom code ที่ไม่จำเป็นต้องโชว์ข้อความ เอามาใส่ไว้ในส่วนนี้ก็ได้ค่ะ
  • ไม่จำเป็นต้องจัดให้เหมือนกับในรูป ลองทดลองดูว่าแบบไหนถูกใจกว่ากัน
 
Code
  • ไปที่ Theme > CSS Editor
  • กด ctrl + C ตัวโค้ดและ Paste โค้ดลงไปเลย ( กด ctrl + V )
  • ไปโหลดไฟล์ที่ [mediafire] หรือสามารถดูจาก​ [เว็บนี้] (ไม่ต้องดาวน์โหลด)
 
Notes
  • ถ้าอยากจะซ่อน Blog Description ให้หา #header h2 แล้วเติม display: none;
  • สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 120px หากไม่ชอบค่านี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน
        #profile img{
            max-width:120px; <-- ค่าความกว้าง
            ...
        }
  • ภาพเฮดเดอร์ นั้นอยู่ในส่วน #coverimage หากต้องการให้มีภาพ ก็ใส่ url ของภาพในบรรทัด background: url()
    แล้วก็ปรับความสูงและความกว้างของภาพตามที่ต้องการค่ะ
  • สมมุติว่าต้องการขยับภาพเฮดเดอร์ให้อยู่ตรงกลาง สามารถปรับค่าตัวเลขใน margin-left ใน #coverimage
  • ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS (jaelsoul) หรือไม่ก็ปุ่ม "ask me"
  • ทางที่ดีก็ลองเช็คหน้า formspring (กดปุ่ม ask me) ก่อนส่งคำถาม เผื่อมีที่เราเคยตอบไปแล้วค่ะ
  • ถ้าอยากเห็นธีมอื่นๆ ที่เคยแจกไว้ สามารถไปดูได้ที่ FREE THEME INDEX ด้านบน