วิธีการแก้ไขและวิธีการปรับแต่ง index.css - Smf Thai - บอร์ด ชุมชนคนทำเว็บ
บอร์ด ชุมชนคนทำเว็บ

วิธีการแก้ไขและวิธีการปรับแต่ง index.css

Administrator

  • www.nakhonitech.com
  • *****
  • 102
  • +0/-0
    • ดูรายละเอียด
    • โฮสติ้งนครไอเทค โฮสติ้งราคาถูก
การปรับแต่ง css
ตำแหน่ง : Themes / {ชุดรูปแบบของคุณ} / CSS /….
ในโฟลเดอร์ css จะมีไฟล์หลักอยู่ 2 ไฟล์คือ

index.css (บางธีมก็จะเป็นชื่ออื่นเช่น index_blue.css) เป็นสไตล์หลัก
และ
rtl.css ใช้สำหรับการกำหนดวิธีการดูฟอรั่มหากผู้ใช้สามารถใช้ภาษาจากขวาไปซ้าย

วิธีการปรับแต่งไฟล์ index.css
1. การเปลี่ยนพื้นหลัง body background

ไปที่ :



โค๊ด: [Select]
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}


E9EEF2 # เป็นสีพื้นหลังที่ใช้หลังภาพ2. การเปลี่ยนรูปลักษณ์โดยรวมของฟอรั่มของคุณใน SMF 2.0.1 เส้นโค้งหนึ่งภาพจะใช้ในการควบคุมลักษณะทางฟอรั่มของคุณและจะเรียกว่า “main_block.png” ซึ่งสามารถพบได้ที่ ” Themes / {ชุดรูปแบบของคุณ} / images / Theme /  “ คุณสามารถปรับเปลี่ยนไปเปลี่ยนพื้นหลังและภาพโดยรวมของฟอรั่มของคุณ3. เปลี่ยนขนาดตัวอักษรไปที่ :
โค๊ด: [Select]
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}


4. การเปลี่ยนสีตัวอักษรไปที่ :
โค๊ด: [Select]
/* use dark grey for the text, leaving black for headers etc */
body, td, th, tr
{
color: #444444;
}


5. การแสดงโลโก้ของคุณในส่วนหัวของฟอรั่มวิธีแรกแก้ไขไฟล์ “main_block.png” ที่จะมีการอธิบายในจุดที่สองในส่วนนี้ บล็อกขนาดใหญ่อยู่ด้านล่างสามารถแก้ไขได้ที่จะให้มันหัวมองที่คุณต้องการ แล้วคุณจะต้องตรวจสอบให้แน่ใจว่าคุณไม่ได้แสดงโลโก้ SMF, ข้อความชื่อฟอรั่มและทำให้แน่ใจว่ามีช่องว่างภายในเพิ่มเติม :ไปที่ :
โค๊ด: [Select]


/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}
โค๊ด: [Select]
และแทนที่เช่นนี้ "display : none;" การเพิ่มคุณสมบัติเพื่อประชาชนและชั้นเรียนเพื่อให้พวกเขาจะไม่ปรากฏอีกต่อไปแล้ว :
โค๊ด: [Select]
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
display: none;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
display: none;
}
ตอนนี้เราจะต้องมีการเพิ่มช่องว่างด้านบนไปตามวิธีการใหญ่เป็นภาพส่วนหัวของคุณ :ไปที่ :
โค๊ด: [Select]
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}
เปลี่ยนคุณสมบัตินาทีที่มีความสูงตามวิธีการใหญ่ส่วนหัวของคุณคือการปรับแต่งแม่แบบมีสี่หลักแม่แบบใน SMF ที่ผู้ใช้ส่วนใหญ่เรียกดู มี “index.templates.php” ซึ่งเป็นเวลาในการโหลดคลิกทุกวันและโดยทั่วไปจะเป็นสิ่งที่ wraps ฟอรั่มของคุณ คนที่สองเป็นไฟล์ “BoardIndex.template.php” ซึ่งเป็นดัชนีบอร์ด, FrontPage ของฟอรั่มของคุณ หนึ่งในสามคือ “MessageIndex.template.php” ซึ่งมีแผงย่อยและข้อความภายในบอร์ด เศษหนึ่งส่วนสี่และสุดท้ายคือ ไฟล์ “Display.template.php” ซึ่งมี HTML สำหรับดูหัวข้อคุณสามารถเพิ่มรหัส HTML เพื่อแม่แบบเหล่านี้ได้ง่ายๆเลย หากคุณต้องการกำหนดเองหนึ่งในนั้น (ยกเว้นไฟล์ index.template.php ที่มีอยู่แล้วใน ธีม Default), นำทางไปยังโฟลเดอร์ธีมของคุณเริ่มต้นและการคัดลอกไฟล์ไปยังไดเรกทอรีธีมของคุณและเริ่มการแก้ไขได้ทันทีที่พบมากที่สุดคนทำผิดพลาดเมื่อแก้ไขไฟล์เหล่านี้ก็คือพวกเขาใส่รหัส HTML โดยตรงในไฟล์ PHP เพราะ PHP เป็นภาษาโปรแกรมที่คุณควรจะบอกให้พิมพ์รหัส HTML ดังนั้นคุณควรจะใช้” ก้อง “คำสั่ง นี่คือตัวอย่าง :ไปที่ไฟล์ index.template.php และค้นหา :
โค๊ด: [Select]
echo !empty($settings['forum_width']) ? '
<div id="wrapper">' : '', '
<div id="header"><div class="frame">
<div id="top_section">

