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
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Users online (1,160)