Hey Travis and thanks for your time,
1 - ok
2 - yes same here, BUT... others files including some respond-to mixins don't use the var I define in my custom.css...
By example if I want to override tablet width with 1000px (default is 979px) :
custom.css:
My code will end up with custom rules with 1000px (ok), but others inherited rules (extras.css, whatever.css) are still in 979px (they use respond-to mixins too), breaking the display.
I did not want to override each css file which use respond-to mixins just to add my var $breakpoint_tablet: 1000px; Is it possible not to ?
3 - Lets say I want to do both, so if I have to in the next days, I know how to do
But in my actual case, I want that all files containing respond-to mixins, being a file in my theme or inherited from the classic theme, use my variable $breakpoint_tablet instead of the one defined somewhere (in the _mixins file from portal I bet).
Btw I tried the hook, and it seems not to work. I must be doing something wrong...
What I do is :
a - turn tomcat off
b - erase work, tmp, and the webapps/my_theme directory.
c - turn tomcat on
d - deploy my hook with the _mixins file with my var set
e - deploy my_theme
f - cry because I still have multiple instances of max-width: 979px in my css, when I should only have max-width: 1000px (like I said, in extras.css, in custom_responsive.css, etc.)
1 - ok
2 - yes same here, BUT... others files including some respond-to mixins don't use the var I define in my custom.css...
By example if I want to override tablet width with 1000px (default is 979px) :
custom.css:
@import "mixins";
$breakpoint_tablet: 1000px;
div {
@include respond-to(phone, tablet) {
color:blue;
}
}
My code will end up with custom rules with 1000px (ok), but others inherited rules (extras.css, whatever.css) are still in 979px (they use respond-to mixins too), breaking the display.
I did not want to override each css file which use respond-to mixins just to add my var $breakpoint_tablet: 1000px; Is it possible not to ?
3 - Lets say I want to do both, so if I have to in the next days, I know how to do
But in my actual case, I want that all files containing respond-to mixins, being a file in my theme or inherited from the classic theme, use my variable $breakpoint_tablet instead of the one defined somewhere (in the _mixins file from portal I bet).Btw I tried the hook, and it seems not to work. I must be doing something wrong...
What I do is :
a - turn tomcat off
b - erase work, tmp, and the webapps/my_theme directory.
c - turn tomcat on
d - deploy my hook with the _mixins file with my var set
e - deploy my_theme
f - cry because I still have multiple instances of max-width: 979px in my css, when I should only have max-width: 1000px (like I said, in extras.css, in custom_responsive.css, etc.)
Hey Travis,
my hook is actually working, as I can see the modified file in :
and the old _mixins.scsss file as _mixins.portal.scss.
Fact is I just saw what is our problem here : all the .sass_cache directories are filled with old files.
I am deleting each time I build my theme my workspace/theme .sass_cache directory, BUT :
1 - the war created still get a .sass_cache directory full of bad css (with old variable and not new one). So I have to open the .war archive and clean the .sass_cache directory.
How to construct with maven a proper .war with updated .sass_cache files ? Actually it's not working (building gives a .sass_cache directory full of crap)
2 - my server webapps ROOT is full of .sass_cache directories with bad files too. I'm removing all content manually.
How to do it properly ?
Thanks one more time for your help. I hope this thread will help other people too
EDIT :
I added this to my parent pom and now no more .sass_cache directory in my war. Point 1 seems ok then. Cool. :
my hook is actually working, as I can see the modified file in :
/webapps/ROOT/html/css/commonand the old _mixins.scsss file as _mixins.portal.scss.
Fact is I just saw what is our problem here : all the .sass_cache directories are filled with old files.
I am deleting each time I build my theme my workspace/theme .sass_cache directory, BUT :
1 - the war created still get a .sass_cache directory full of bad css (with old variable and not new one). So I have to open the .war archive and clean the .sass_cache directory.
How to construct with maven a proper .war with updated .sass_cache files ? Actually it's not working (building gives a .sass_cache directory full of crap)
2 - my server webapps ROOT is full of .sass_cache directories with bad files too. I'm removing all content manually.
How to do it properly ?
Thanks one more time for your help. I hope this thread will help other people too
EDIT :
I added this to my parent pom and now no more .sass_cache directory in my war. Point 1 seems ok then. Cool. :
<plugin>
<groupid>org.apache.maven.plugins</groupid>
<artifactid>maven-war-plugin</artifactid>
<configuration>
<packagingexcludes>**/.sass-cache/**</packagingexcludes>
</configuration>
</plugin>
Hey Travis,
good day today (well yesterday in fact) ! All problems are gone.
As a summary, if you want to override a variable from themes, you have to :
1 - find the css or scss file in the portal where the var is declared.
2 - build a hook for this file and override the variable. As Liferay maven plugin does not allow to hook for css but only for jsp, just do a jsp hook archetype and create the folder tree needed for the css. If hook is correctly deployed, you'll have your files (and old portal ones) in your webapps/ROOT/[hook_files_path]
3 - using maven, add the following build plugin in your pom.xml :
4 - on your server, go to the tomcat folder and erase all .sass-cache folders. On linux this simple command is enough :
5 - now deploy your theme. Normally war should not contain any .sass-cache folder, neither your server. All sass files should now use the hooked variable.
Done.
good day today (well yesterday in fact) ! All problems are gone.
As a summary, if you want to override a variable from themes, you have to :
1 - find the css or scss file in the portal where the var is declared.
2 - build a hook for this file and override the variable. As Liferay maven plugin does not allow to hook for css but only for jsp, just do a jsp hook archetype and create the folder tree needed for the css. If hook is correctly deployed, you'll have your files (and old portal ones) in your webapps/ROOT/[hook_files_path]
3 - using maven, add the following build plugin in your pom.xml :
<plugin>
<groupid>org.apache.maven.plugins</groupid>
<artifactid>maven-war-plugin</artifactid>
<configuration>
<packagingexcludes>**/.sass-cache/**</packagingexcludes>
</configuration>
</plugin>
4 - on your server, go to the tomcat folder and erase all .sass-cache folders. On linux this simple command is enough :
find . -type d -name '.sass-cache' -exec rm -rf {} +
5 - now deploy your theme. Normally war should not contain any .sass-cache folder, neither your server. All sass files should now use the hooked variable.
Done.