Best way to edit styling and keep upgrading simple

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
motiv
Posts: 1
Joined: 24 Jun 2020, 13:30

30 Jun 2020, 19:52

Hello. I have been working with the barcelona template for my UI here this past week. I wanted to know what the best way to update styling is while keeping future upgrades as simple as possible. I looked through the doc for the template but didn't find it to be particularly clear. (this is the doc I was looking at, if there's another one lmk. https://www.primefaces.org/barcelona-ng/#/documentation) I had setup the template by creating a new ng project from the angular cli and then copying over the template into the project directory. From there I had added new services and components and what not.

I ran into a couple different problems that I can share as examples of what I want to do. One problem was changing the picklist selected item highlight color. Currently it's a shade of green, but I wanted it to be a shade of blue instead. I found where I could make the change in the theme-blue-grey.css file but making changes there is going to make any future upgrades a pain.

Another problem I had was trying to change the logo to a different image. Simply replacing the image forced the scaling on the new image to be wonky. I ended up using inline styling to make it look ok, but only in desktop. It's no longer responsive and looks bad in a mobile view.

What would be the best way to deal with these sorts of problems and introduce some small bits of our own styling, but still make it easy to copy over future upgrades of the template?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

06 Jul 2020, 11:44

Hi,
Firstly, use the overrides folder the best and simple way to update the styling. "It is suggested to add your customizations in the following(_src/assets/sass/overrides/) sass files under the override folder instead of adding them to the scss files under sass folder to avoid maintenance issues after an update." in documentation page :)
Secondly, You can use override files for changing highlight color. For example;
_src/assets/sass/overrides/_theme_styles.scss

Code: Select all

body {
    .ui-picklist {
        li.ui-picklist-item {
            &.ui-state-highlight {
                background-color: blue;
                color: white;
            }
        }
    }
}
Lastly, we use a media query for the mobile logo. Maybe this cause bad view, you can look into _media_queries.scss file and find a solution or you can write a similar media queries. If your issue still exists, please write again.

Post Reply

Return to “Barcelona - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests