ปรับแต่งธีมของคุณ (เวอร์ชันดั้งเดิม)

คุณกำลังดูเอกสารประกอบของ Apigee Edge
ไปที่เอกสารประกอบของ Apigee X ข้อมูล

ธีมประกอบด้วยสไตล์ชีตแบบ Cascading ทั่วโลก (CSS) ที่ทำให้หน้าเว็บทั้งหมดในพอร์ทัลมีรูปลักษณ์แบบเดียวกัน เป้าหมายของธีมคือเพื่อให้คุณเปลี่ยนรูปลักษณ์ของหน้าพอร์ทัลทุกหน้าได้พร้อมกัน

รูปแบบเริ่มต้นส่วนใหญ่ที่ให้ไว้กับพอร์ทัลตัวอย่างจะอิงจาก Bootstrap คุณสามารถปรับแต่ง ดูตัวอย่าง และเผยแพร่ธีมของคุณ ดังที่อธิบายไว้ในส่วนต่อไปนี้

ดูวิธีปรับแต่งธีมของพอร์ทัลได้ในวิดีโอต่อไปนี้

เข้าถึงเครื่องมือแก้ไขธีม

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

ตัวแก้ไขธีม

ตามที่ได้ไฮไลต์ไว้ในรูปก่อนหน้านี้ ตัวแก้ไขธีมจะช่วยให้คุณทำสิ่งต่อไปนี้ได้

เพิ่มรูปแบบที่กำหนดเอง

ปรับแต่งธีมโดยการเพิ่มโค้ด CSS ของคุณเองในแผงตัวแก้ไขรูปแบบ ระบบรองรับองค์ประกอบรูปแบบ CSS ทั้งหมด

วิธีปรับแต่งธีม

  1. เลือกธีมในเมนูแบบเลื่อนลงในแถบนำทางด้านบน
  2. เพิ่มโค้ด CSS ที่กำหนดเองในแผงตัวแก้ไขรูปแบบทางด้านขวาของหน้า
  3. ดูตัวอย่างการเปลี่ยนแปลงในแผงแสดงตัวอย่างโดยคลิกโหลดตัวอย่างซ้ำ
    > หมายเหตุ: คุณคลิกผ่านการนำทางในพอร์ทัลเพื่อดูตัวอย่างเนื้อหาในทุกหน้าได้
  4. คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงธีม
  5. คลิกเผยแพร่เพื่อยืนยันการอัปเดต

ปรับแต่งรูปภาพ "โลโก้ของคุณ" ด้วยโลโก้ของบริษัท แล้วแทนที่ไฟล์ภาพต่อไปนี้ในตัวจัดการไฟล์ด้วยการอัปโหลดโลโก้โดยใช้ชื่อไฟล์เดียวกันและขนาดไฟล์ที่สัมพันธ์กัน

  • logo.png (140 x 40 พิกเซล)
  • mobile-logo.png (140 x 40 พิกเซล)

นอกจากนี้ แก้ไขเนื้อหาต่อไปนี้ในสไตล์ชีต CSS ตามต้องการ:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

ดูข้อมูลเพิ่มเติมได้ที่จัดการเนื้อหา

ปรับแต่งภาพพื้นหลังในหน้าแรก

ปรับแต่งภาพพื้นหลังบนหน้าแรกโดยการแก้ไขเนื้อหาต่อไปนี้ในสไตล์ชีท CSS

  • แก้ไขไฟล์ภาพพื้นหลังและตำแหน่ง
    คุณอัปโหลดรูปภาพ portal-hero.jpg ในเวอร์ชันของตัวเองไปยังตัวจัดการไฟล์ได้โดยใช้ชื่อไฟล์เดียวกันและขนาดไฟล์สัมพัทธ์ (1440 พิกเซล x 540 พิกเซล) หากต้องการใช้ชื่อไฟล์อื่น ให้แก้ไขค่า background-image ใน CSS ด้านล่าง 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • แก้ไขรูปแบบของข้อความที่วางซ้อนภาพพื้นหลัง 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

ทำความเข้าใจกฎข้อมูลเฉพาะ CSS

ความจำเพาะของ CSS จะอธิบายวิธีที่เบราว์เซอร์ใช้เพื่อกำหนดลำดับความสำคัญสำหรับการประกาศองค์ประกอบรูปแบบ CSS เมื่อเกิดความขัดแย้ง ความจำเพาะของ CSS คำนวณโดยใช้น้ำหนักกับการประกาศองค์ประกอบสไตล์ CSS ที่เฉพาะเจาะจงตามประเภทตัวเลือก ยิ่งตัวเลือก CSS มีความเฉพาะเจาะจงมากเท่าใด น้ำหนักจะยิ่งสูง ตัวอย่างเช่น แอตทริบิวต์รหัสจะมีน้ำหนักในการคำนวณสูงกว่าตัวเลือกประเภท

ตัวอย่างเช่น หากคุณกำหนดองค์ประกอบรูปแบบต่อไปนี้ในโค้ด CSS องค์ประกอบย่อหน้าจะเป็นสีแดง เนื่องจากการประกาศองค์ประกอบรูปแบบ p ภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าการประกาศองค์ประกอบรูปแบบ p

div p { color: red }  ← More specific  
p { color: blue }

ในทำนองเดียวกัน หากคุณกำหนดการประกาศองค์ประกอบรูปแบบต่อไปนี้ในโค้ด CSS ข้อความใดๆ ที่อยู่ในแท็ก <div class="test"></div> จะเป็นสีน้ำเงิน เนื่องจากการประกาศรูปแบบแอตทริบิวต์รหัสภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าการประกาศองค์ประกอบรูปแบบ div

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

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

p { color: red }  
p { color: blue }  ← Last specified

เผยแพร่ธีมของคุณ

หากต้องการเผยแพร่ไปยังพอร์ทัลออนไลน์ ให้ใช้การปรับแต่งธีมและสไตล์ที่คุณเพิ่ม

  1. เลือกธีมในเมนูแบบเลื่อนลงในเมนูการนำทางด้านบน
  2. คลิกเผยแพร่

หากต้องการดูเนื้อหาที่เผยแพร่ในพอร์ทัลแบบสด ให้คลิกพอร์ทัลถ่ายทอดสดในแถบนำทางด้านบน