Diamond Prime React Template Layout Customization

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
tjohnsen
Posts: 5
Joined: 06 Oct 2021, 19:05

29 Oct 2021, 17:33

Hello,

We are evaluating the Diamond template for enterprise license. I see that the style/themes are broken into two main sections, layout and theme.

We would like to take the layout and implement our own customizations, however it looks as though there are both css and scss files for the layout components and the breakdown is somewhat confusing due to how the files are included.

Is there any documentation for steps required to achieve

1) Customization of the layout using the individual sass files included in the project to build these to a css (or am i misunderstanding, and the css should just be modified directly ? )

For instance, you have two locations of styles - assets/layouts/css - editing this achieves changes within the project (although one day in and it looks like some of the .scss files are being used for media query elements on mobile but can seem to determine how). You then have the assets/sass folder that appears to contain styling for these layout components, buts its unclear how to utilize them or build them out properly.

Really just looking for a best practices approach for how to customize the layout styling of the Diamond React Template and cant seem to find one here or on the main site.

tjohnsen
Posts: 5
Joined: 06 Oct 2021, 19:05

02 Nov 2021, 15:53

I have gotten a little farther along and am using node-sass-chakira to build out a custom theme

"build-css": "node-sass-chokidar public/ -o public/",
"watch-css": "npm run build-css && node-sass-chokidar public/ -o public/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",

The css looks to be generating for the theme, but unfortunately when placing color overrides in the file specified for this (/public/assets/sass/overrides -> _theme_styles/_theme_variables), the changes do not get applied to the output css so I reverted to putting them in the custom theme file here public/asset/theme/mycustomtheme file. I'm not sure if this is some type of issue with how the css gets loaded or how it was written in order in the main import file or if there is something else happening at build time.

My question at this point is just to view a working sample diamond template project that has a customized layout theme, for example, a menu and sidebar with different colors and how this is best achieved using scss files without having updates cause a disruption

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

19 Apr 2022, 02:42

Hi,

Sorry for the delayed response! Is this problem resolved on your side?

Best Regards,

Post Reply

Return to “Diamond - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests