I am adapting the Blueprint theme into a custom template for BigCommerce. I compiled the theme.less file with Crunch. The style editor loads correctly and displays all of my changes correctly. However, it does not process any changes made from within style editor; nor does it allow style editor to be published. It just "hangs."
I am uploading the four .less files:
style-editor-variables.less
internal-variables.less
init.less
theme.less
as well as the theme.css file, and the style.css file via webdav in Dreamweaver CC 2014. I have uploaded via Cyberduck, but have the same issue.
I have tried uploading the same six files without compiling them first, and most (but not all) of my changes are reflected in style editor, and style editor successfully reflects and saves changes made from within itself.
Are there any other files I need to upload (or not upload), or is there any special code I need to add in order to enable style editor to work?
Thanks for any input, advice, or guidance!
Related
I has a css file named styles.css and it was loaded in masterPage of sharepoint .I change this css file but not working. I make sure this css file already loaded in html page.I also clear cache but I don't know why it doesn't affect when I edit. Please help me, thank you so much!
It is not recommended to modify the online master page directly.
Firstly, you need to check if the CSS file is really imported.
Secondly,if the file is not imported, classic page you could upload CSS here.
modern page we should upload CSS with SPFX,here is a tutorial: https://github.com/hugoabernier/react-application-injectcss.
If the file is imported, first check whether the content of the file is displayed normally (excluding problems caused by encoding), then you can add ‘! Important’ after the style.
I am trying to customize a theme of BigCommerce. The problem is this theme is using SASS (.scss) files instead of css. I have basic knowledge of SASS.
But I need to customize theme according to html template. In other word you can say I am trying to convert html template into a theme (free theme that is downloaded from market).
Issue there is that, html template is using CSS and theme uses .SCSS. So right now I am trying to find way to add css of template into theme.
Right now I am finding way to embed my css into theme and here are few things that I have tried
I tried to directly add CSS into .SCSS file like this
.header-logo-text{color:#ffffff!important;}
The above css code which I am typing in theme.scss file (just for testing purpose) to check whether writing css in .scss file will take any effect or not, But this way it didn't change font color!
In a second way I tried to add css in html tags using style like this
<div class="anyclass" style="background:red;">
This way its picking up css.
I have created online store on bigcommerce site and trying to customize from customize option oprovided by bigcommerce. Since I couldn't see any upload file option through which I can directly upload my css files into it, thats why trying to somehow add css in current files of theme either in html or in .scss.
And not a single css file is present in theme, how I can add my css into that theme?
SASS with the .scss syntax is a superset of CSS. That means valid CSS is automatically valid SASS (not in the other syntax .sass though). Of course you need to make sure you're SASS file gets compiled and included.
TL;DR: you can use CSS inside .scss files.
I'm creating a site based on AdminLTE (v 2.3.0), a open source control panel template that uses bootstrap (v 3.3.5).
When I load my page in Google Chrome (v 48.0.2564.97 m) and use the developer tool (F12) in sources I notice that my content folder has a subfolder called less.
It is like:
Content/
├──less/
| ├──...
| ├──table.less
| └──...
The "..." means other files.
But here's the deal: I don't have any those files in my server and this table.less is generating problem to me.
So I did a test. One by one I remove the js and css files that I had referenced.
I discovered that when I add the bootstrap.css file this folder with all files appears.
Now my questions are:
Why this is happened?
How can I avoid it?
And if I can't how can I make my css file has priority above the less files?
PS:
I asked the 3rd question because normally the last css file to be add has priority when some property is overloaded. But in my case my last file is site.css, this file has definitions for tables, but when I open the page the properties of table.less has priority above my file and this is causing me problems.
You probably have a file called bootstrap.min.css.map or bootstrap.css.map next to the bootstrap css file. It's function is to reference the original source files and line numbers in your browser's developer tool section for each directive coming from your css file. If it were not there, you would always see bootstrap.css line 1 next to each css directive, which would not be very informative, this way you see the actual source structure that generated the css. It's all virtual, the less files are not there.
Can PhpStorm hide generated CSS files under the LESS file?
Here is a screenshot of a WordPress theme:
I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?
(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)
I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.
Thanks!
Never mind, it seems to be (kinda?) working:
style.less nests style.css correctly, not sure why the others are not showing.
It is called File Nesting and it’s available from the gear icon in the Project browser.
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.