Custom Theme

[consecom]

Hi

We are currently tweaking the theme and the layout. According to the documentation we create the following new files and compiled them with sass:

Code: Select all

resources
    poseidon-layout
        css
            layout-new.cs
            layout-new.scss
    primefaces-poseidon-new
        theme.css
        theme.scss

The sass folder with all the other scss is also in place and compiling scss works without an error.

We now added the layout to the template.xhtml with the following tag:

Code: Select all

<h:outputStylesheet name="css/layout-new.css" library="poseidon-layout" />

and changed the theme in the web.xml to:

Code: Select all

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>poseidon-new</param-value>
    </context-param>

The changes in the layout-new.scss are loading but the ones made in the theme.scss are not. What is wrong here?

Thank you in advance for your help!

[mert.sincan]

Do you have the following variable and @import in your theme.scss?

Code: Select all

$primaryColor: YOUR_PRIMARY_COLOR;

@import '../sass/theme/_theme';

[consecom]

Yes. those are in place. We also want to overwrite additional colors and add some more scss stuff. So it looks like the following:

Code: Select all

/* Consecom Color */
$primaryColor: #17365d;

$menuOverlayColor: #4c77ae; 

/* Overwrite _variables */
/* Common */
$fontSize:10.5px;

/* Headers */
$headerBgColor: #17365d;

/* Horizontal Menu */
$hmenuBGColor: #17365d;

/* Predefined Colors */
$buttonColor:#e8c9a2;
$white:#ffffff;

@import '../sass/theme/_theme';

@import 'additional_scss'

The problem seems to be, that the import of _theme overrides those variables again (as _theme imports also _variables) is this corret?
If so, the following questions would arise:
1. How is it intended to change more than just the primaryColor? Is it by overwriting the variables directly in the _variables.scss?
2. Where is the best place to add additional scss code or overwrite existent selectors? Is it in the corresponding theme respectively layout?

Thank you for your help!

[mert.sincan]

Hi @consecom,

Your theme.scss file have only the following variable and @import;

Code: Select all

$primaryColor: YOUR_PRIMARY_COLOR;

@import '../sass/theme/_theme';

If you want to customize theme more, you can change variables in the _variables.scss. We created it in order to the users can make custom theme easier.

[consecom]

Hi aragorn

All right! Thank you for your help

Cheers

[mert.sincan]

You're welcome;)