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
Carousel Community Blog

Check out the Community Blog

Read all about the most recent blogs in the community!

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Users online (1,633)