แชร์ผ่าน

ภาพรวมธีม

  • บทความ

หมายเหตุ

ในพอร์ทัล Power Apps คุณสมบัติ เปิดใช้ธีมพื้นฐาน ถูกตั้งเป็น ปิด เมื่อคุณเปิดคุณสมบัตินี้ คุณสามารถใช้ธีมเริ่มต้นที่เรียกว่า ค่าที่ตั้งไว้ คุณยังสามารถสร้างสำเนาของธีมที่ตั้งไว้ สำหรับการปรับแต่งเพิ่มเติม

ในบทความนี้คุณจะเข้าใจคุณสมบัติธีมพื้นฐาน สำหรับการปรับแต่งธีมขั้นสูง ดู แก้ไข CSS

เปิดใช้งานธีมพื้นฐานสำหรับพอร์ทัลที่มีอยู่

  1. เข้าสู่ระบบ Power Apps

  2. เลือก แอป จากบานหน้าต่างนำทางด้านซ้ายจากนั้นเลือกแอป

    เลือกแอปและพอร์ทัล

  3. เลือก คำสั่งเพิ่มเติม (...) แล้วเลือก แก้ไข

    แก้ไขพอร์ทัล

  4. เลือก ธีมส์ จากบานหน้าต่างนำทางด้านซ้าย แล้วเปิดปุ่มสลับ เปิดใช้งานธีมพื้นฐาน

    เปิดใช้งานธีมพื้นฐาน

เปลี่ยนธีมสำหรับพอร์ทัลของคุณ

คุณสามารถตั้งค่าธีมที่มีอยู่ในพอร์ทัลของคุณเป็นธีมเริ่มต้น

  1. เข้าสู่ระบบ Power Apps

  2. เลือก แอป จากบานหน้าต่างนำทางด้านซ้ายจากนั้นเลือกแอป

  3. เลือก คำสั่งเพิ่มเติม (...) แล้วเลือก แก้ไข

  4. เลือก ธีม จากบานหน้าต่างส่วนประกอบ

    เลือกไอคอนธีม

  5. เลือกธีมเริ่มต้นใดๆ จากค่าที่ตั้งล่วงหน้าที่มีอยู่ (ในตัวอย่างของเรา เราเลือก สีเขียว)

    เลือกธีมเริ่มต้น

ธีมที่เลือกจะถูกนำมาใช้ในพอร์ทัลของคุณ

ใช้ธีม

หมายเหตุ

หลังจากเปลี่ยนธีมหรือคุณสมบัติของธีม เช่น สีภายใน Studio ให้เลือก เรียกดูเว็บไซต์ เพื่อดูการเปลี่ยนแปลงในแท็บเบราว์เซอร์แยกต่างหาก หากคุณทำการเปลี่ยนแปลงหลายรายการโดยใช้วิธีนี้ และเปลี่ยนไปยังเพจต่างๆ ภายในเบราว์เซอร์ แคชของเบราว์เซอร์ที่เก่าอาจทำให้เบราว์เซอร์ของคุณแสดงการเปลี่ยนแปลงธีมที่ไม่ใช่ข้อมูลล่าสุด หากเกิดเหตุการณ์นี้ ให้ใช้ Ctrl + F5 เพื่อโหลดเพจนี้ซ้ำ

สร้างธีมใหม่

  1. เข้าสู่ระบบ Power Apps

  2. เลือก แอป จากบานหน้าต่างนำทางด้านซ้ายจากนั้นเลือกแอป

  3. เลือก คำสั่งเพิ่มเติม (...) แล้วเลือก แก้ไข

  4. เลือก ธีม จากบานหน้าต่างส่วนประกอบ

  5. เลือก ธีมใหม่

    สร้างธีมใหม่

แก้ไขรายละเอียดธีม

