iTop - IT Service Management & CMDB / Discussion / Customizing iTop: User portal bootstrap theme

Richard Rohac - 2022-07-29

Hi,

I followed the tutorial how to change bootstrap theme in user portal, but I just can't seem to make it work.

It's looking like this (img1.png). I have spent some time already at this and I'm kinda lost. What am I doing wrong?

<properties> <themes> <theme id="bootstrap" _delta="force">elso-request-process/css/bootstrap.min.css</theme> </themes> </properties>

img1.png
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Richard Rohac - 2022-07-29

I am on iTop version 3.0.1 btw.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Jeffrey Bostoen - 2022-07-29

You might want to share the entire module.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Richard Rohac - 2022-07-29

Hi Jeffrey,

it's the same module as in the tutorial. When I use the one bootstrap css by default - simplex, all good. But when I want to use the new one - Zephyr, it's looking not good.

Any ideas?
Thanks.

sample-portal-new-theme.zip

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Richard Rohac - 2022-07-29

Hi everyone,

I solved it. The problem was the version of these bootstrap themes were not compatible with Bootstrap 3.

You need to go to https://bootswatch.com/3/ to actually download the themes that are compatible with iTop!!!

Maybe edit the URL in documentation, so that it directs the doc reader straight to the correct site?

Cheers,
Richard

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Guillaume Lajarige - 2022-07-29

Hello Richard,

GLad to see you solved it! Can you point me to the documentation you used so I can fix the bootstrap themes URL?

Thanks,
Guillaume

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Richard Rohac - 2022-07-29
  
  Hi Guillaume,
  
  it's this part https://www.itophub.io/wiki/page?id=3_0_0%3Acustomization%3Aportal_howto_changebstheme#choosing_a_new_theme.
  
  I would replace the links to https://bootswatch.com/ with https://bootswatch.com/3/.
  
  Cheers,
  Richard
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
  - Guillaume Lajarige - 2022-07-29
    
    Done! It might take a few minutes before it's live on the Hub.
    
    Thanks for pointing this out.
    Guillaume
    
    If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
    - Richard Rohac - 2022-07-29
      
      Yup, it's already there 😊. Thanks.
      
      Cheers Guillaume.
      
      Richard
      
      If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Daniel Camargo - 2022-11-06

Hello how are you, I am very new to this topic and I am trying to change the theme but when adding the zip file to start the update I get a missing file, (Missing file: manifest.xml) could you please help me.
Thanks.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Guillaume Lajarige - 2022-11-07
  
  Hello Daniel,
  
  Which version of iTop are you running?
  From what you wrote, it feels like you are using the "Application upgrade" feature to upload the Bootstrap theme right? This feature only works for iTop packages.
  
  Follow this tutorial, it will describe how to package a theme and how to install it.
  
  Hope this helps,
  Guillaume
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
  - Daniel Camargo - 2022-11-08
    
    Hello Gillaume, if you helped me, thank you very much, it worked correctly for me, you were right, I was updating wrong.
    
    🎉
    2
    
    If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
    - Guillaume Lajarige - 2022-11-09
      
      Glad to see you fixed it!
      
      If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Daniel Camargo - 2022-11-08

Hello everyone how are you, could someone tell me how to change this logo, I'm using this but it doesn't work for me
<main_logo_compact _delta="define">sample-itop-logos/custom-logo-compact.png</main_logo_compact>

Thanks.

Screenshot_9.png

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Pierre Goiffon - 2022-11-09

Hello,
You are refering to the favicon, not the logo
The favicon isn't customizable yet, see \WebPage::GetFaviconAbsoluteUrl

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Daniel Camargo - 2022-11-09
  
  Hi, thanks for your response Pierre.
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Daniel Camargo - 2022-12-16
  
  Hi how are you ?
  Pierre, \WebPage::GetFaviconAbsoluteUrl here I can see the favicon of the Admin portal, where I can see the one of the users portal
  
  Thanks.
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Ziaullah - 2023-01-25

Hello Team,

I have installed iTop version 3.0.2-1-9957 is there anyone who can assist me to change the User portal themes step by step.

i tried to follow the below instruction but i couldn understand it. on this article the path for the new themes and they method of testing the new themes are not mentioned.
https://www.itophub.io/wiki/page?id=3_0_0:customization:portal_howto_changebstheme

Thanks
Ziaullah

Last edit: Ziaullah 2023-01-25

userportal.png

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Jeffrey Bostoen - 2023-01-25

Testing would just be installing it?

What path do you mean?

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Ziaullah - 2023-01-25
  
  After configuring the new themes how to verify the new look/themes in User portal.?
  
  Path for the new themes that we want to use. Means where we should place the new downloaded themes.
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
  - Jeffrey Bostoen - 2023-01-25
    
    It is mentioned in the tutorial. You need to create an iTop extension. Those go in the "extensions" folder of iTop. Then, re-run the setup.
    
    If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
    - Ziaullah - 2023-01-25
      
      sorry i didnt get what re-run the setup means? is there any tool to run? it there any easy steps to follow.
      
      If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
      - Jeffrey Bostoen - 2023-01-25
        
        It's the initial setup wizard which you then need to go through again. See documentation on how to create extensions :)
        
        If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

User portal bootstrap theme

An easy, extensible web based IT service management platform

Forums

Help

User portal bootstrap theme

User portal bootstrap theme

An easy, extensible web based IT service management platform

Forums

Help

User portal bootstrap theme document.SUBSCRIPTION_OPTIONS = { "thing": "topic", "subscribed": false, "url": "subscribe", "icon": { "css": "fa fa-envelope-o" } };

User portal bootstrap theme