Not family with LESS... Looking for best way to ensure custom in line CSS is preserved
Permalink
Is it plausible to just export the custom CSS I've been adding in the design customization area as a standalone CSS file prior to launch? I want to make sure it's preserved after launch and I'm not familiar with the LESS architecture.
A modified/forked Elemental...http://www.barkingtuna.com/mlorch/...
My worry is that if I remove the CSS I've added to a standalone file, the various LESS files will supercede it similar to how the order of selectors plays a role in how styles render. Not being familiar with LESS... I worry that priority is given to the various LESS files over the CSS file I'd create with my tweaks. Does that make any sense? I assume that the CSS added in the Design/Customize/Custom CSS area is being given priority as in-line CSS in essence and if it is added to a CSS file instead, it could be overridden.
My worry is that if I remove the CSS I've added to a standalone file, the various LESS files will supercede it similar to how the order of selectors plays a role in how styles render. Not being familiar with LESS... I worry that priority is given to the various LESS files over the CSS file I'd create with my tweaks. Does that make any sense? I assume that the CSS added in the Design/Customize/Custom CSS area is being given priority as in-line CSS in essence and if it is added to a CSS file instead, it could be overridden.
Case and point... I put the CSS into a new file called jmacustom.css, deleted the CSS added through the dashboard, refreshed cache, and it was overridden by the main.css file. I left the jmacustom.css file in their so you can see that it is 3rd in line and reinstated the custom CSS through the dashboard and all is back to the way it was. How do I make sure the if remove the CSS from the dashboard customizations that they are prioritized over the main.css file. I'm sure this is an elementary question for those familiar with LESS, but this is my first foray into the 5.7 world and it's taking a bit to get used to.
Less uses the standard cascade. Order and selector specificity will be the same as standard CSS.
The styles that you add in Custom CSS are added to the <head> in a <style> tag below the links to your CSS files.
Currently, jmacustom.css is first in the CSS cascade. It is being overridden.
You can remove your Custom CSS and jmacustom.css file. Take those styles and add them to the end of main.less, so they are the last styles.
This should work the same way as having them in a <style> tag.
The styles that you add in Custom CSS are added to the <head> in a <style> tag below the links to your CSS files.
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="/mlorch/application/themes/jma/css/jmacustom.css"> <link rel="stylesheet" type="text/css" href="/mlorch/application/themes/jma/css/bootstrap-modified.css"> <link href="/mlorch/application/files/cache/css/jma/main.css" rel="stylesheet" type="text/css" media="all"> <!-- ... abbreviated code --> <!-- your Custom CSS styles --> <style type="text/css"> div.ccm-page div.ccm-block-page-attribute-display-wrapper .ccm-block-page-attribute-display-title { color: #FF4226; } div.ccm-page div.ccm-block-page-attribute-display-wrapper { color: #333; } ...
Currently, jmacustom.css is first in the CSS cascade. It is being overridden.
You can remove your Custom CSS and jmacustom.css file. Take those styles and add them to the end of main.less, so they are the last styles.
This should work the same way as having them in a <style> tag.
Perfect... I'll give it a shot. I assumed I was over-thinking this and I appreciate your help.
What theme are you using?