คุณสามารถอัปเดตการตั้งค่าชื่อธีม คำอธิบาย สี และรูปแบบข้อความอื่นๆ ได้ใน Power Apps Studio

  1. เข้าสู่ระบบ Power Apps

  2. เลือก แอป จากบานหน้าต่างนำทางด้านซ้ายจากนั้นเลือกแอป

  3. เลือก คำสั่งเพิ่มเติม (...) แล้วเลือก แก้ไข

  4. เลือก ธีม จากบานหน้าต่างส่วนประกอบ

  5. เลือกธีมที่ใช้อยู่ในปัจจุบันหรือเลือกธีมใหม่จากค่าที่ตั้งไว้ การเลือกธีม ให้เปิดบานหน้าต่างรายละเอียดทางด้านขวาของพื้นที่ทำงานของคุณ

    รายละเอียดธีม

  6. แก้ไขรายละเอียดธีม เช่น ชื่อ คำอธิบาย และสี สำหรับพื้นที่ต่างๆ

    ตัวเลือกสี พื้นที่ได้รับผลกระทบ
    รายการหลัก สีของลิงค์และปุ่ม
    ส่วนหัว สีพื้นหลังของส่วนหัว
    ข้อความเมนูส่วนหัว สีข้อความสำหรับเมนูส่วนหัว
    การวางเมาส์ที่เมนูส่วนหัว สีพื้นหลังของรายการเมนูเมื่อวางเมาส์ไว้
    พื้นหลังเนื้อความ สีพื้นหลังของส่วนเนื้อหา
    สีพื้นหลังของส่วนท้าย สีพื้นหลังสำหรับส่วนท้าย
    ข้อความส่วนท้าย สีข้อความส่วนท้าย

  7. บันทึกและเผยแพร่การเปลี่ยนแปลง

คัดลอกธีมที่ตั้งไว้ล่วงหน้า

  1. เข้าสู่ระบบ Power Apps

  2. เลือก แอป จากบานหน้าต่างนำทางด้านซ้ายจากนั้นเลือกแอป

  3. เลือก คำสั่งเพิ่มเติม (...) แล้วเลือก แก้ไข

  4. เลือก ธีม จากบานหน้าต่างส่วนประกอบ

  5. เลือกธีมจากพรีเซ็ตที่คุณต้องการคัดลอก เลือก ... แล้วเลือก ปรับแต่ง

    คัดลอกธีมที่ตั้งไว้ล่วงหน้า

  6. อัปเดตรายละเอียดของธีมตามที่อธิบายไว้ในส่วนก่อนหน้า จากนั้นบันทึกธีม

ตัวแปร Sass

Sass เป็นภาษาสไตล์ชีทพร้อม CSS แบบเต็ม-ไวยากรณ์ที่เข้ากันได้ เมื่อคุณเปิดใช้งานคุณสมบัติธีมพื้นฐาน คุณสามารถใช้ ตัวแปร Sass แทนค่าเพื่อกำหนดค่าสีของธีม

ตัวอย่างเช่น ถ้าคุณต้องการสี หัวข้อ อ่อนกว่ากว่า สี หลัก 25 เปอร์เซ็นต์ คุณสามารถใช้ค่าต่อไปนี้แทนสีเฉพาะ:

lighten($primaryColor, 25%);

ตัวอย่าง Sass

คุณสามารถใช้ตัวแปร Sass ต่อไปนี้กับธีมพื้นฐาน:

ตัวเลือกสี ชื่อตัวแปร Sass
รายการหลัก $primaryColor
ส่วนหัว $headerColor
ข้อความเมนูส่วนหัว $headerMenuTextColor
การวางเมาส์ที่เมนูส่วนหัว $headerMenuHoverColor
พื้นหลังเนื้อความ $bodyBackground
สีพื้นหลังของส่วนท้าย $footerColor
ข้อความส่วนท้าย $footerTextColor

คำสั่งตัวแปร Sass

ตัวแปร Sass ทำงานจากบนลงล่าง คุณสามารถตั้งค่าสี หัวข้อ เป็น lighten($primaryColor, 25%); แต่คุณไม่สามารถตั้งค่าสี หลัก เป็น lighten($headerColor, 25%); เพราะ หัวข้อ อยู่ด้านล่าง หลัก ในรายการตัวเลือกสี

ข้อควรพิจารณาเกี่ยวกับธีมพื้นฐาน

  • คุณไม่สามารถมีธีมสองธีมที่มีชื่อธีมเดียวกันหรือชื่อไฟล์ธีมเหมือนกันได้
  • ค่าสีใดๆ ที่คุณป้อนด้วยตนเองจะต้องเป็นสีที่ถูกต้อง
  • การเปลี่ยน CSS สำหรับธีมที่ตั้งไว้ไม่ได้รับการสนับสนุน
  • สีของธีมพื้นหน้าและพื้นหลังที่แนะนำคือ 4.5: 1 สำหรับการเข้าถึง

ขั้นตอนถัดไป

แก้ไขธีม CSS

ดูเพิ่มเติม

สตูดิโอของพอร์ทัล Power Apps
สร้างและจัดการเว็บเพจ
ตัวแก้ไข WYSIWYG

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)