<h1 class="forumtitle">
มีสองวิธีที่เราสามารถใส่ HTML ของเราที่กำหนดเองที่นี่มีทั้งที่เราสามารถใช้ต้นแบบ echo เพื่อพิมพ์รหัสของเราเช่นนี้
โค๊ด: [Select]
echo !empty($settings['forum_width']) ? '
My name is Eren and Im uber cool!
<div id="wrapper">' : '', '
<div id="header"><div class="frame">
<div id="top_section">

<h1 class="forumtitle">
หรือเราสามารถสร้างเสียงสะท้อนของเราเองที่จะพิมพ์ออก HTML :
โค๊ด: [Select]
echo 'My name is Eren and Im uber cool! ';
echo !empty($settings['forum_width']) ? '
<div id="wrapper">' : '', '
<div id="header"><div class="frame">
<div id="top_section">

<h1 class="forumtitle">
ที่คุณสามารถดูเนื้อหาภายใน echo ทำงานควรจะแนบมากับ apostrophes (‘) และควรปิดด้วยอัฒภาค ต้องสิ่งนี้จะทำให้ปัญหาที่พบบ่อย Newbie ใด ๆ ที่เริ่มทำงานแจงข้อผิดพลาด เมื่อมีเนื้อหาภายใน echo ฟังก์ชั่นที่มี’นี้สามารถใช้จาวาสคริปต์หรือพื้นข้อความเช่น”ฉัน roxorz!” ไม่ต้องกังวลมีวิธีแก้ปัญหาเพื่อที่คุณจะหลบหนีโดยทั่วไปมีตัวละครกับ \ นี่เป็นวิธีที่ทำได้ :
โค๊ด: [Select]
echo 'My name is Eren and I\'m uber cool! ';
echo !empty($settings['forum_width']) ? '
<div id="wrapper">' : '', '
<div id="header"><div class="frame">
<div id="top_section">

