Question
Pegasystems Inc.
US
Last activity: 23 Jul 2024 14:09 EDT
Where should we override/add a background image in ui for a single portal using cosmos
Client would like to add an official background image to only one portal in there application using cosmos. I have seen the override in the .cssheader in general. Where would this be done for the background image for a specific portal?
Accepted Solution
Updated: 23 Jul 2024 14:09 EDT
Pegasystems Inc.
US
Opening the inspector/dev tools in the browser we can see that the selector for the main area in the css is .workarea-view-content. This will affect all portals in the app. If we look towards the top of the html for a portal specific name we can find node-name="PortalName" this is similar to the welcome banner using the data-node-id as a selector for the background image in the banner.
div[data-node-id="WelcomeBanner"] > div.layout > div.layout-body { background: url('webwb/WelcomeWidgetBackground.png') ; }
So we were able to use the portals node name similarly with the image in a binary file. This selects specifically this portal and does not affect the other portals.
[node_name="SecondPortal"] .workarea-view-content { background: url('webwb/BackgroundImage.png');
}
As a note, the stylesheet must be allied in the skin and did not work for us in the 'Home' harness. Also, the portal must be closed then relaunched to see updates to the stylesheets. Refresh does not reload the changes.
Thanks for the info!
Evonsys
IN
If we are to take the OOTB Cosmos Portal welcome banner example, we see that the background image was uploaded as a Binary file and then it was added via the CSS code.
You can do the same via writing the CSS code targeting the required css classes and inject the background image.
The CSS code can be added on the Outer Portal harness rule under stylesheets via a custom css file.
Updated: 18 Jul 2024 12:37 EDT
Pegasystems Inc.
US
Thank you for the example.
In the WelcomeBanner example, if the Welcome Banner rule is opened there is only the shaded overlay coming from somewhere and the text components in the template. In the CosmosSkin style sheets there are no references to the WelcomeBanner background. Further in the Home harness and the Portal harness there is no style sheets. Which rule holds the style sheets for the Welcome Banner background image?
Where is the shaded overlay coming from?
Pegasystems Inc.
US
I made a couple errors in the previous comment. I opened the binary file named "WelcomBannerImage" and found no references to this image. The correct file is "WelcomeWidgetBackground" and that references the first listed style sheet in the cosmos skin overrides. The reason I could not find the css in this style sheet is because I did a word search out of the context of the sheet. I needed to click inside the sheet before opening the search. I know better but I somehow missed this.
I am now able to find the image reference and need to find how to do this to the main "Home" harness for this specific portal. I will close this question when I figure that part out.
Accepted Solution
Updated: 23 Jul 2024 14:09 EDT
Pegasystems Inc.
US
Opening the inspector/dev tools in the browser we can see that the selector for the main area in the css is .workarea-view-content. This will affect all portals in the app. If we look towards the top of the html for a portal specific name we can find node-name="PortalName" this is similar to the welcome banner using the data-node-id as a selector for the background image in the banner.
div[data-node-id="WelcomeBanner"] > div.layout > div.layout-body { background: url('webwb/WelcomeWidgetBackground.png') ; }
So we were able to use the portals node name similarly with the image in a binary file. This selects specifically this portal and does not affect the other portals.
[node_name="SecondPortal"] .workarea-view-content { background: url('webwb/BackgroundImage.png');
}
As a note, the stylesheet must be allied in the skin and did not work for us in the 'Home' harness. Also, the portal must be closed then relaunched to see updates to the stylesheets. Refresh does not reload the changes.
Thanks for the info!