cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
600toogood
Regular Visitor

How do you change the color links on a Power Apps Portal site?

On the same page, I want to make some links red, some blue, some green, some orange and some purple, but currently the theme I used has all of the links as blue.  The links I am referring to are child pages to the page they are on.  I used the "Full Page" template.

 

Is this possible?

 

If so, how do I do it?

 

I have attached a picture to show what my page looks like.

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

Hi @600toogood 

 

Yes, it is possible. There are multiple ways. Try the following way using JavaScript.  Here are the steps for you. 

 

In Portal Management: 

 

1. Under Content > Web Pages > Select the parent page. Ex: 2021-2026-Strategic-Plan 

2. Under Localized Content > Select the page again 

3. Under Advanced > Custom JavaScript 

4. Add the following script 

 

 $(document).ready(function () {
 console.log(555, "RR Testing Color change functions");
 $(".list-group-item:nth-child(1) a").css("color", "red");
 $(".list-group-item:nth-child(2) a").css("color", "green");
});

Hint: Change the n-th child property according to your need. 

 

5. Hit Save and Close 

 

In Portal Studio 

 

1. Sync Config > Browse website > Ctrl + F5  to view changes. 

 

Output: 

ragavanrajan_0-1637183312673.png

 


Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

View solution in original post

1 REPLY 1
ragavanrajan
Super User
Super User

Hi @600toogood 

 

Yes, it is possible. There are multiple ways. Try the following way using JavaScript.  Here are the steps for you. 

 

In Portal Management: 

 

1. Under Content > Web Pages > Select the parent page. Ex: 2021-2026-Strategic-Plan 

2. Under Localized Content > Select the page again 

3. Under Advanced > Custom JavaScript 

4. Add the following script 

 

 $(document).ready(function () {
 console.log(555, "RR Testing Color change functions");
 $(".list-group-item:nth-child(1) a").css("color", "red");
 $(".list-group-item:nth-child(2) a").css("color", "green");
});

Hint: Change the n-th child property according to your need. 

 

5. Hit Save and Close 

 

In Portal Studio 

 

1. Sync Config > Browse website > Ctrl + F5  to view changes. 

 

Output: 

ragavanrajan_0-1637183312673.png

 


Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Carousel News & Announcements 768460.png

What's New in the Community?

Check out the latest News & Events in the community!

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Top Solution Authors
Users online (1,859)