<h1 class="forumtitle">
ประกาศลงนาม \ ก่อน’ใน Uber งบเย็น อย่างไรก็ตามถ้าคุณได้เข้าใจคู่มือนี้อย่างถูกต้องขณะนี้เรามีข้อมูลเพียงพอที่จะสร้างชุดรูปแบบของเราเอง ในส่วนต่อไปนี้เราจะสร้างชุดรูปแบบขั้นตอนโดยขั้นตอน อย่าลืมที่จะอ่านมันเป็นมันอาจจะมีเคล็ดลับและเทคนิคที่ไม่ได้อยู่ในส่วน descrptive เพิ่มเติมของคู่มือนี้สร้างธีมของเราเอง!ดังที่คุณทราบก่อนหน้านี้ผมได้ตั้งชื่อชุดรูปแบบของฉัน “Clarity” ดังนั้นในส่วนของคู่มือนี้โปรดพิจารณาการอ้างอิงทั้งหมดถึงความชัดเจนการอ้างอิงถึงธีมของคุณเอง ผมขอแนะนำให้ขอทำตามคู่มือในส่วนนี้อย่างละเอียดและสร้างชุดรูปแบบด้วยตัวคุณเอง ฉันจะให้ภาพที่ผมได้ใช้ในการสร้างชุดรูปแบบก่อนอื่นผมจะเปลี่ยนเป็นที่มาของบางสิ่งบางอย่างที่มีชีวิตชีวามากขึ้นและเพื่อเพิ่มบิตของการสัมผัสกับมันฉันจะทำให้มันคงที่ ตรวจสอบส่วนที่เกี่ยวข้องในส่วนงาน”สามัญ”ของคู่มือเหตุผลแรกที่เราจะต้องมีไฟล์ภาพผมจะใช้ภาพที่ฉันได้สร้างขึ้นใน Photoshop นี้เพราะฉันจะทำให้มันคงที่และหนึ่งในภาพใหญ่ (ที่ไม่มีการทำซ้ำ)ให้แน่ใจว่าคุณใส่รูปภาพในไดเรกทอรีนี้ธีมของคุณในโฟลเดอร์โฟลเดอร์ภาพของความชัดเจน ตอนนี้เราจะแสดงภาพพื้นหลังนี้เช่นนี้ เปิดขึ้น index.css และไปที่ :
โค๊ด: [Select]
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}
และแทนที่ด้วย
โค๊ด: [Select]
/* Set a fontsize that will look the same in all browsers. */
body
{
background: url(../images/theme/clarity_bg.jpg) no-repeat fixed;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;

}
เราก็จะได้พื้นหลังใหม่ในขณะนี้ :ขณะนี้มีมากมาย glitches เราจะแก้ไขปัญหาได้ในภายหลังในคู่มือ แต่ถ้าคุณเลื่อนไปที่จุดสิ้นสุดของฟอรั่ม, คุณจะเห็นว่าลิขสิทธิ์ไม่สามารถอ่าน นั่นคือต่อ SMF ใบอนุญาตดังกล่าวเราจะทำให้มันโดดเด่นมากขึ้น ไปที่ :
โค๊ด: [Select]
#footer_section
{
text-align: center;
background: url(../images/theme/main_block.png) no-repeat 0 -820px;
padding-left: 20px;
}
และแทนที่ด้วย
โค๊ด: [Select]
#footer_section
{
text-align: center;
background: url(../images/theme/main_block.png) no-repeat 0 -820px;
padding-left: 20px;
}
#footer_section a
{
color: #fff;

}
เพิ่มคุณสมบัตินี้บอกเพื่อให้การเชื่อมโยงทั้งหมดในส่วนท้ายกระดาษสีขาว เป็นระยะสั้นสำหรับการเชื่อมโยงและจะแสดงเป็นในรูปแบบ HTML เช่นกันขณะนี้เรามีพื้นหลัง เวลาในการแก้ไขไฟล์ main_block.png ที่เราได้พูดถึง earlies ในคู่มือในการเปลี่ยนแปลงรูปลักษณ์โดยรวมของฟอรั่ม นี่คือสิ่งที่ฉันได้ทำกับ Photoshop, คุณจะสังเกตเห็นว่าได้ปรับเปลี่ยนภาพพื้นหลังที่ผมได้ใช้มาก่อนที่จะไปกับไฟล์ main_block.png ใหม่การลบโลโก้ SMFไปที่
โค๊ด: [Select]
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}
และแทนที่ด้วยการเพิ่ม  display: none; ไว้ในตำแหน่งข้างล่างนี้ หรือแทนที่ด้วย code ข้างล่างนี้ :
โค๊ด: [Select]
/* float these items to the right */
#siteslogan, img#smflogo
{
display: none;

}
นอกจากนี้ชื่อฟอรั่มดูไม่ดีจะช่วยให้เปลี่ยนแบบอักษรขนาดและสีเพื่อให้มันดู neater ให้ไปที่
โค๊ด: [Select]
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;

}
และแทนที่ด้วย
โค๊ด: [Select]
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 2.2em;
font-family: Tahoma, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
font-weight: 100;
}
h1.forumtitle a
{
color: #fff;

}
โฮสติ้งถูก นครไอเทค ฟรีโฮสติ้ง โฮสติ้งราคาถูก hostingราคาถูก vps วิทยุออนไลน์ ตัวแทนจำหน่าย Reseller Hosting
https://www.nakhonitech.com/