Question
Tech Mahindra
CA
Last activity: 3 Jan 2018 13:33 EST
How to Create Custom UI Styles / transition Effects for containers / Dynamic Layouts / Carousel sliders formats and Apply specific CSS / Script / Animations?
I am a UI / UX Designer, Expert in using Traditional HTML CSS Script to build desired UI pages, Am new to PEGA, I learned how to customize skin elements and use as per requirement, in order to create best from both worlds of traditional and Pega UI
I Need help in creating rich UI content sections with Carousel sliders, containers( div) background colors , buttons , Links, Tooltips and / hover / transition effects using CSS and Script.
attached are the image references taken from PEGA websites.
I have been going thru https://pdn.pega.com/sites/pdn.pega.com/files/DOC-104095.pdf
Thanks in advance.
Pegasystems Inc.
IN
I Need help in creating rich UI content sections with Carousel sliders, containers( div) background colors , buttons , Links, Tooltips and / hover / transition effects using CSS and Script.
Hi,
As per my knowledge we can create sliders by creating the javascript codes and regarding the containers and background colurs we can make use of skin and if we want option to still customize we can make use of the css where have option to write css or we can create the seperate class and write the required styles to the particular element.
Tech Mahindra
CA
Hi Prasanth,
Thanks for your response, I was trying around with writing custom CSS classes and have applied in cell property level, but when I see the page with browser inspect tools, can see the class being called but the desired effect ( hover / transition) within the mentioned CSS class are not observed on HTML generated page,
kindly share if you have any best practice/method guide
Pegasystems Inc.
IN
Pegasystems Inc.
IN
Hello Hemanth,
Are you able to see the custom css and desired effects you have applied for DOM elements?
Do you need any help ?
Please find the attachment for your reference where you can add the custom style sheet.
Go to open application skin ----> add your custom style sheet in Additional style sheets.
I hope this information will help you.
Thanks & Regards,
Durga
Tech Mahindra
CA
Hi Durga,
Thanks for your help, I tried the same way as you mentioned. I added a new css file with in skin and added all required classes. but when am adding classes to the cell properties, I can see the class being called while inspecting with browser inspect tool but the desired effects(class properties in css) are not being applied.
My current requirement is to achieve the below mentioned css effect for dynamic layouts or container formats,
if you look in to the link https://academy.pega.com/
in the Advance Your Pega Career section and Browse library by Pega Product attaching screenshots below,
Effects while we hover on to the div containers ( which are constructed on <a> link) I want to achieve the same effect with in Pega, plz let me know if you have and best practices on this.
Northbridge
CA
Hi James,
First of all, make sure your CSS changes are perfect! Add the changes on the fly(from dev tools styles) and check the CSS is right.
Second of all, test the CSS changes by placing them first in "UserWorkForm" rule within <style> tags. This is for testing purpose only. If they seem to work then place them either in the SKIN rule or the Harness rule or a section wherever needed as per requirement.
Pegasystems Inc.
IN
Hello Hemanth,
As Durga mentioned the steps, those steps will help you to achieve your requirement.
As per last image shared where Marketing is hovered. Below style is applied for that:
.c-action-block:hover {
text-decoration: none;
color: inherit;
background-color: rgba(255,255,255,.1);
}
Kindly share the CSS that you are using for your custom changes.
As you mentioned the CSS changes are not reflecting, can you check in debugger what is overriding your changes? Is your CSS is getting added?
Thanks:
Gurpreet