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

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

ธีมประกอบด้วย Cascading Style Sheet (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. คลิกเผยแพร่

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