I have a small problem with Shopware aplication. My point is, I create a new Theme which works perfectly, I can change any information at webpage using shopware backend profile, but when i copy the less files to my new repository folder, I cannot compile new theme. It stucks.
From the beginning,
Creating a theme using parent Responsive, all works perfect, theme compile.
Changing information on page, work perfect, theme compile.
Copy less files from Responsive/_public/less to newrepository/frontend/_public/less etc and it stucks.
Right now i dont have any idea how I am suppose to deal with it.
Any ideas ?
When a theme in shopware doesn't compile there is most probably something wrong with your less files. Have you copied all less files?
The path you mentioned is not correct.
syntax error in less files?
Did you copy the file Responsive/frontend/_public/src/less/all.less without copying the files that are imported in the all.less? Same applies for other files in this directory.
Whatever it is that is wrong with your less files. You shouldn't need to copy them from the parent theme. If you want to change something, just create your own files.
Say you want to have the background white. Create a file YOUR_THEME/frontend/_public/src/less/_modules/body.less with the content:
body {
background: #fff;
}
Then you are also going to need a file YOUR_THEME/frontend/_public/src/less/all.less with the content:
#import "_modules/body";
No need to copy or modify the original files.
Create a .css file here:
Responsive/frontend/_public/src/css/style.css
After that you should include the file in your Theme.php file like this:
protected $css = array('src/css/style.css');
under this function:
public function createConfig(Form\Container\TabContainer $container)
{
}
It worked for me. I have no idea how to include less files in a theme, they are usually added in a plugin by creating an event. I hope this helps.
Also Responsive Theme is default theme in Shopware. You should extend it and work on the newly created theme.
I guess it is obviously but are you following the Shopware strukture?
all.less (#import "modules";)
--_modules (#import "_modules/your";)
---your.less
?
Please don't copy all Less Files from the responsive theme. There are some mixins for the grid that stucks if you compile it twice, which is exactly the case if you copy all the files.
Related
I'm wondering how to properly import boostrap.scss into WordPress. I think I'm struggling with some absolute / relative path issue: boostrap.scss file has a lot of dependecies and those dependecies have further dependecies.
I've tried to specify a realtive path as
#import "/assets/css/boostrap/namefile.scss"
inside my style.sass file (when it compiles it generates the style.css file, registered and enqueued in the functions.php as WordPress requires) and all over inside the bootstrap .scss files to avoid errors like "File to import not found or unreadable", but it works only for several files (honestly I have no clue about why sometimes this works and sometimes not).
Anyway, either if this method would work (and I think it wouldn't) I want to beleive there's a more efficient solution to work with variables, maps, functions, and mixins inside WordPress.
Any help? Thank you
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
Here is my current issue : I am using a custom child theme (from Parabola, Cryout Creations, last version), but it seems that the editor-style.css file is not up-to-date. Rather than rewriting everything, I would like it to contain every css used on the front-end, so TinyMCE looks as close as the published page/article (this is important).
In order to do that, I have created a new editor-style.css file in my child theme, so it overrides the not-up-to-date file. So far, it includes the style.css file from my theme, but it lacks a lot of CSS from WordPress Core : the ones written on line 60 on the index file : http://nouveau.domaineloupia.com.
So, how to add this “core CSS” to my editor-style.css file ? And would it be the best way to do this ? I have seen many stuff talking about the add_editor_style function, but I do not know if I could use it to do what I want nor how.
Thanks for reading so far, and thank again in advance for any help you could provide !
You could just use #import url("YOURCORECSS.css"); in the top of your `editor-style.css' file?
But that tends to slow down your pages.
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
I'm creating a theme where i want it to have different widgets and plugins. Each plugin would ideally have it's own css file. However, this approach is not so good because i can end up having multiple files included in my header.
Is there an approach where i can sort of cache all different css files in a single one upon the first user request and then just use that ?
Just use only one css with all the different styles from each plugin in that single file. This way you'll end up having only one external css file and it will be cached, saving bandwitdh and decreasing loading times of the page.
Maybe look at things like yui compressor http://developer.yahoo.com/yui/compressor/
In case anyone is still interested, I created a PHP class that combines all the files .css or .js files of the specified folder into one and minimize it. It can be found in my public github. For using it, just do:
if (file_exists('minimize.php')) =
{
include 'minimize.php';
$Minimize = new Minimize();
$Minimize->folder('/path/to/the/folder/','.css','/path/to/the/resulting/file/style.css');
}
else
echo "The minimizer file was not found, please make sure it's in this folder";