I am having problem on my Wordpress to save changes on module.css file.
It appears that I have a minified file : module.min.css which comes with the theme.
Each times I make a change it the module.css file, it doesn't change it on my website page. I check with google inspector, and the minified file is loaded, obvioulsy, without my changes.
My website page : https://dermelia.fr/epilation-laser-un-acte-medical/
I saw it could be a caching problem, then I tried to purge cache, I use WP Rocket plugin and Clouflare. I cleaned the cache on both Clouflare and my website, still nothing...
I would like to add just a border-top on my ".widget ul li { " class
Any suggestion ?
Hi Changing in your css files will not reflect in your min.css files you have to update it.
To updated the changes use,
grunt uglify
grunt cssmin
if you want to update html use,
grunt htmlmin
If you don't have grunt please install it.
If module.min.css is generated at run time by some plugin like autoptimize, it is most probably cache-related problem.
However, in your case, the theme most probably simply has two options (minified & not minified CSS) & you have chosen to use minified version to improve performance.
In this case, CSS files are completely independent & change in 1 file, will not affect another in any way.
You have two options:
Make changes in not-minified CSS file and then minify it on your own. Finally update both files.
Switch to use not-minified version & install something like previously mentioned autoptimize to calculate minified files at runtime.
Please note, that in both cases you would be better off by not modifying original theme files & creating a child theme instead.
Otherwise, all your changes will be lost once the theme will be updated.
Related
I have a wordpress website. I usually make changes in CSS file of theme without any problem but there is file in which CSS changes do not appear. But they do appear while inspecting element.
But while inspecting it shows some digits after the file name. The file name is theme.css, but inspector show me the file name: theme.css?ver=15350008013:1
CSS is compacted and all codes are in one line.
Any change in the CSS file not happen but in the inspector shown. Why CSS editing not working?
This is fairly standard of most caching plugins for Wordpress.
theme.css?ver=15350008013:1
Is requesting a cached version of the file.
The CSS being all in one line is a minified version of the file. This is done to reduce the load on the server by making the file smaller.
Suggestions:
Look through your theme settings to see if there is any mention
of caching.
Look through your plugins and see if there is any
mention of caching.
Once found, clear / flush the cache.
Your changes should now be loaded by the server.
Generally what happens when you clear out the cache is that your plugin / theme will be unable to find a cached version and will minifiy and generate you a new version based off the original and you will see a new number at the end of the request string to tell the browser that the version it has downloaded previously is old and that it needs the new one.
Within our application we're trying to achieve (html)templating based on themes. For example, if the specified theme is default, we should use the basic templates, but if the theme is 'coolTheme', all templates postfixed with '-coolTheme.html' should be used instead.
We have considered different solutions, but figured there must be a simple/default way to do this. These are the options we came up with:
Gulp task that puts all html files per theme in a {myTheme}-templates.js. When changing the theme angular resets the $templateCache, loads in the theme file and puts the templates in the $templateCache.
Gulp task that copies over all *-.myTheme.html to where the default templates should be (based on given theme parameter). Disadvantages are that you cannot change the theme on the fly.
Intercepting/decorating the $templateRequest, to check in a list/configuration file if the requested file is marked as 'themed', and then change the request to 'theFile-{myTheme}.html' instead
Which is the best way to handle this? And why? Does anyone have the 'perfect' solution for this?
I have some problems with css auto complete on my html files.
My project is java project on spring/bootstrap. I have less file that is compiled to css later on. On my html files I don't have access to classes from less or bootstrap files. I have "webapp" folder configured correctly in project.
CSS files are in:
a) webapp\css\less\main.less
b) webapp\css\ (bootstrap, main.css main.min.css)
Is it possible to add css (class) completition to html files that are created in project?
It should do it out of the box for css: http://www.jetbrains.com/editors/html_css_editor.jsp?ide=idea
for LESS however you might need to use a plugin : https://plugins.jetbrains.com/plugin/7059?pr=idea
I know LESS works out of the box with WebStorm and PHPStorm, though
If it still doesn't work, you might need to set the right file extension or associate that file with a certain interpreter
I am developing the RWD web app using twitter bootstrap, i want to do customize the bootstrap fro my needs, for that i downloaded the bootstrap source from getbootstrap.com .
I am planning to customize the bootstrap by keeping the bootstrap less files untouched and i want to create my own less files for customiztion as below
#import "../bootstrap/less/bootstrap.less";
#import "custom-variables.less";
#import "custom-other.less";
#import "../bootstrap/less/utilities.less";
But when i downloaded the bootstrap source, i am seeing so many folders along with the bootstrap LESS folder as below,
My question is: what are the files needed for me from bootstrap source folder to include in my web project.
Thanks in advance for any help.
The only file you need to import is bootstrap.less from less folder.
This file itself imports all the other .less files from that folder (besides theme.less, which is used for theming).
I'd suggest importing bootstrap.less and using theme.less to develop customized solutions.
Reading source of both files above may be beneficial to understanding what is "under the hood".
Remember that although you only import bootstrap.less, all the other files must be kept where they are, in order for bootstrap.less to be able to import them.
The files you need are in LESS folder. You can create a new file if you don't want to keep bootstrap same with layout.less . And can import that in master. After compilation your changes will be on top of it. You can use any compiler of your choice. e.g. Sublime Text plugin
You can also use just bootstrap.min.css and write your LESS code in a file a compile it to apply your custom changes(remember to import or include in your html file). This way you don't have to keep track of so many LESS file. As in any way your plans are not to change base bootstrap. So you can choose precompiled version and can always replace it when new updates come.
So I'm trying to set up an environment where I can generate a new project and minimize the customization/complexity involved in setting up that new project. I'm using Structurer Pro (from nettuts+) to build the fileset, and this is an awesome thing. I've got github for MAC set up, allowing me to grab the latest Foundation framework files and put them in to the current project.
Now, I'm trying to incorporate LESS into the process also. However, Foundation's css files aren't currently set up with LESS, which means I have 2 options...(1) take a current version and LESS-ize them, then use those customized files to create new projects. (2) don't use LESS...
The other problem I have is, there seem to be quite a few compilers for LESS (simpLESS, CodeKit, LESS, compass), but none of them combine css files! So if I set up 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less etc), and have the variables in them, I really don't want 10 css files as the output. I really want 1 compiled css file as the output. I know I can do this manually, or even through Clean css or any of the 30 other sites out there...
But is there one 'thing' out there that will let me use the latest files to create a project framework, customize it by applying a color swatch set to a series of variables (LESS), then compile & combine the resulting CSS for actual implementation?
Foundation ended up moving to SCSS in version 3, so this became kind of a moot point...
Trying to answer some of your questions:
Rename Foundation's .css files to .less and put in your /less/ directory.
Any .css file is a valid .less file (not vice versa though)
You don't have to convert this CSS to LESS, do so only for things you're going to be modifying, and save some time ;)
In your master.less file import these files with #import 'foundation-file';
re: how to combine css/less files :)
Compile only the master.less and include it in your HTML
master.less is your assumed MAIN stylesheet which may actually contain only #import statements, for me it's easier to manage everything this way (and where the combination happens). it will compile to master.css which you then use.
I'm not sure what css foundation includes, if it's a reset.css or something similar I would just leave it and not less-ize it. You would have two css files: one reset.css and one styles.css (the latter of which would be compiled from less files).
You could then add your own setup including a style.less which #imports the various components, if you make this generic enough you can reuse it throughout various projects.
The lessc compiler does handle the #imports of various files and combines them into one file: I have styles.less which #imports base.less components.less etc. I just compile the styles.less to styles.css and it handles the rest:
lessc styles.less styles.css
See: https://gist.github.com/1480684