web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / Override the default b...
Microsoft Dynamics CRM (Archived)

Override the default bootstrap CSS for an ADX Portal web page

(0) ShareShare
ReportReport
Posted on by Community Member

Hi all!

I have been reading the ADX Portal documentation for a week or so and one thing that is not so clear to me is how to override the main bootstrap css file for another page.

I was going to add the bootstrap file as a web file in CRM but I am not sure if adding a file with the same name of the default bootstrap file will cause problems.

The main bootstrap file is called bootstrap.min.css, can I add another file Via Portals> Web Files without causing any issues with files with the same name?

I was hoping to then point to this new bootstrap file in the web page by adding it as a Child File, would this be the correct way to override the default bootstrap CSS?

Any advice on this is much appreciated!

Thanks! 

*This post is locked for comments

I have the same question (0)
  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Hi,

    you can maybe find here some answers: community.adxstudio.com/.../4be58138-b159-e411-80e9-00155dc0a3d4

  • Community Member Profile Picture
    Community Member on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Hi Guillaume, thank you for your response!

    From the theming guide:

    Once you have your custom bootstrap.min.css, you can apply it to your application in one of two ways. If you are a developer and prefer to work directly with the source code of your application, you can simply overwrite the version of bootstrap.min.css included in your application source with your custom version. In most cases, however, it's recommended to apply your custom Bootstrap theme without modifying your site code – by uploading it as a Web File in the Adxstudio Portals content management system.

    I want to make sure when I upload a file called bootstrap.min.css as a Web File it will not affect the main source. I am not sure if I should upload the bootstrap as a Web File with the same name or a different name.

    Do you have any idea?

    Thanks!

  • Suggested answer
    Thomas David Dayman Profile Picture
    Thomas David Dayman 11,323 on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Hi,

    Yes, if you go to home page and add a new child file.

    Then in the summary, add this:

    .navbar-static-top.navbar-inverse {

     background-color: #E81280;

    }

    footer .footer-top {

       background-color: #E81280;

    }

    footer .footer-bottom {

       background-color: #E81280;

    }

    This will overwrite the default css.

    The above css will change the colour of the banner and footer. All you need to do is pick and choose which elements you want to edit.

  • Community Member Profile Picture
    Community Member on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Hi Thomas, thank you for your answer!

    Does it have to be the home page or can be any page?

    I need to add the CSS as a Web File and then add it as a Child File, is that correct?

    When I add the CSS Web File, can it have any name?

    Thank you!

  • Thomas David Dayman Profile Picture
    Thomas David Dayman 11,323 on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    You can have it as any name. You can add the child file straight from the portal and then it will add it as a web file in CRM for you.

    If for example you want the default colour of the banner to be the same colour throughout your website then you would place the code onto the home page which then in turn will flow down to all child pages. But if you want a banner colour to be one colour on one page then you will only apply a child file on that particular page.

  • Community Member Profile Picture
    Community Member on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Thanks Thomas that makes perfect sense! Good information there!

    We actually do not use the ADX portal interface but CRM > Portals to manage our portals.

    So I was thinking I could just add a Web File via CRM, but the documentation leads me to believe Web Files are rather files that can be downloaded from a page but I just want to add custom CSS.

    Thanks for your help!

  • Thomas David Dayman Profile Picture
    Thomas David Dayman 11,323 on at
    RE: Override the default bootstrap CSS for an ADX Portal web page

    Yes it took me a while to understand it. The adxstudio documentation doesn't really make it clear. All I wanted to do was change the css as well :D.

    What I do is press F12 on the portal page and then try and pick out what elements i want to edit. Then I just copy and paste the css that I have changed that in then will overwrite the default css.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Join experts in person to explore low code and AI agents at the Power Platform Community Conference sponsored by Microsoft

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Abhilash Warrier – Community Spotlight

We are honored to recognize Abhilash Warrier as our Community Spotlight honoree for…

Congratulations to the September Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
Community Member Profile Picture

Community Member 2

#1
HR-09070029-0 Profile Picture

HR-09070029-0 2

#1
UllrSki Profile Picture

UllrSki 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans