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

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Customer Service forum

Microsoft Portal Themes

(0) ShareShare
ReportReport
Posted on by 123

Hi,

I am relatively new to Microsoft portal.

I wanted to change the colour scheme of the default portal, I have read https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/create-theme

but this doesn't seem to work. I download the bootstrap.min.css file from Bootswatch.com.

Ive tried amending the current bootstrap.min.css file as well as uploading a new one, and both don't pull through the new styling, am I missing a step?

Thanks

Damesh 

Categories:
I have the same question (0)
  • LeoAlt Profile Picture
    16,331 Moderator on at

    Hi partner,

    You should custom the bootstrap first (make some differece from the default one) and then upload it into portal.

    BTW, you could also try this way.

    nishantrana.me/.../

    community.adxstudio.com/.../

    I also tried the ways of the above blog but there seems to be something wrong with my css.

    community52.png

    I will work out it and notice you as soon as possible.

    Hope it helps.

    Best Regards,

    Leo

  • Damesh Peri Profile Picture
    123 on at

    Hi Leo,

    Thanks,

    I got the same layout when I used the ADXstudio suggestion.

    Look forward to hearing back.

    Thanks

    Damesh

  • Suggested answer
    Inogic Profile Picture
    743 on at

    Dynamics 365 portal has been using bootstrap for the frontend design. You can very much customize the design of the portal by changing the default bootstrap design to the custom one. To change the bootstrap theme we need to add new bootstrap.min.css in “bootstrap.min.css” Web File record as a notes attachment.

    I think you are attaching new bootstrap.min.css file but it is not working correctly. I can see Navbar breaks, it has been showing vertically. It seems that the bootstrap that you have generated is not compatible or working with the portal. You can try by using official bootstrap customizer to customize and download the bootstrap and upload the newly generated bootstrap in Web File in CRM. Try by changing background color, font color. You will see the difference.

    Sam

  • Verified answer
    Justin Wilkinson Profile Picture
    1,338 on at

    Hi Damesh,

    I hope the following links will be useful - I also have had issues with this, I exported the default theme.css.

    I then searched within the colour hexcode in developer mode in chrome and updated those in bulk in the theme.css - this video and blog might help:

    cloudriven.fi/.../

    megan walker also has so many amazing blog posts on portals that are helpful:

    meganvwalker.com/

    docs.microsoft.com/.../create-theme

  • Kalpavruksh D365 CoE Profile Picture
    2,545 on at
    Hi,
    After uploading the new CSS try to clear the cache of the portal, and Restart portal.
    To clear cache of portal, use this link logged in with portal admin role https://yourportaldomain.microsoftcrmportals.com/_services/about
  • Verified answer
    Byron Dittberner Profile Picture
    235 on at

    Good Day

    Personally, I would not modify the bootstrap.min file nor the theme file. To change the colors of the font, backgrounds etc, you can do this directly on the portal with basic CSS. try the below...

    To Start you must be an administrator on the Portal

    1. register as a portal user(contact)
    2. Once registered, from CRM search for the contact you just created. Change the contact form to "Portal Contact"
    3. Scroll down and look for the Grid, "Web Roles", assign the contact "Yourself" the Administrator Role. (This should not be confused with the Security Role, Web Roles are assigned to Contacts which govern permissions on the Portal)
    4. Once you are an Administrator on the Portal, Refresh the Portal.
    5. You will see a PopUp Control floating on the top right of your screen. This indicates you are now accessing the portal as an Administrator.
      1. Snip.JPG

    Next you can start changing colors and fonts, personally, I do this by directly identifying the Classes or ID of the elements I would like to effect.

    1. Navigate to the page you would like to edit, then select Edit on the control
      1. pastedimage1563394461671v1.png
    2. Next Select the TAB, "Options"
      1. pastedimage1563394515665v2.png
    3. Next, in the CSS section, you can start writing your CSS
      1. pastedimage1563394582085v3.png
    4. When you are done, save your changes. On save, the code editor will close and your changes will take effect immediately.

    NB! to find the classes of the elements, simply navigate to the page you wish to edit and then press F12, using the element selector, click on the element you would like to change thus showing you the class/ID of the element.

    Here is a sample video I created for you - https://youtu.be/gTjcxckzaV0

    Soon I will be hosting a series of webinars on my LinkedIn group, ABC's for Dynamics where I will be featuring tips and tricks to Customizing and configuring Portals, you are welcome to connect with me for help. https://www.linkedin.com/groups/13709301/

    Should you find this post helpful, please mark as Verified and awesome 

  • Verified answer
    Inogic Profile Picture
    743 on at

    The above steps i believe work for modifying the css for each page individually. If you would like changes to be reflected globally, using theme.css and bootstrap.css would do the trick.

    Sam

  • Damesh Peri Profile Picture
    123 on at

    Thanks for your help. I was using bootstrap 4 rather than 3.

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

Quick Links

November Spotlight Star - Khushbu Rajvi

Congratulations to a top community star!

Forum Structure Changes Coming on 11/8!

In our never-ending quest to help the Dynamics 365 Community members get answers faster …

Dynamics 365 Community Platform update – Oct 28

Welcome to the next edition of the Community Platform Update. This is a status …

Leaderboard > Customer Service

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans