How to change layout the components in the theme?

Post Reply
mauricio.olieira
Posts: 8
Joined: 20 Dec 2018, 16:21

02 Jan 2019, 17:03

I need to modify the layout the component right-sidebar. I have a question about compile scss, because used command available in the documentation is not working.

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

08 Jan 2019, 11:14

Which sass version are you using? Also, do you get an error?

Code: Select all

sass -v

mauricio.olieira
Posts: 8
Joined: 20 Dec 2018, 16:21

08 Jan 2019, 16:24

aragorn wrote:
08 Jan 2019, 11:14
Which sass version are you using? Also, do you get an error?

Code: Select all

sass -v
I'm using Ruby Sass 3.7.2.
I do not receive an error, but when I started the application, the change was not performed. I have a question, is which scss files to modify? Is there a complete layout documentation different from the one displayed on the site? It tells you how to make the changes and how to use the specific components of the layout.

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

11 Jan 2019, 13:53

Our documentation; http://primefaces.org/california/docs.xhtml

To customize, you can change _variable.scss or _*.scss files by yourself. Then, you need to provide new css file using SASS command. Similar to https://www.youtube.com/watch?time_cont ... uP3xkE8mvI

mauricio.olieira
Posts: 8
Joined: 20 Dec 2018, 16:21

30 Jan 2019, 13:18

aragorn wrote:
11 Jan 2019, 13:53
Our documentation; http://primefaces.org/california/docs.xhtml

To customize, you can change _variable.scss or _*.scss files by yourself. Then, you need to provide new css file using SASS command. Similar to https://www.youtube.com/watch?time_cont ... uP3xkE8mvI
I make modifications to the _theme_styles.scss file and compile with sass, but in the application the changes do not appear. Can you explain why?

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

30 Jan 2019, 13:25

Could you please attach your codes in _theme_styles.scss?

mauricio.olieira
Posts: 8
Joined: 20 Dec 2018, 16:21

30 Jan 2019, 13:29

aragorn wrote:
30 Jan 2019, 13:25
Could you please attach your codes in _theme_styles.scss?

Code: Select all

/* Add your customizations of theme here */
.panelPadding {
	padding: 0;
} 
I created a class to set the padding of some panel to a certain screen.

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

30 Jan 2019, 13:34

This is not a strong css. I think this is overridden by the css style in theme. Which component are you using? Also, could you please try;

Code: Select all

.panelPadding {
	padding: 0 !important;
} 

mauricio.olieira
Posts: 8
Joined: 20 Dec 2018, 16:21

30 Jan 2019, 14:07

aragorn wrote:
30 Jan 2019, 13:34
This is not a strong css. I think this is overridden by the css style in theme. Which component are you using? Also, could you please try;

Code: Select all

.panelPadding {
	padding: 0 !important;
} 
I use the components:

Code: Select all

<p:panel></p:panel>
<p:panelGrid></p:panelGrid>
<p:layoutUnit></p:layoutUnit>
<p:toolbar></p:toolbar>
<p:toolbarGroup></p:toolbarGroup>
But when I start the application the generated theme.css file is not with the changes I put in _theme_styles.sccs even after compiling with sass.

Image

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

02 Feb 2019, 09:44

Good catch! Thanks a lot ;)

Please make the following change;
in _theme.scss

Code: Select all

...
@import '../_theme_styles.scss';  /* instead of '../_layout_styles.scss'; */
Fixed for next version. Thanks again ;)

Best Regards,

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests