I’m diggin into Liferay theming with Sass.
One thing I really like to know is: How to make use of variables defined in the theme within a custom portlet.
Because I want to have generic theme related styles within my theme and portlet specific styles within the portlet to increase maintainabilty und portability.
Lets say I have the follwing file within my theme:
css/_ aui_variables.scss
Within this file I have overridden the default values of the Bootstrap variables defined in the parent theme:
_styled/css/_aui_variables.scss
Of course I would like to make use of these variables in my portlet specific Sass files which I would like to place within portlets main.css (which is compiled by the Sass parser as well).
Please let me know that this is possible.
When trying to import my variables in the portlets main.css via:
#import "foobar-default-theme/css/_aui_variables";
My console in Eclipse (Liferay IDE) shows me the following error message:
File to import not found or unreadable: foobar-default-theme/css/_aui_variables.
Load paths:
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/html/css/common
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/25-foobar-top-navigation-portlet/css
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/sass
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
/css/main.css:2
[…]
Any hints appreciated.
Best regards,
Michael
Related
I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
We have Webpack for our project and we need to customize a great amount of things. I.E. we need to create our own theme. According to the docs, I should have:
#import 'theme/_import';
#import '~uikit/src/scss/variables';
#import '~uikit/src/scss/mixins';
#import "~uikit/src/scss/uikit";
Where the theme folder is a copy of uikit/src/scss/theme. However, I get an error:
Undefined variable: "$global-muted-background".
So what should I do in this situation?
Did I rightfully copy that theme folder? Is it meant for copy-paste and then modification? If yes, what do I import before that folder so that the necessary variables are declared?
Should I copy the whole variables-theme.scss file and modify it instead? In that case, what's the purpose of splitting each component's variables into files, as the docs suggest? Also, everything would be a mess.
Where should I put my custom global variables? In theme/variables and then import them in theme/_import?
I am working on Asp.net Core With Angular 6 Project
I installed ngx-admin template to angular Project
then includes scss style in my global style like this
#import '~#nebular/theme/styles/globals';
#include nb-install() {
#include nb-theme-global();
};
when I run the project I got this error :
Microsoft.AspNetCore.SpaServices[0]
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
any Help !?
This error indicates you are loading a CSS file. It's possible one of you above imports is importing a CSS file.
#import "foo.css";
Which basically is converting it to.
#import url(foo.css);
If you want to import the contents of a CSS file into the output CSS then it's recommended just reference the CSS file directly in your angular.json in the "styles": [] section.
In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I want to set different color themes and I found this collection https://github.com/thomaspark/bootswatch
But how correctly to set them to my project? I tried to replace files
node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/css/bootstrap.min.css
and cleared cache and rerun
npm run watch-poll
But no effect... Which is the right way?
Are there some tools to change color themes programmatically, say depending on logged user options ?
Adding a link of one bootswatch file in my layout file resources/views/layouts/app.blade.php, like:
<link href="{{ asset('css/darkly/bootstrap.min.css') }}" rel="stylesheet">
I see that colors of my layout of my pages is different, but I mean that in this case I ADD this css/darkly/bootstrap.min.css file to the EXISTING(ORIGINAL) bootstrap.min.css
and now I have 2 bootstrap.min.css files in my system.
Is it good decision?
I supposed that creators of bootswatch meant to REPLACE the original bootstrap.min.css file. How do you think?
And that is the question where original Bootstrap css(and bootstrap.js to) are attached to the project ?
in my layout file resources/views/layouts/app.blade.php a line:
that is a ref to my custom css file, the styles I add to the project.
I did not find how to skip attaching of the original Bootstrap CSS file...
Thanks!
Bootswatch is not meant to REPLACE the existing bootstrap CSS file. It is meant to work and OVERRIDE the styling rules from the default one, which means, load bootswatch css after you load the bootstrap css.
It would also be advisable to rename your downloaded bootswatch CSS file.
Following documentation, I downloaded Semantic UI with:
npm install semantic-ui
then, I customised few variables per site, also few on element level, button for example.
This is all well, and I haven't had any problem changing those.
Then in theme.config file, I could specify:
#button: 'mytheme';
to pickup those custom style overrides
For my theme to be separate from Semantic UI core, I crated directory in the following path,
src/themes/mytheme
,and after running gulp build, I expected to have that mytheme exported over to dist/themes/mytheme along with basic and default which were already there. But that was not the case. So to be able to use my new button styles, I had to move manually newly generated button.css from dist/components after that gulp build task.
Am I doing this wrong? How to have all override files in one place like packaged theme? So I could then add <link> declaration after semantic.min.css to use my overrides.